Typography rules the world

L’uti­li­sa­tion des typo­gra­phies dans le web est un sujet fonda­men­tal pour ne pas avoir de mauvaises surprises. On ne prend pas n’im­porte quelle typo, et on ne l’uti­lise pas n’im­porte comment ! Expli­ca­tions…

All you need is type !

Quand on parle police il est impor­tant de commen­cer par le début.

Où se four­nir et quoi choi­sir ?

De nombreuses banques de polices payantes et gratuites sont dispo­nibles sur inter­net (Dafont, Fontsquir­rel, Myfonts, 1001 fonts…) mais notre coeur va sans hési­ter à Google Fonts, véri­table bible de la typo­gra­phie web, qui offre l’avan­tage de n’avoir aucune mauvaise surprise en termes de compa­ti­bi­lité et d’af­fi­chage.

Deux formats existent lorsque vous télé­char­gez une police : .otf et .ttf

Les polices .otf (Open Type Font) vous donne­ront accès à plus large biblio­thèque de glyphes et diffé­rentes liga­tures pour vos carac­tères, tandis que les typos .ttf (True Type Font) seront plus simples en termes de contenu. Un format spécial de police a été créé pour l’usage web .woff et .woff2 (Web Open Font Format). Les fichiers étant compres­sés, ils sont plus légers et moins longs à télé­char­ger. Ce format est reconnu par la plupart des navi­ga­teurs (IE, Chrome, Fire­fox…). Il vous suffira d’uti­li­ser un conver­tis­seur pour chan­ger le format de celles ci !

Chacun son style

Certaines polices ne sont dotées que d’un style, la plupart du temps “Regu­lar”, ce qui peut être un peu limité pour couvrir l’en­semble des styles de texte d’un site et vous obli­gera proba­ble­ment à aller cher­cher plusieurs typo de complé­ment pour agré­men­ter les styles et la hiérar­chie de vos blocs textes.

Pour palier à ce défaut, nous vous conseillons de choi­sir des typo avec plusieurs styles : Extra light, Light, Regu­lar, Medium, Bold, Black, Extra Black.

En voilà une belle famille !

Varier les styles de vos typos sur des titres, chapôs, para­graphes offrira à l’uti­li­sa­teurs une lecture plus ryth­mée et leur permet­tra d’iden­ti­fier des zones de lectures plus claires : cita­tions, textes impor­tants etc.

You’re simply the best !

Une fois que vous aurez trouvé la typo de vos rêves, il faudra savoir l’uti­li­ser conve­na­ble­ment.

Inter­li­gnage, aligne­ments, ratio, contras­te… Vous êtes prêts ?

Entre les lignes

Pour qu’un texte soit lisible il est impor­tant de lais­ser de la place à chaque ligne pour bien respi­rer. Un système assez simple permet d’avoir un inter­li­gnage “parfait” ! Prenez la taille du corps que vous utili­sez (par exemple 16pt. ici) et multi­pliez le par 1, 4 à 1, 6 ( 1, 5 ici ) et vous obtien­drez un bloc texte avec une lecture beau­coup plus facile.

Préfé­rez un inter­li­gnage x1.4 pour les para­graphes courts et x1, 6 pour les plus longs. Le mode auto d’in­ter­li­gnage que proposent la plupart des logi­ciels de design et de trai­te­ment de texte est de x1, 2, à oublier donc (à moins que vous ne souhai­tiez sciem­ment faire du mal à vos utili­sa­teurs).

Le côté obscur

Justi­fier son texte est facile, il y a cepen­dant des erreurs à ne pas commettre. Le tout est de choi­sir de ferrer votre texte du bon côté en fonc­tion du rendu souhaité. Pour les textes de plus de 2 lignes, nous recom­man­dons de ferrer le texte à gauche pour opti­mi­ser la lecture ; un para­graphe justi­fié à droite pertur­bera le lecteur lors du passage d’une ligne à l’autre. Il est égale­ment possible de centrer les textes mais cette pratique est en géné­ral à réser­ver aux titres, chapôs et para­graphes de 2 lignes maxi­mum.

Le rythme dans la font

Pour dyna­mi­ser vos blocs texte, on vous en parlait au dessus, vous pouvez chan­ger le style (Regu­lar, Bold, …) mais il est aussi impor­tant de jouer sur le corps du texte. Vous pouvez simple­ment utili­ser Modu­lars­cale, un outils permet­tant de choi­sir auto­ma­tique­ment des ratios pour vos diffé­rentes tailles de police, en fonc­tion de votre direc­tion artis­tique. Cela permet de mettre en avant les éléments impor­tants et de hiérar­chi­ser les infor­ma­tions pour le lecteur. En parlant de taille on vous suggère de partir (en web) sur une typo d’un corps compris entre 14pt. et 20pt. pour vos para­graphes ( Pour nous, 16pt. reste le mieux). Ce genre de mani­pu­la­tion vous évitera toute erreur de lecture, voici les corps que nous utili­sons régu­liè­re­ment :

Vers l’in­ter­let­trage et au-delà !

L’in­ter­let­trage c’est ce qui va faire que votre titre passera du Grand Canyon au plus beau titre jamais lu. Auto­ma­tique­ment lorsque vous créez un bloc texte et tapez votre titre à l’in­té­rieur, les lettres se placent les unes derrière les autres en fonc­tion de l’es­pace dont elles ont besoin. Ce qui peut parfois créer de grands écarts entre elles.

Pour lutter contre l’ef­fet “gouffre” vous pouvez revoir l’in­ter­let­trage dans vos para­mètres et ainsi faire en sorte que votre lecteur n’ait pas à faire preuve d’ima­gi­na­tion pour combler les trous à l’in­té­rieur d’un mot !

L’ac­ces­si­bi­lité pour tous

Il faut savoir qu’en France 8% des hommes et 0, 45% des femmes sont affec­tés par une percep­tion des couleurs défi­cientes, c’est pourquoi il est impor­tant de penser son design en consé­quence. Pour cela il existe des outils tel que Snook Color contrast Checker ou Leave­rou qui permettent de véri­fier que la diffé­rence de contraste de vos couleurs est suffi­sante pour les diffé­rents types de dalto­nisme. Faites égale­ment en sorte d’avoir toujours suffi­sam­ment de contraste entre votre texte et le fond.

En ce qui concerne la concep­tion pour les utili­sa­teurs de lecteurs d’écrans il y a quelques règles typo­gra­phiques à suivre :

• Établis­sez une mise en page linéaire et logique
• Pensez à ajou­ter des descrip­tions aux images et vidéos
• Struc­tu­rez les conte­nus ( <h1>, <nav>, <label>, etc…)
• Rédi­gez des liens et titres descrip­tifs

Longueur de ligne

Enfin, faites atten­tion à la longueur de vos lignes quel que soit le style de bloc (para­graphe, H1, H2… ).

Pour opti­mi­ser le confort de lecture, chaque ligne d’un bloc texte doit conte­nir entre 40 et 80 carac­tères maxi­mum, au-dela de 80 carac­tères, dites adieu à la flui­dité de lecture de votre utili­sa­teur, il risque de se perdre, et donc de tout bonne­ment fermer l’on­glet !

Main­te­nant que vous êtes au top si vos textes ressemblent à ça…

… nous vous invi­tons à reprendre la lecture de cette page depuis le début.

Sinon vous pouvez consi­dé­rer que vous êtes armés pour offrir une UX et une UI irré­pro­chable pour le confort de vos utili­sa­teurs.