Les polices de caractères à utiliser :

 

Pour l’impression, toutes les polices de caractères existantes peuvent bien sûr être utilisées dans une composition. Mais il en va tout autrement sur le web.
En théorie à l’heure actuelle, on peut dire que n’importe quelle police de caractères est utilisable pour afficher du texte dans une page web. Dans la pratique, il serait plus juste de dire que seules les polices de caractères dites génériques peuvent être utilisées.
Les polices de caractères génériques sont les polices communes que l’on retrouve présentes par défaut sur les différents systèmes d’exploitation (Mac OS, Windows, Linux, …). Le concepteur de la page web est donc certain que le visiteur de sa page possède la police qui est utilisée pour afficher le texte correctement.

 

Les 11 polices de caractères communes Mac et PC :

 

  • Arial
  • Arial Black
  • Comic Sans MS
  • Courier New
  • Georgia
  • Impact
  • Times New Roman
  • Trebuchet MS
  • Verdana
  • Symbol
  • Webdings
    • (Webdings)
     

Ajoutées à cette liste les deux polices de base :
 
  • sans-serif
  • serif

Concrètement, la logique est de dire au navigateur d’utiliser une police de caractères qui est présente sur l’ordinateur du visiteur. En proposant plusieurs choix (collection), le navigateur vérifie la présence de la première police spécifié. S’il ne la trouve pas, il cherchera la suivante, et ainsi de suite jusqu’à trouver ce qu’il faut. Sinon, il utilisera une police générique (serif ou sans-serif).
La syntaxe utilisée en CSS pour proposer une collection de polices est la suivante : les polices sont séparées par une virgule et les noms de polices contenant un ou plusieurs espaces sont entre guillemets ou apostrophes droites.

body {
   font-family: Arial, Helvetica, 'Trebuchet MS', sans-serif;
}

Il est important de constituer une collection de polices en suivant quelques règles pour éviter de se retrouver avec deux polices très différentes chez deux visiteurs différents.

  1. Ne basez pas le desing de votre page sur une police en particulier au risque de voir celui-ci exploser parce que cette police n’est pas disponible chez le visiteur.
  2. Assurez-vous que les polices placées dans une même collection soient suffisament proches de par leur style, leur taille et leur largeur relative.
  3. Utilisez prioritairement des polices populaires qui garantissent leur présence sur l’ordinateurs des visiteurs, quelque soit le système d’exploitation.

 

Exemples de collections :

 

Polices à empattements (serif) :

Polices sans empattements (sans-serif) :

Police à chasse fixe (monospace) :

 

Il existe actuellement des mécanismes qui permettent l’utilisation de polices personnalisées, donc différentes des polices génériques, grâce à la règle CSS 3 @font-face. Ces mécanismes sont de plus en plus répandus mais tous les navigateurs récents ne l’implémentent pas de la même façon. En effet, il semble que Safari (version 3), Firefox (version 3.5) et Opera (version 10) supportent @font-face sans problème. Internet Explorer, quant à lui, accepte @font-face uniquement pour un format précis : l’Embedded OpenType (EOT).
Pour contrer ce problème, soit il faut convertir une police TTF en EOT directement en ligne ou en utilisant Font-face Generator de Font-Squirrel, soit utiliser la syntaxe proposée par Paul Irish sur cette page (en anglais).

 

Autres techniques possibles :

 

Il y a bien sûr d’autres possibilités techniques permettant d’utiliser des polices de caractères particulières voir très fantaisistes dans une page web. Toutes fois, il est important de garder en tête que ces solutions ne sont réellement efficaces et pertinentes que pour des éléments précis de la page et sont à proscrire pour le texte principal.

les images :

Le meilleur moyen d’assurer un rendu visuel concordant parfaitement avec le projet du concepteur de la page web est bien sûr l’utilisation d’une image, tout en assurant l’accessibilité par l’utilisation de l’attribut <alt> :

<h1>
   <img src="images/titre-1.png" alt="Les polices de caractères
   sur le web" />
</h1>

Ce qui donne, par exemple :   Les polices de caractères sur le web

Cette technique est facilement gérable pour un logo, un nom de site, un titre principal, les éléments d’un menu ou les intitulés mais devient fastidieux pour du contenu amené à changer régulièrement.

Les images générées côté serveur :

Des images de texte peut être générées côté serveur par un script PHP, Perl, Python, Ruby, … Cette méthode demande bien sûr des connaissances avancées dans l’un ou l’autre de ces langages de programmation web. Il est également nécessaire que les bibliothèques de fonctions, comme la librairies GD qui génère les images en PHP, soient installées sur le serveur qui héberge votre page web.

Pour un exemple en PHP :

   

 

Émuler @font-face :

Certains utilitaires cherchent à émuler le fonctionnement de @font-face. Ces utilitaires en JavaScript ou combinant JavaScript et Flash ont pourtant des limites assez importantes (mauvaise gestion des caractères accentués, impossibilité d’afficher du texte sur plusieurs lignes, …).
À utiliser donc avec précaution et modération !

Pour les curieux, voici quelques liens à suivre :


 

Tester la disponibilité d’une police :

Il existe une fonction en jQuery, Fontavailable, qui calcule la différence entre le rendu (largeur en pixels) obtenu avec une police souhaité (ex. : Verdana) et une police inexistante (ex. : Chaos Times). Si cette différence est nulle, il est fort probable qu’aucune de ces polices n’existe sur l’ordinateur du visiteur. Dans le cas contraire, il est probable que la police souhaitée est bien présente.

 

Retour au sommaire