Éducation, société et technologie
CSS

CSS - Les polices : quelle famille choisir ? [1]

mercredi 7 janvier 2004 par André Vincent

Le choix d’une ou de familles de polices de caractères dans la conception de pages web qui s’appuie sur les feuilles de styles (CSS) est d’autant plus crucial que le but de l’opération est d’obtenir la même qualité graphique et typographique que celle que nous obtenons en utilisant des images textuelles peaufinées dans Photoshop... mais cette fois, sans images.

C’est la propriété CSS font-family qui permet de choisir la famille de polices de caractères désirées pour l’ensemble de la page ou pour un élément donné. Exemple :

La police affichée dans la page du visiteur sera, par ordre de disponibilité selon le système d’exploitation du visiteur, la police1, puis la police2 et ainsi de suite. Si aucune des polices n’est installée chez le visiteur, la classification s’appliquera, selon les préférences du logiciel de navigation.

En pratique, nous pouvons définir notre choix ainsi :

Pour que l’opération soit réussie, il faut se familiariser avec les éléments suivants :

  1. Comment la classification des polices est-elle établie pour le Web ?
  2. Quelles sont les polices les plus courantes présentes par défaut sur les différents systèmes d’exploitation ?
  3. Quelles sont les caractéristiques graphiques, typographiques et de lisibilité de ces polices, particulièrement pour un affichage sur écran ?
  4. Quel usage désirons-nous en faire et dans quel ordre de préférence ?

1. Classification
Dans le domaine de la production imprimée, la classification Vox-Atypi constitue en quelque sorte LA référence ; sur le web, c’est la classification du W3C qui fait office de référence. Le W3C a établit 5 classes génériques de polices de caractères :

  • serif,
  • sans-serif,
  • monospace,
  • cursive,
  • fantasy.

La plupart des logiciels de navigation modernes permettent de fixer dans les préférences du navigateur la police par défaut qui sera utilisée pour chacune de ces classes, en l’absence de la police spécifiée dans la feuille de style. Il est donc important de toujours spécifier la classe désirée à la fin de la liste des polices souhaitées.

2. Les polices les plus courantes
Dans le choix d’un ensemble de polices, il est important de bien connaître quelles sont les polices que l’on retrouve le plus couramment sur les différents systèmes d’exploitation. À cet effet, voir le sondage mené par Philip Shaw :

Bien que n’ayant pas de valeur scientifique, ce sondage fournit un assez bon aperçu des polices que l’on peut retrouver dans les environnements les plus courants. Il faut évidemment pondérer ces résultats. Il semble en effet que les polices les plus courantes de toutes soient sous-estimées ; sans doute parce que nous sommes tellement habitués à les voir que nous avons tendance à les oublier. Ainsi, par exemple les polices Geneva sur Mac, Arial sur Windows et Lucida sur Unix ont été sous-estimées ; alors que nous savons que ces polices sont des polices très répandues sur ces plateformes respectives, et ce, depuis longtemps.

2. Caractéristiques recherchées d’une bonne police pour l’écran
Pour les textes à lire, les caractéristiques d’une bonne police pour l’écran sont en général celles qu’on recherche pour l’impression dans des conditions difficiles (comme par exemple dans un journal sur papier de piètre qualité et impression ultra rapide).

  • pas d’empattement trop fins
  • hauteur x élevé (et donc jambage court)
  • contraste moyen entre les pleins et les déliés
  • contre-poinçon (intérieur du o a e p) bien ouvert
  • approche (espace entre les caractères) bien dégagé
  • contraste de graisse marqué

Il nous faut ici exclure d’emblée Times, Times New Roman et Helvetica. Certaines familles de polices ont été spécialement conçues pour affichage à l’écran. C’est le cas, par exemple, des polices Geneva, New York et Lucida Grande (OS X) exclusivement disponibles sur Macintosh et Arial sur Windows.

Web core Fonts

Microsoft a également, dans le cadre de sa guerre pour imposer le monopole de Internet Explorer comme le logiciel de navigation de facto sur le Web, largement diffusé ce que plusieurs spécialistes considèrent comme les polices les plus lisibles pour l’écran, dont : Verdana, Trebuchet MS et Georgia. De plus, ces polices sont largement installées sur Macintosh et de plus en plus sur Unix.

Téléchargement : TrueType core fonts for the Web (Mac et Windows, pour Linux, voir : Sourceforge)

Serif :


  • Georgia,
    Georgia - Bold,
    Georgia - Italic,
    Georgia - Bold Italic

  • Times New Roman,
    Times New Roman - Bold,
    Times NewRoman - Italic,
    Times NewRoman- Bold Italic

Sans-serif :


  • Arial,
    Arial - Bold,
    Arial - Italic,
    Arial - Bold Italic

  • Arial - Black

  • Impact

  • Tahoma,
    Tahoma - Bold,
    Tahoma - Italic,
    Tahoma - Bold Italic

  • Trebuchet MS,
    Trebuchet MS - Bold,
    Trebuchet MS - Italic,
    Trebuchet MS - Bold Italic

  • Verdana,
    Verdana - Bold,
    Verdana - Italic,
    Verdana - Bold Italic

Cursive :


  • Comic Sans MS,
    Comic Sans MS - Bold,

Mono-space :


  • Courier New,
    Courier New - Bold,
    Courier New - Italic,
    Courier New - Bold Italic

  • Andale Mono

4. Usage et ordre de préférence
Ici, il faut distinguer entre les polices pour le texte à lire et les polices pour les titres ou les menus de navigation.

L’ordre de préférence s’établit de la police souhaitée, la plus spécifique en allant vers les polices les plus génériques susceptibles de se retrouver sur la plupart des systèmes et possédant des caractéristiques semblables dans une classe donnée. En passant du premier choix, au second, on tentera de conserver l’aspect le plus uniforme possible. Remarquez que si le nom de la police contient plus d’un mot, il doit être entre guillemets.

Texte à lire
avec empattement
Ainsi, pour un ensemble de polices robustes avec empattement, présentant un grande lisibilité, on établirait le choix suivant :

Pour un choix plus classique, présentant une plus grande finesse, on pourrait aussi y aller avec cet autre choix, mais en augmentant le corps de 10 à 20%, par rapport au précédent ensemble.

font-family: "Hoefler Text", "Bookman Antiqua", Palatino, "Utopia", "Times New Roman", Times, "New Century Schoolbook",  Georgia, "New York", serif;

sans empattement
Plusieurs spécialistes considèrent que les polices sans empattement présente une meilleure lisibilité à l’écran. Dans ce cas, on opterait pour l’ensemble suivant :

font-family: Verdana, "Lucida Grande", Lucida, Tahoma, "Trebuchet MS", Arial, Geneva, Helvetica, sans-serif;

Pour une variante plus originale, sans empattement, présentant une grande subtilité, avec un contraste de graisse moins prononcé, on pourrait aussi opter pour l’ensemble suivant, en augmentant le corps de 5 à 10% :

font-family: Optima, "Trebuchet MS", Lucida, Arial, Geneva, Verdana, "Lucida Grande", Tahoma, Helvetica, sans-serif;

Titres et menus de navigation
Ici, nous avons plus grande liberté. Souvent, les polices sans empattement possédant des graisses fortes, conviennent assez bien. Une approche plus resserrée est aussi souhaitable. Ainsi, Helvetica pourrait remonter dans l’ordre de préférence.

On peut aussi se permettre certaines fantaisies en utilisant des polices condensées à graisse unique, mais forte, notamment utiles dans les menus de navigation. Exemple :

font-family: Techno, "Haettenschweiler", Charcoal, Impact, "Arial Black", Verdana, Lucida, Helvetica, fantaisy;

Voir aussi :

...et un bon réglage de la taille
En plus d’un choix pertinent du jeux de polices, un réglage adéquat du corps (taille) des caractères est sans doute le facteur le plus important de la lisibilité d’un texte à l’écran. Ce sujet est traité dans : CSS - Les polices : quelle taille choisir ?.


Accueil | Contact | Plan du site | | Statistiques du site | Visiteurs : 137249 / 1816296

Suivre la vie du site fr  Suivre la vie du site Cours Web  Suivre la vie du site Sites web statiques  Suivre la vie du site CSS - Feuilles de styles   ?    |    titre sites syndiques OPML   ?

Site réalisé avec SPIP 3.1.4 + AHUNTSIC

Creative Commons License

Visiteurs connectés : 5