Choisir une police pour le web

Contrairement à un document imprimé, le choix de la police est beaucoup plus limité sur le web. La raison est simple: la navigateur se sert de la fonte installée sur l’ordinateur de l’internaute.

Classification

En typographie, il existe une classification des polices. Le W3C a simplifié cette catégorisation pour l’adapter au web et propose 5 grandes familles. Elles doivent être utilisées dans la feuille de style en dernier recours. Elles sont dites génériques puisqu’elles définissent un ensemble de critères à respecter.

  • serif: police à empattement (Times New Roman, Georgia, Garamond)
  • sans serif: police sans empattement (Arial, Verdana, Trebuchet MS, Geneva)
  • monospace: police à chasse fixe (Courrier, Lucida, Monaco)
  • cursive: scriptes (Comic Sans MS, Zapf Chancery)
  • fantasy: fantaisistes (Critter, Cottonwood)

Empattements

Il existe deux grands groupes de polices: les polices à empattement (serif en anglais), les plus anciennes, et les polices à bâtons (sans serif ou linéales). Les empattements sont des petits traits qui terminent les jambages et les hampes de certains caractères.

Empattements

La police à empattements la plus connue est sans doute le Times New Roman (Windows) apparu en 1932 dans le quotidien anglais portant son nom. Microsoft l’a rendu célèbre en l’intégrant rapidement dans son système d’exploitation et en faisant d’elle la police par défaut. Les polices serif conviennent parfaitement pour les textes de petite taille et son usage est principalement réservé à l’impression. Cette règle n’est pas gravée dans le marbre puisque le Georgia (police à empattements) a été pensé et créée spécialement pour l’écran.

Polices système

Une police système est une fonte présente par défaut sur un ordinateur. Un Windows comporte un certain nombres de polices installées. Idem pour les autres systèmes comme Mac ou Linux. Outre les différences entre plateformes, on peut espérer que certaines fontes se retrouvent sur toutes les versions d’un même système d’exploitation. Par exemple, l’Helvetica est une valeur sûre. Il est présent sur un Mac dernière génération ou un vieux modèle. Le web regorge de milliers d’autres polices mais le webmaster devra se limiter à celles présentes sur le plus grand nombre de machines.

Nom Famille Commentaire
Arial Sans serif Copie vulgaire de l’Helvetica sur Mac. Adapté à l’écran. Lisible au-dessus de 10 points.
Comic Sans MS Cursive Police enfant. Ne convient pas pour des sites professionnels. Peu lisible à l’écran.
Courier New Monospace Police à espacement fixe. Utilisée pour reproduire du code.
Georgia Serif Meilleure police à empattements. Lisible au-dessus de 10 points.
Impact Sans serif Très peu adapté pour du contenu en ligne. Très peu lisible.
Times New Roman Serif Peu adapté à l’écran surtout dans des petites tailles.
Trebuchet MS Sans serif Moderne et simple. Lisible au-dessus de 10 pts.
Verdana Sans serif La plus utilisée sur le web. Lisible même dans de petites tailles.

Il fut un temps où le Comic Sans MS avait la cote sur le web. Aujourd’hui, le public le réserve plutôt dans l’administration. Pour le texte, les webmasters utilisent abondamment les polices modernes conçues spécialement pour l’écran: Verdana et Arial avec une nette préférence pour le Verdana. Le Georgia est la seule fonte à empattements adaptée au web. Dans une moindre mesure, on retrouve le Trebuchet, Lucida Sans mais ils sont souvent réservés aux titres.

Prudence avec Verdana
Le Verdana apparaît plus grand que les autres. Du coup, en cas de substitution par une police sans serif il risque d’être trop petit pour être lu correctement. C’est le cas par exemple de Linux qui ne gère pas cette police.

Spécifier des polices en HTML

Lors de l’écriture d’une page web, il faut préciser la police dans la feuille de style. Dans l’exemple ci-dessous, Verdana est notre premier choix. Si le visiteur ne possède pas cette police, le navigateur choisit alors l’Arial puis l’Helvetica. En fin de compte, si aucune de ces polices n’est présente, le navigateur utilise la police par défaut sans empattement (sans serif dans notre exemple).

{code type=css}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
}
{/code}

Il est important de toujours spécifier son choix typographique. Sinon, l’ordinateur utilise la police système par défaut… Times New Roman. Or cette police à empattement n’est pas du tout adaptée à l’écran et risque de poser des problèmes de lisibilité.

Éviter les mélanges

La sobriété est le maître mot pour garder un tout cohérent. Cela ne sert à rien de mélanger 36 polices sur une même page, vous ne ferez qu’aggraver la lisibilité du texte. La typographie est au service du lecteur et le mieux qu’elle puisse faire c’est de passer inaperçu.

On ne mélange pas deux caractères de la même famille. Titrer en Times et sous-titrer en Georgia n’est pas un bon choix car ce sont deux polices assez semblables. Par contre, deux familles opposées offrent un contraste visuel intéressant. Par exemple, le Georgia pour un premier niveau de lecture et le Verdana pour le second niveau de lecture. On joue ainsi sur le contraste visuel dans la forme des écritures. Limitez-vous à trois polices de base pour l’ensemble de vos pages.

Tester, tester !

Vous avez compris les grandes lignes. Maintenant il faut passer à la pratique. Comment faire accorder les polices entre elles de manière rapide et efficace ? Les éditeurs web ou la modification de CSS sont lourds et prennent trop de temps. Le mieux est d’aller faire un tour sur Typetester. Vous comparez trois fontes en même temps avec une série de réglages: choix de la police, couleur, alignement…

Capture Typetester
Capture http://www.typetester.org

Publicités

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s