10 Pro Tips Typographiques en UI Design

Les meilleures pratiques et astuces pour gérer les problèmes de typo­gra­phie en UI Design.

En premier lieu le terme « typo­gra­phie » implique bien plus que le simple choix d’une police. Car lorsqu’elle est utili­sée effi­ca­ce­ment, elle peut consi­dé­ra­ble­ment amélio­rer l’uti­li­sa­bi­lité (ou usabi­lité), la lisi­bi­lité, l’ac­ces­si­bi­lité et la hiérar­chie de l’in­for­ma­tion au sein d’une inter­face. Ici, nous allons vous parta­ger quelques astuces et prin­cipes pour utili­ser les typo­gra­phies en respec­tant les bonnes pratiques lors de la concep­tion d’une inter­face utili­sa­teur.

1. La termi­no­lo­gie en typo­gra­phie

Tout d’abord il est impor­tant de bien comprendre les termes spéci­fiques utili­sés en typo­gra­phie qui consti­tuent la base de leurs utili­sa­tions. Consi­dé­rez les termes spéci­fiques kerning, leading ou encore weight comme des curseurs que nous devons régler pour créer des inter­faces plus lisibles et plus esthé­tiques.

1. Le letter-spacing (L’in­ter­let­trage). L’in­ter­let­trage, ou l’es­pa­ce­ment entre les lettres, fait réfé­rence à l’aug­men­ta­tion ou à la dimi­nu­tion de l’es­pa­ce­ment hori­zon­tal entre les carac­tères de la police.
2. La Base­line (ligne de lettre). Il s’agit de la ligne invi­sible sur laquelle repose une ligne de texte. Tout simple­ment.
3. Le Line-height ( l’in­ter­li­gnage). L’in­ter­li­gnage est l’es­pa­ce­ment verti­cal entre deux base­line ou lignes de texte. Aupa­ra­vant appelé Leading, on lui préfère aujourd’­hui le terme Line-height.
4. La Weight (Graisse). Il s’agit de l’épais­seur rela­tive du trait d’une police. Elle est souvent appe­lée du plus fin au plus épais : light, regu­lar, bold et black. Mais nous pouvons trou­ver encore plus de variantes dans une même famille.
5. Le Serif / Sans Serif. Vous pren­drez votre police avec ou sans empat­te­ment ? L’em­pat­te­ment est une petite ligne ou un trait régu­liè­re­ment atta­ché à la fin d’une lettre ou d’un symbole dans une police ou une famille de polices parti­cu­lière. Une police qui n’in­clut pas d’em­pat­te­ments est une police sans empat­te­ment (sans = sans – CQFD ? ).

2. La hiérar­chie en Typo­gra­phie

Il n’y a pas beau­coup de sites ou d’ap­pli­ca­tions sans texte. La grande majo­rité des concep­tions d’in­ter­faces utili­sa­teurs sont compo­sées de quelques éléments stan­dard – texte, blocs / conte­neurs, boutons (sans doute composé lui-même d’un rectangle + texte) et des icônes. C’est ce que nous faisons avec ces éléments qui peuvent faire ou défaire une inter­face.

La hiérar­chie nous aide à amélio­rer la scan­na­bi­lité (soit la possi­bi­lité qu’a l’uti­li­sa­teur de lire rapi­de­ment les conte­nus textes d’une page) et la lisi­bi­lité d’une inter­face en permet­tant aux utili­sa­teurs de trou­ver plus rapi­de­ment les infor­ma­tions impor­tantes.

Pour cela, nous devons « mettre en valeur » l’in­for­ma­tion impor­tante (titre, sous-titre, cita­tion, etc), car c’est ce vers quoi les utili­sa­teurs seront atti­rés. Pour les infor­ma­tions de moindre impor­tance, un texte plus petit et plus léger est à préfé­rer.

3. La hauteur et longueur de lignes opti­males

L’es­pa­ce­ment des lignes remonte à l’époque de la compo­si­tion manuelle sur les presses à impri­mer. Petite pensée ici pour Guten­berg. Son nom tech­nique, Leading, fait réfé­rence aux fines bandes en plomb qui sépa­raient les lignes de texte.

Aujourd’­hui, la hauteur et la largeur des lignes sont essen­tielles pour garan­tir que nos blocs texte seront faci­le­ment lisibles par l’uti­li­sa­teur sur les diffé­rentes tailles de devices.

Voici quelques tips utiles pour mieux appré­hen­der la hauteur de ligne :

• Tester votre typo entre 130% et 180% pour une lisi­bi­lité et une acces­si­bi­lité opti­males. L’objec­tif est de trou­ver ici un ratio idéal, trop d’es­pa­ce­ment, et il est facile de se perdre ; trop peu, et cela sera indi­geste à lire,
• Véri­fiez toujours l’in­ter­li­gnage lors du chan­ge­ment de police ou même de taille. Diffé­rentes polices ont des hauteurs maxi­males diffé­rentes, alors véri­fiez toujours l’in­ter­li­gnage pour conser­ver la meilleure lisi­bi­lité.
• Limi­tez la longueur de la ligne à 70–80 carac­tères. Les longues lignes de texte peuvent être inti­mi­dantes et dérou­tantes à suivre.
• Les petites polices doivent avoir plus d’es­pa­ce­ment car les polices plus petites sont plus diffi­ciles à lire – CQFD- donc aidez votre utili­sa­teur avec un espace supplé­men­taire qui lui faci­li­tera l’ana­lyse.

4. Prio­ri­ser la lisi­bi­li­té

Pour vous assu­rer que votre typo­gra­phie est faci­le­ment lisible et surtout acces­sible aux personnes avec un handi­cap comme le dalto­nisme, les troubles de la vue, les troubles de l’au­di­tion, etc., vous devez suivre en premier lieu les direc­tives d’ac­ces­si­bi­lité du contenu Web (WCAG).

Voici quelques normes qui opti­misent votre inter­face utili­sa­teur pour la lisi­bi­lité, mais pour en savoir plus, allez jeter un oeil sur acces­sible.org il y a toutes les bonnes pratiques de détaillées :

• La taille du texte mini­mum. La première règle de base reste que la taille du texte doit être de 16px au mini­mum. Ceci bien évidem­ment variable en fonc­tion du device sur lequel s’af­fiche l’in­ter­face. S’il s’agit d’une TV, par exemple, le texte mini­mum devra être encore plus grand.
• Le rapport de contraste. Ce dernier se doit d’être d’au mini­mum de 4, 5: 1 entre l’en­semble du texte et l’ar­rière-plan. Le plug-in Stark vous permet­tra de véri­fier faci­le­ment cette norme et il est dispo­nible pour Adobe XD, Sketch ou encore Figma.
• La couleur n’est pas le Reine de l’info. Ne vous fiez pas unique­ment à la couleur pour trans­mettre des infor­ma­tions. Par exemple, un état erreur ne doit pas unique­ment être affi­ché avec un contour rouge, utili­sez égale­ment une icône d’aver­tis­se­ment et un texte descrip­tif pour aver­tir qu’un problème est survenu. Mieux vaut préve­nir que guérir.
• Le redi­men­sion­ne­ment du texte. Le texte doit pouvoir être redi­men­sionné jusqu’à 200% sans que cela empêche la lecture du contenu ou que cela inter­dise d’uti­li­ser des fonc­tions primaires.
• Texte en image ?. Devons-nous réel­le­ment rappe­ler cette règle de base ? Et bien oui, car nous le voyons encore trop souvent… Donc la règle sera N’uti­li­sez pas de texte en image ! Jamais ! Bon sauf si c’est votre logo ?

5. Limi­tez le nombre de poli­ces

Nous ne le répé­te­rons jamais assez mais mélan­ger trop de polices de carac­tères diffé­rentes peut donner l’im­pres­sion que votre appli­ca­tion n’est pas homo­gène, qu’elle est bâclée, voire qu’elle présente un dysfonc­tion­ne­ment.

Au lieu d’in­tro­duire de nouvelles polices dans l’in­ter­face, utili­sez les familles de polices. Les polices de la même famille sont conçues pour fonc­tion­ner ensemble, elles sont donc flexibles et cohé­rentes. Un point à ne pas négli­ger.

Si vous êtes en manque d’ins­pi­ra­tion, vous pouvez aller sur Font Pair ou Canva pour trou­ver des idées ou vali­der des combi­nai­sons.

6. Défi­nir les règles d’échelle de type

Si vous êtes réti­cent à créer des règles typo­gra­phiques à partir de rien, essayez Mate­rial type scale gene­ra­tor qui vous permet de géné­rer des tailles de police pour les para­graphes, les en-têtes, les boutons, etc.

Comment faire pour mettre en place ces règles pour votre projet ? Vous pouvez suivre ce process :

1. Sélec­tion­nez une police avec laquelle vous souhai­tez travailler. Les 2 sites qui permettent de récu­pé­rer des polices de qualité sont Google Font ou Adobe Font. En plus vous rendrez heureux votre déve­lop­peur. Cepen­dant rien ne vous empêche de sélec­tion­ner une police custom, l’offre de typo est vaste.
2. Défi­nis­sez une taille de police de base. Il faut commen­cer par choi­sir la taille de la police qui sera la plus couram­ment utili­sée (souvent le para­graphe) en taille 16px, puis vous déter­mi­nez une hauteur de ligne appro­priée en fonc­tion de la police choi­sie, en privi­lé­giant toujours la lisi­bi­lité.
3. L’in­ter­li­gnage. Comme nous l’avons vu précé­dem­ment, testez un gros­sis­se­ment entre 130% et 180% pour obte­nir une lisi­bi­lité opti­male. Ce ratio n’est pas toujours précis, mais c’est un bon point de départ, puis effec­tuez les ajus­te­ments néces­saires.
4. Défi­nis­sez une échelle. Une échelle améliore la cohé­rence, rythme et hiérar­chie le contenu. Pour défi­nir l’échelle de typo pour les h1, h2, h3, corps, légendes, boutons, etc, nous avons besoin d’une valeur d’échelle à multi­plier par notre taille de police de base. Les échelles courantes de type sont x1.250, x1.414, x1.5 ou encore x1.618. Encore une fois, c’est à vous de trou­ver une échelle qui fonc­tionne pour votre police et votre inter­face. La magie de la créa­tion opère !
5. Tester les sur les diffé­rents devices. C’est impor­tant pour avoir une vue globale du compor­te­ment de réel­le­ment tester ces règles diffé­rentes échelles sur plusieurs tailles d’ap­pa­reils pour en déci­der la bonne valeur.

Faites aussi un tour sur Arche­type, un outil vrai­ment bien pensé qui vous permet­tra de vali­der vos choix et vous resti­tuera en live le rendu.

7. Utili­sez des mots et des phrases compré­hen­sibles !

Surtout (et c’est vrai­ment le mot d’ordre) ayez de l’em­pa­thie pour vos utili­sa­teurs ! Les prin­cipes et méthodes que nous énonçons ici peuvent gran­de­ment parti­ci­per à amélio­rer la lisi­bi­lité et l’es­thé­tique de votre inter­face. Alors ne gâchez pas tout en la rendant incom­pré­hen­sible.

Pour éviter cet écueil, vous pouvez suivre ces quelques règles ou conseils pour être certain de propo­ser une inter­face simple et compré­hen­sible :

• Évitez le jargon. Sauf si vous conce­vez une appli­ca­tion desti­née à des experts ou profes­sion­nels, évitez vrai­ment les termes tech­niques ou le jargon pro. Par exemple, les fameuses expres­sions « mise en mémoire tampon » ou « confi­gu­ra­tion » sont vrai­ment à pros­crire.
• Écri­vez au présent. C’est tout bête mais au lieu de dire: « le message a été envoyé », dites simple­ment « Message envoyé ». Plus clair et précis.
• Soyez bref et posi­tif. Il y a proba­ble­ment des coquilles qui peuvent faci­le­ment être suppri­mées avec un audit rapide de votre appli­ca­tion – en passant nous pouvons vous aider pour cela ? – mais encore une fois, il est impor­tant d’être simple. Par exemple au lieu de dire: « Seuls les membres Premium ont accès à cette fonc­tion­na­lité », dites plutôt « Rejoi­gnez Premium pour accé­der à ces fonc­tion­na­li­tés ». Cela veut dire la même chose mais cela est plus posi­tif et plus concis.
• Commen­cez par l’objec­tif. Lorsqu’une phrase décrit un objec­tif et l’ac­tion néces­saire permet­tant de l’at­teindre, alors commen­cez la phrase par l’objec­tif. Par exemple au lieu de dire: « Faites glis­ser une photo vers la corbeille pour la suppri­mer de cet album », dites: « Pour suppri­mer une photo de cet album, faites-la glis­ser vers la corbeille. »
• Soyez cohé­rent dans la formu­la­tion. Lorsque vous vous adres­sez à l’uti­li­sa­teur, assu­rez-vous de rester cohé­rent, selon le ton qui a été choisi (plus ou moins soutenu) Ainsi, au lieu de mettre « Modi­fier vos coor­don­nées dans mon compte », dites « Modi­fiez vos coor­don­nées dans votre compte ».

8. Mettez en avant les infor­ma­tions impor­tan­tes

Certains conte­nus seront néces­sai­re­ment plus impor­tants que d’autres sur une même page. Il est donc essen­tiel de souli­gner leur impor­tance en s’ap­puyant sur la graisse, la taille, la couleur ou tout ce que nous avons vu précé­dem­ment pour mettre le message prin­ci­pal en évidence et le distin­guer des autres éléments.

La couleur et la graisse permettent de souli­gner ou de mini­mi­ser la typo­gra­phie : en utili­sant un texte plus light vous atti­re­rez moins l’at­ten­tion qu’à l’in­verse avec une police bold ou black.

Et dernier effet de bord, cela améliore la lecture rapide d’une page et permet aux utili­sa­teurs d’ef­fec­tuer les actions souhai­tées sans trop solli­ci­ter leur atten­tion.

9. Pensez à la prise en charge linguis­tique

Dans un contexte d’in­ter­na­tio­na­li­sa­tion (site multi­lingues) de votre inter­face, un des points impor­tants à ne surtout pas oublier reste l’adap­ta­tion de l’es­pace a la longueur des mots. C’est une contrainte qui peut radi­ca­le­ment chan­ger nos mises en page qui peuvent sembler parfaites sur le papier (pixel perfect ? ) et qui se révèle catas­tro­phique dans le version Alle­mande du site ? – si elle n’est pas pensée en amont.

La première chose à garder à l’es­prit est la longueur des mots – elle peut varier selon les langues, même celles qui utilisent des glyphes simi­laires, comme l’an­glais et l’al­le­mand. « New », par exemple, est un mot de 3 lettres en anglais et s’in­tègre parfai­te­ment dans un espace réduit, cepen­dant, en français, nous aurions besoin de suffi­sam­ment d’es­pace pour « Nouveau » et ses 7 carac­tères.

Pour certaines langues comme l’arabe et l’hé­breu, il est impor­tant de tenir compte du sens de lecture, car elles sont affi­chées avec des carac­tères permet­tant une lecture de la droite vers la gauche. D’ailleurs ces polices peuvent appa­raître plus petites que les polices latines à la même taille de police, ce qui néces­site des ajus­te­ments de l’in­ter­li­gnage et de l’ali­gne­ment afin que la typo­gra­phie fonc­tionne correc­te­ment.

10. En cas de doute, utili­sez les polices système

Les choix typo­gra­phiques peuvent être diffi­ciles à faire et parfois cela n’en vaut tout simple­ment pas la peine. Notam­ment dans le cadre d’une appli­ca­tion mobile. La bonne nouvelle est que iOS et Android ont des polices systèmes natives qui prennent en charge toute une gamme de graisses, de tailles, de styles et de langues, afin de nous permettre de conce­voir des expé­riences de lecture confor­table et aussi design que possible. Cela à aussi l’avan­tage d’ap­puyer sur le biais cogni­tif de fami­lia­rité et de ne pas « perdre » l’uti­li­sa­teur avec un rendu d’in­ter­face trop éloi­gné de ces habi­tudes.

Les Font sur iOS sont San Fran­cisco (SF) et New York (NY). Sur Android, la Font prin­ci­pale est Roboto, et on trouve égale­ment la Noto en police par défaut pour toutes les langues non prises en charge avec la Roboto.

L’usage des polices systèmes permet d’ap­pliquer plus faci­le­ment les widgets d’ac­ces­si­bi­li­tés qui réduisent ou gros­sissent la taille, ce qui au final offre une flexi­bi­lité supplé­men­taire en permet­tant aux lecteurs de choi­sir leur taille de texte préfé­rée.

En bonus, parce que vous êtes arrivé jusqu’ici, voici une petite liste d’ou­tils et ressources sur ce vaste sujet qu’est la typo­gra­phie :

• Squir­rel Font : Polices gratuites de haute qualité
• Google Font : Rendre le Web plus beau, plus rapide et plus ouvert grâce à une excel­lente typo­gra­phie
• Adobe Font : Comprend les prin­ci­pales police de carac­tères au monde et des milliers de belles polices
• TypeWolf : Aide les concep­teurs à choi­sir la combi­nai­son de polices parfaite pour leur prochain projet

La ques­tion vous inté­resse ? Échan­geons ensemble sur le sujet ! N’hé­­si­­tez pas à nous contac­­ter.