Comprendre la typographie sur le Web

La typo­gra­phie est l’un des choix les plus déter­mi­nants dans la concep­tion d’un site, et tous les web­de­si­gners vous le diront : il est essen­tiel d’y consa­crer du temps. Cet article, Com­prendre la typo­gra­phie sur le Web, vous accom­pagne dans cette démarche.

Pourquoi la typographie compte sur le Web

La plu­part des pages web sont com­po­sées en grande par­tie de texte. Qu’il s’agisse d’un article de blog, d’une page de pré­sen­ta­tion, d’un site vitrine ou d’une bou­tique en ligne, la typo­gra­phie struc­ture l’information et condi­tionne la manière dont elle sera lue. Une typo­gra­phie bien pen­sée amé­liore immé­dia­te­ment la lisi­bi­li­té, la com­pré­hen­sion et le confort de navigation.

Sur un site web, la typo­gra­phie rem­plit trois rôles essentiels.

Amé­lio­rer la lec­ture :
Une bonne typo­gra­phie faci­lite la consul­ta­tion du conte­nu. Un texte aéré, bien contras­té et cor­rec­te­ment dimen­sion­né demande moins d’effort et rend l’expérience plus agréable.

Orga­ni­ser l’information :
La typo­gra­phie crée de la hié­rar­chie : titres, sous-titres, para­graphes… Elle guide le regard et aide le visi­teur à com­prendre la struc­ture de la page dès les pre­mières secondes.

Ren­for­cer l’identité visuelle :
Le choix des polices contri­bue à l’image d’un site. Une police peut être moderne, clas­sique, ins­ti­tu­tion­nelle ou expres­sive. Elle ren­force le mes­sage et donne un ton cohé­rent à l’ensemble du contenu.

En résu­mé, la typo­gra­phie est l’un des piliers de l’expérience uti­li­sa­teur. Bien la maî­tri­ser per­met de pro­po­ser des pages plus lisibles, plus cohé­rentes et plus professionnelles.

Les notions essentielles à connaître

Avant de choi­sir une police, il est inté­res­sant de com­prendre quelques notions simples à pro­pos de la typographie.

Serif et Sans serif

Il existe deux grandes familles très pré­sentes sur le Web.
Les polices Serif se carac­té­risent par la pré­sence d’empattements, ces petits pro­lon­ge­ments à l’ex­tré­mi­té des lettres. Elles donnent un style plus clas­sique et sont his­to­ri­que­ment uti­li­sées dans l’édition impri­mée.
Les polices Sans serif sont dépour­vues d’empattements. Leur appa­rence est plus moderne, plus épu­rée et par­ti­cu­liè­re­ment adap­tée à l’affichage sur écran. Com­prendre cette dis­tinc­tion aide à choi­sir une police cohé­rente avec l’ambiance recherchée.

Police, fonte et graisse

On confond sou­vent ces termes, pour­tant ils ne dési­gnent pas la même chose.

• La police est le nom de la famille (par exemple : Robo­to, Geor­gia, Inter).
• La fonte cor­res­pond à une variante de cette police : Robo­to Regu­lar, Robo­to Bold, Robo­to Ita­lic, etc.
• La graisse, enfin, exprime l’épaisseur du trait : 400 pour une fonte régu­lière, 700 pour une fonte en gras, et ain­si de suite.

Taille, interlignage et espacements

La taille du texte joue un rôle direct sur la lisi­bi­li­té et sur la struc­tu­ra­tion du conte­nu.
L’interlignage (ou line-height) cor­res­pond à l’espace entre les lignes : un inter­li­gnage légè­re­ment aug­men­té apporte du confort et évite l’effet « bloc com­pact ».
Les espa­ce­ments (avant/après les para­graphes, marges autour des titres) per­mettent d’organiser visuel­le­ment le conte­nu. Bien dosés, ils contri­buent à une meilleure ges­tion des blancs, un prin­cipe fon­da­men­tal en typo­gra­phie pour struc­tu­rer la page.

Typographie d’écran : ce qui change par rapport à l’impression

Lire sur un écran n’a rien à voir avec la lec­ture sur papier. Les sup­ports n’offrent pas les mêmes contraintes, et ces dif­fé­rences influencent direc­te­ment le choix des polices et la manière de les utiliser.

Une luminosité qui fatigue davantage

Un écran émet de la lumière, contrai­re­ment au papier qui la reflète.
Cette lumi­no­si­té, com­bi­née à la dis­tance de lec­ture par­fois courte, demande des polices plus claires, plus simples et plus contras­tées. Les carac­tères trop fins ou trop ser­rés deviennent rapi­de­ment dif­fi­ciles à lire.

Des résolutions d’affichage variables

Chaque écran n’affiche pas le texte de la même manière : taille, défi­ni­tion, qua­li­té d’affichage, zoom…
Une police peut sem­bler très nette sur un ordi­na­teur récent, mais moins lisible sur un appa­reil plus ancien ou un smart­phone. Les polices sans empat­te­ment (Sans serif) conservent en géné­ral une meilleure sta­bi­li­té dans ces contextes variés.

La hauteur d’x : un facteur clé

La hau­teur d’x (la hau­teur du « x » minus­cule) joue un rôle impor­tant à l’écran.
Une police avec une hau­teur d’x géné­reuse est en géné­ral plus lisible sur mobile ou dans des textes longs, car elle offre des formes plus ouvertes et un meilleur confort de lecture.

Illus­tra­tion ci-des­sous : Hau­teur d’x (traits rouges), ascen­dantes et des­cen­dantes (traits bleus), corps iden­tiques (traits noirs), com­pa­rai­son entre Hel­ve­ti­ca (gauche) et Gara­mond (droite)

Des habitudes de lecture différentes

Sur le Web, on lit rare­ment mot à mot. Le lec­teur scanne, sur­vole, cherche des repères visuels.
La typo­gra­phie doit donc aider à struc­tu­rer : titres visibles, para­graphes courts, espa­ce­ments régu­liers. Une police trop déco­ra­tive ou trop ser­rée com­plique cette lec­ture rapide.

Comment les polices sont chargées sur un site web

Sur un site web, une police cor­res­pond à un fichier (ou plu­sieurs fichiers) qui doit être décla­ré dans le thème ou le construc­teur. Lorsque l’internaute visite une page, son navi­ga­teur télé­charge ces fichiers ou les récu­père depuis son appa­reil si la police existe déjà. Selon la méthode uti­li­sée, ces fichiers pro­viennent du sys­tème de l’utilisateur, de votre ser­veur ou d’un ser­vice externe.

Il existe plu­sieurs façons de char­ger ces polices, cha­cune avec ses avan­tages et ses limites.

Polices système

Les polices sys­tème sont celles déjà pré­sentes sur l’appareil du visi­teur. Elles n’ont pas besoin d’être télé­char­gées, ce qui accé­lère l’affichage des pages. Leur prin­ci­pal incon­vé­nient est le choix limi­té, qui ne per­met pas tou­jours de reflé­ter l’identité visuelle souhaitée.

Polices hébergées sur votre site

Il est pos­sible d’héberger les fichiers de polices direc­te­ment dans votre site (dans un dos­sier dédié ou dans le thème). C’est un bon com­pro­mis : vous conser­vez la liber­té typo­gra­phique tout en maî­tri­sant le poids des fichiers et leurs per­for­mances, sans dépendre de ser­veurs externes.

Webfonts externes (comme Google Fonts)

Des ser­vices comme Google Fonts per­mettent d’intégrer faci­le­ment des polices en ajou­tant un simple lien dans l’en-tête du site. Cette méthode est pra­tique et rapide, mais implique une requête vers un ser­veur exté­rieur, ce qui peut ral­lon­ger légè­re­ment l’affichage. Ce char­ge­ment externe peut éga­le­ment sou­le­ver des ques­tions liées à la confi­den­tia­li­té des don­nées (RGPD). Pour évi­ter ce point, de nom­breux sites choi­sissent désor­mais d’héberger les fichiers de polices direc­te­ment sur leur propre serveur.

Les formats de fichiers : TTF, OTF, WOFF, WOFF2

Tous les for­mats de polices ne sont pas adap­tés à une uti­li­sa­tion web.

• TTF et OTF : for­mats his­to­riques uti­li­sés sur­tout en local ou pour l’impression, sou­vent plus lourds en ver­sion web ;
• WOFF : for­mat com­pres­sé conçu pour l’usage en ligne ;
• WOFF2 : for­mat encore plus opti­mi­sé, aujourd’hui le plus performant.

WOFF2 est aujourd’hui le for­mat à pri­vi­lé­gier pour ses per­for­mances. Dans la plu­part des cas, il est accom­pa­gné d’un fichier WOFF pour garan­tir une com­pa­ti­bi­li­té com­plète avec les navi­ga­teurs plus anciens.

Les polices variables : une technologie moderne et flexible

Les polices variables (ou variable fonts) repré­sentent une évo­lu­tion impor­tante dans la manière d’utiliser la typo­gra­phie sur le Web. Contrai­re­ment aux polices clas­siques, qui néces­sitent un fichier par variante (ita­lic, bold, semi-bold…), une police variable regroupe plu­sieurs styles dans un seul fichier.

Un seul fichier, plusieurs variations

Une police variable peut conte­nir dif­fé­rents axes de varia­tion : épais­seur, lar­geur, incli­nai­son…
Cela per­met de pas­ser faci­le­ment d’une graisse 300 à 700, par exemple, sans mul­ti­plier les fichiers.

Un gain de performance appréciable

Puisque plu­sieurs variantes sont regrou­pées dans un fichier unique, on réduit le nombre de fichiers à char­ger. Dans de nom­breux cas, cela amé­liore les per­for­mances et réduit le temps d’affichage.

Une adaptation plus naturelle au responsive

Les polices variables s’adaptent par­ti­cu­liè­re­ment bien au res­pon­sive. Il devient pos­sible d’ajuster pro­gres­si­ve­ment l’épaisseur ou la lar­geur d’une police en fonc­tion de la taille de l’écran, pour amé­lio­rer la lisi­bi­li­té et la cohé­rence visuelle.

Une adoption croissante

La plu­part des navi­ga­teurs modernes prennent en charge les polices variables, et de nom­breux thèmes ou construc­teurs les intègrent déjà. Elles sont désor­mais un choix per­ti­nent pour beau­coup de pro­jets web.

Testez par vous-même les capacités d’une police variable avec cet outil interactif :

À retenir

• Limi­ter le nombre de polices
  Deux polices suf­fisent lar­ge­ment pour la plu­part des sites. Uti­li­ser trop de styles crée une impres­sion de désordre et peut aus­si ralen­tir le char­ge­ment, chaque variante sup­plé­men­taire ajou­tant des fichiers à télécharger.

• Créer une hié­rar­chie claire
  Dif­fé­ren­cier titres, sous-titres et texte cou­rant aide le lec­teur à se repé­rer rapi­de­ment. C’est ce que l’on appelle la seg­men­ta­tion des conte­nus, un prin­cipe essen­tiel pour struc­tu­rer une page web.

• Choi­sir des tailles adap­tées
  Des carac­tères trop petits, sur­tout sur mobile, nuisent à la lisi­bi­li­té. Une taille confor­table pour le texte cou­rant amé­liore la lec­ture et réduit la fatigue visuelle.

• Aérer le texte
  Les espa­ce­ments entre lignes, para­graphes et blocs faci­litent la lec­ture et ren­forcent la lisi­bi­li­té du conte­nu. Un conte­nu trop ser­ré décou­rage, alors qu’un texte cor­rec­te­ment aéré rend la page plus agréable à parcourir.

• Prendre en compte l’accessibilité (dys­lexie, troubles de la lec­ture)
  Cer­taines polices comme Open­Dys­lexic ou Lexend sont conçues pour faci­li­ter la lec­ture des per­sonnes dys­lexiques. Leur effi­ca­ci­té dépend des lec­teurs, mais elles peuvent être utiles dans des contextes édu­ca­tifs ou spé­cia­li­sés. Sur la plu­part des sites, une police Sans serif simple, un inter­li­gnage suf­fi­sant et un bon contraste amé­liorent déjà la lisi­bi­li­té pour tous.

• Veiller au contraste
  Une bonne lisi­bi­li­té passe par un contraste suf­fi­sant entre le texte et l’arrière-plan. Les cou­leurs trop claires ou les textes posés sur une image com­pliquent inuti­le­ment la lecture.

• Uti­li­ser les polices manus­crites avec modé­ra­tion
  Les polices manus­crites sont à uti­li­ser avec pré­cau­tion dans les textes longs. Elles fonc­tionnent bien pour un titre ponc­tuel, une anno­ta­tion ou une mise en avant, mais deviennent rapi­de­ment dif­fi­ciles à lire lorsqu’elles sont uti­li­sées en bloc.

Conclusion

La typo­gra­phie joue un rôle bien plus impor­tant qu’il n’y paraît dans la qua­li­té d’un site web. Elle influence la lisi­bi­li­té, l’apparence géné­rale et la manière dont vos visi­teurs per­çoivent votre conte­nu. En com­pre­nant quelques notions simples et en appli­quant quelques bonnes pra­tiques, il devient beau­coup plus facile de créer des pages har­mo­nieuses et confor­tables à lire.

Pho­to de fond de l’i­mage mise en avant : mer­ci à Vir­gi­nia Marcuzzo