Les formats de polices

La typographie est un des piliers du design graphique. Avant de choisir un format de fichier, il faut comprendre ce que sont les familles de polices, comment elles se déclinent en styles et graisses, et pourquoi ces distinctions importent pour le web comme pour l’impression.

Objectifs#

• Distinguer les grandes familles typographiques
• Comprendre les notions de style et de graisse
• Identifier les formats de fichiers de polices et leurs usages
• Choisir le bon format selon le contexte (web ou bureau)

Les grandes familles typographiques#

Les polices se regroupent en familles selon leur morphologie. La distinction fondamentale est la présence ou l’absence d’empattements : petits traits horizontaux qui terminent les extrémités des lettres.

Serif (avec empattements)#

Les polices serif portent des petits pieds à la base de chaque jambage. Ces empattements guident le regard le long de la ligne de texte, ce qui les rend particulièrement lisibles sur du papier. Exemples : Georgia, Times New Roman, Garamond, Palatino. Usages courants : corps de texte imprimé, presse, livres, documents formels, titres élégants.

Sans-serif (sans empattements)#

Les polices sans-serif ont des traits nets et homogènes, sans ornement aux extrémités. Elles s’affichent proprement sur écran, même à petite taille. Exemples : Arial, Helvetica, Roboto, Inter, Segoe UI. Usages courants : interfaces web et mobile, corps de texte numérique, affiches modernes, signalétique.

Autres familles#

Au-delà de ces deux grandes familles, on rencontre régulièrement :

Choisir une police selon l’effet recherché#

Le choix d’une famille typographique n’est pas seulement technique, il conditionne la perception du message et l’émotion ressentie par le lecteur.

Quelques questions à se poser avant de choisir : qui est le public cible (une police serif formelle conviendra à un cabinet d’avocats, une sans-serif épurée sera plus efficace pour une application mobile destinée aux jeunes adultes), quel est le support (les sans-serif restent lisibles à petite taille sur écran, les serif guident mieux le regard sur de longs textes imprimés), quelle émotion véhiculer, et quelle lisibilité est requise.

La lisibilité avant tout#

Trois critères déterminent la lisibilité réelle d’une police, quelle que soit la famille choisie : la hauteur d’x (plus elle est élevée, plus la police est lisible à petite taille), l’espacement des caractères (trop serré il fatigue l’oeil, trop large il rompt la fluidité de lecture), et le contraste des fûts (les polices à fort contraste, comme Didot, sont spectaculaires en grand mais difficiles à lire en petit).

La hauteur d’x est la hauteur des minuscules sans jambage, mesurée de la ligne de base au sommet de la lettre x. C’est l’un des indicateurs les plus fiables de la lisibilité d’une police à petite taille.

Une police avec une hauteur d’x élevée (comme Inter, Roboto ou Verdana) conserve des minuscules bien ouvertes même à 12 px. Une police avec une hauteur d’x faible (comme Garamond) paraît plus élégante mais moins lisible en corps de texte numérique.

Styles et graisses#

Une même famille de polices peut se décliner en plusieurs styles (romain, italique) et graisses (thin, regular, bold…).

La graisse désigne l’épaisseur du trait, exprimée en CSS avec la propriété font-weight :

Le style désigne l’orientation et la forme des caractères : romain (position droite, style par défaut), italique (caractères inclinés, souvent redessinés), ou oblique (version inclinée mécaniquement du romain, moins soignée que l’italique).

font-style: normal;   /* romain */
font-style: italic;   /* italique */
font-style: oblique;  /* oblique */

Les formats de fichiers#

Formats pour le bureau (TTF et OTF)#

Le format TrueType (.ttf), développé conjointement par Apple et Microsoft, est le format de référence des systèmes d’exploitation Windows et macOS. Support universel, usage en installation locale, mais fichier non compressé et lourd pour le web.

Le format OpenType (.otf) étend TrueType en y ajoutant des fonctionnalités typographiques avancées : ligatures, petites capitales, chiffres elzéviriens, variantes stylistiques. Pour une installation locale, OTF est le choix privilégié : il offre plus de finesse typographique que TTF.

Formats pour le web (WOFF et WOFF2)#

WOFF est un conteneur compressé autour de TTF ou OTF, conçu pour le web. La compression réduit significativement le poids du fichier à télécharger, avec des métadonnées de licence intégrées.

WOFF2 améliore la compression de WOFF d’environ 30%, grâce à l’algorithme Brotli. C’est le format recommandé pour le web aujourd’hui, supporté par tous les navigateurs modernes.

@font-face {
  font-family: 'MaPolice';
  src: url('mapolice.woff2') format('woff2'),
       url('mapolice.woff')  format('woff');
  font-weight: 400;
  font-style: normal;
}

Formats obsolètes et polices variables#

L’Embedded OpenType (.eot), format propriétaire développé par Microsoft pour Internet Explorer, est abandonné et remplacé par WOFF. Le SVG Font est également en abandon progressif au profit de WOFF2 : ni l’un ni l’autre ne doit plus être utilisé aujourd’hui.

Les polices variables sont une extension du format OpenType permettant à un seul fichier de couvrir l’intégralité d’une gamme de graisses, de largeurs et d’autres axes de variation. Un seul fichier remplace 6 à 12 fichiers classiques, avec de meilleures performances et des animations CSS fluides.

/* Graisse variable sur une plage continue */
font-weight: 100 900;

/* Variation dynamique avec font-variation-settings */
font-variation-settings: 'wght' 450, 'wdth' 85;

Tableau récapitulatif#

Références#

• Google Fonts : téléchargement direct ou intégration via CDN
• google-webfonts-helper : génère le code @font-face complet et fournit les fichiers WOFF2 et WOFF prêts à l’emploi
• Font Squirrel : téléchargement, conversion de formats et identification de police par image