Oui aux fontes sérif sur le web !

Un vieux principe du web affirme que les fontes Serif ne sont pas adaptées aux pages web. Faux ! Leur utilisation judicieuse peut-être un véritable atout.

A l'origine

Les Serif (empâtements en bon français) correspondent aux éléments décoratifs présents sur les extrémités des tracés des lettres.

Certaines théories affirment que leur origine se trouve dans les techniques de sculpture utilisées par les romains. D’autres soutiennent qu’il s’agit avant tout d’effet de style ou de mode.

Quoi qu’il en soit, bien que d’autres types de fontes existent aujourd’hui (sans-serif, cursives, fantaisies), leur utilisation reste toujours très appropriée dans un grand nombre de situations, en particulier en imprimerie.

Les serifs nécessitent souvent une grande finesse dans leur tracé, ce qui les rend parfois incompatibles avec une utilisation sur écran car leur résolution n’est pas suffisante. Mais les technologies ont nettement progressé ces dernières années. Certaines contraintes applicables il y a 10 ans n’ont plus de raisons d’être. Il y a désormais du multiples bonnes raisons d’utiliser les fontes à Serif dans les pages web.

Quel intérêt ?

C’est avant tout une affaire de style et de dynamique. Le style véhicule une image et oriente la perception du lecteur. La dynamique concoure à structurer la mise en page et à guider l’œil.
S’agissant du style, les typographies à empâtement expriment le conservatisme, l’officiel, l’intellectuel, la tradition. On peut y trouver aussi une expression de l’élégance.
D’un autre côté, mal utilisées, elles peuvent facilement exprimer l’austérité ou renvoyer un manque de créativité, voir d’amateurisme (vous vous rappelez des pages des années 2000 en times new romain avec des liens hypertextes tous bleus ?)

Quand utiliser des fontes serif ?

Certains types de contenus se prêtent bien au style des fontes Serif, en particulier les sites éditoriaux ou de journalisme. Des sites tels que Le Monde, le New York Times, le Daily Telegraph utilisent les fontes à empâtement de façon majoritaire (d’autres journaux tels que le Figaro ou Der Spiegel ont fait le choix de privilégier le Sans-Serif).

Il est intéressant de noter que beaucoup d’entre eux n’utilisent pas le même style pour les titres que pour les corps de textes. Le Monde a même une logique inverse selon que l’on soit sur mobile ou sur Desktop : Serif pour le corps et Sans-Serif pour les titres sur mobile et inversement sur Desktop. Ce choix peut sembler étonnant mais est en fait très perspicace : les variations des types de fontes sur les pages permettent de proposer une structure de mise en page dynamique et vous éloigne de toute sensation d’austérité. L’inversion en fonction du mobile/tablette ou du desktop, permet d’apporter le meilleur confort sur chaque sorte de device. Nous allons le voir après, les nouveaux mobiles sont très à l’aise pour afficher des corps de texte en Serif. Le lecteur a la sensation de lire son journal.

Les contenus éditoriaux ne sont pas les seuls à pouvoir bénéficier avantageusement des fontes Serif. Il est en effet possible de les utiliser pour des titres ou des textes courts sur n’importe quel device. Leur emploi pour des textes de grande taille permet alors de dynamiser vos mises en page de façon impactante. Encore mieux si vous les combinez à d’autres types de fontes. Attention toutefois à ne jamais mélanger plusieurs familles de fontes à empâtement sur une même page.

Les différents devices

Le confort de lecture dépend de la résolution de l’écran avec lequel le texte est lu. Sur un écran Full HD classique, les empâtements des textes inférieurs à 12 pixels sont plus fins que les pixels et deviennent confus.

Notez qu’il existe plusieurs styles de Serif. La limite de lisibilité diffère selon les cas : Les serif « droits à congés » (ex : Georgia) ont une limite plus haute que les typographies à serif « rectangulaires » (ex : Rockwell). Cette dernière peut probablement être utilisée à partir de 12px alors que les 1ers à partir de 18px.

Il est intéressant de noter que sur un même device, les textes ne s’affichent par forcément de façon identique entre les navigateurs, ce qui est particulièrement visible sur les fontes Serif.

Rendu des textes dans les navigateurs.

Fontes cleartype
Attention aussi aux différences avec Photoshop. C'est une bonne nouvelle, l’affichage est toujours plus net dans le navigateur que dans Photoshop à cause du traitement du type ClearType : Dans les navigateurs, le lissage est fait en couleur pour tenir compte de la matrice des leds de votre écran. En gros on lisse en rouge à gauche des tracés de caractères et en bleu à droite, il en résulte un affichage légèrement plus fin.

Les mobiles et les écrans Retina

C’est là que la donne change.

Comparez le même paragraphe du New York Times affiché sur mobile et sur un écran desktop full-HD

Definition mobile vs desktop
La précision d’affichage est radicalement différente. Les mobiles modernes (HiDpi ou Rétina) affichent au moins 500 points par pouces, alors que les écrans Full HD arrivent à peine à 100 ! Le confort de lecture est similaire à celui du papier.

En résumé

Les fontes Serif sont utilisables pour les textes longs sur mobile uniquement, avec une graisse supérieure à 18px.
Pour les titres, les emphases et autres textes courts, les fontes Serif sont utilisables sur tous les devices, avec une graisse supérieure à 18px.
Les fontes Serif se prêtent plus favorablement à des sujets sérieux ou officiels
Les fontes Serif sont également utilisables pour apporter de l’élégance à une mise en page ou à une image de marque

lire les autres articles