La plupart des corrections issues d'une revue de design concernent la typographie. Pas la mise en page, pas les couleurs, mais le texte. Le graisse est incorrecte, le titre devrait être en majuscules, l'espacement des caractères ne va pas.
Quatre éléments expliquent la quasi-totalité de ces retours : l'anatomie des lettres, la différence entre une police et une fonte, la distinction entre serif et sans-serif, et l'espacement qui transforme des caractères en paragraphes, et des paragraphes en pages. Maîtrisez ces points et la plupart des remarques lors d'une revue front-end n'auront même plus lieu d'être.
En résumé :
Le fossé est une question de perception, pas d'effort. Le designer attend une chose, le développeur en voit une autre, et aucun des deux n'est de mauvaise foi : le designer remarque simplement des détails pour lesquels le développeur n'a jamais été formé. Chaque correction représente un travail supplémentaire : le temps de l'identifier, le temps de la modifier, et une mise en ligne qui stagne le temps de trouver un accord. Les fondamentaux ci-dessous s'apprennent une fois pour être réutilisés sur chaque projet, ce qui en fait l'investissement le plus rentable lors d'un passage de relais entre design et développement. C'est pourquoi j'ai décidé de créer un atelier sur la typographie.
Avant toute explication, il est utile de comprendre comment fonctionne une lettre isolée, quelle est sa relation avec les lettres qui l'entourent, et comment cette relation se déploie dans le mot, la phrase et le paragraphe.
La typographie est l'art de disposer les caractères pour faciliter la lecture : choisir la police, définir sa taille et son épaisseur, et contrôler l'espacement entre les caractères, les lignes et les blocs de texte. Elle englobe la forme des lettres ainsi que celle de la page qui les accueille. Tout ce qui est abordé dans cet article relève de l'un ou de l'autre.
Des notions de base, utiles à connaître, qui facilitent grandement les échanges sur la typographie :
Une forme de lettre partage des caractéristiques communes avec ses semblables au sein d'une même police. Ces caractéristiques reposent sur les dimensions et les proportions de traits anatomiques fondamentaux, que l'on retrouve dans tous les caractères occidentaux.
J'ai pensé qu'il serait intéressant de les énumérer. Non pas pour que vous les mémorisiez, car ces noms ne changeront pas grand-chose au quotidien du graphiste ou du développeur.
Je les liste pour que vous sachiez quoi observer lorsque vous comparez deux polices, et pour que la diversité des usages de chaque fonte devienne plus compréhensible à travers son anatomie.
| Élément | Définition |
|---|---|
| Ligne de base | La ligne invisible sur laquelle reposent les lettres |
| Hauteur d'x | La hauteur d'un x minuscule, c'est-à-dire la hauteur du corps principal des lettres minuscules |
| Hauteur de capitale | La hauteur des lettres majuscules, mesurée à partir de la ligne de base |
| Hampe (Jambage supérieur) | La partie d'une lettre minuscule qui dépasse au-dessus de la hauteur d'x, comme dans b, d, h, k et l |
| Jambage inférieur | La partie d'une lettre minuscule qui descend en dessous de la ligne de base, comme dans g, j, p, q et y |
| Fût | Le trait principal vertical ou diagonal d'une lettre |
| Boucle (Ventre) | Le trait courbe qui enferme un espace, comme dans b, d, o et p |
| Contrepoinçon | L'espace totalement ou partiellement fermé à l'intérieur d'une lettre, comme le trou dans un o ou un e |
| Épaule | Le trait courbe qui s'embranche sur un fût, comme dans h, m et n |
| Empattement (Serif) | Le petit trait qui termine l'extrémité d'un trait principal |
| Terminaison | L'extrémité d'un trait sans empattement |
| Ouverture | La taille de l'ouverture entre un trait et le contrepoinçon, comme dans c, e et s |
| Ligature | Deux caractères ou plus fusionnés en un seul glyphe, comme dans fi et fl |
Deux d'entre eux font l'essentiel du travail en pratique. Une hauteur d'x importante donne à une police une apparence plus grande à taille égale et une meilleure lisibilité lorsqu'elle est réduite. Une ouverture large empêche les lettres comme le c, le e et le s de se refermer et d'être confondues les unes avec les autres.
Les polices sont classées selon ces caractéristiques structurelles, des définitions interprétatives ou simplement selon leur place dans l'histoire. Cette classification n'est utile que si elle vous indique à quelle famille appartient la police ; voici donc une approche décisionnelle plutôt qu'un simple glossaire :
| Classification | Ce qui la caractérise | Utilisez-la quand | Évitez-la quand |
|---|---|---|---|
| Serif | Comporte des empattements. Généralement subdivisée par époque en garalde (old style), réale (transitional), didone (modern) et mécane (slab serif), qui diffèrent principalement par le contraste des pleins et déliés et la forme des empattements | Vous recherchez une lecture prolongée et un ton posé et autoritaire : articles de fond, contenu éditorial, introductions de documentation. Les garaldes et les réales sont des choix sûrs | La taille descend en dessous d'environ 14px, ou la police est une moderne à fort contraste comme Didot. Les déliés très fins disparaissent sur les écrans à faible densité et le texte commence à scintiller |
| Sans-serif | Ne comporte pas d'empattements. Généralement subdivisée en grotesques, néo-grotesques, géométriques et humanistes | Presque tout ce qui concerne les interfaces : navigation, boutons, étiquettes, formulaires, tableaux de bord, petites tailles et tout texte devant supporter un redimensionnement par l'utilisateur | Vous avez besoin de chaleur ou d'une personnalité éditoriale et vous avez choisi une néo-grotesque neutre. Le texte sera perçu comme correct mais sans caractère. Les polices sans-serif humanistes sont la solution |
| Script | Inspirée de l'écriture manuscrite ou de la calligraphie, avec des lettres qui se lient souvent entre elles | Un élément décoratif ponctuel : un logotype, une citation en exergue, une signature. Une seule ligne, en grand, et jamais plus | Tout ce qu'un utilisateur doit lire pour accomplir une tâche, et tout texte composé en majuscules — les formes de lettres liantes se désagrègent lorsqu'elles sont passées en capitales |
| Display | Conçue pour les grandes tailles et les courts fragments de texte, où la personnalité importe plus que la lisibilité prolongée | Titres principaux (hero) et pages de campagne, où l'objectif est le ton plutôt que le débit de lecture | Elle doit être utilisée en taille de corps de texte ou inférieure. Les polices Display sont dessinées pour une plage de tailles spécifique et ne fonctionnent plus en dehors de celle-ci |
| Blackletter | Le style dense et anguleux de l'imprimerie européenne des débuts (gothique) | Vous avez une raison historique ou de genre bien précise, et le texte est court | Pratiquement partout ailleurs. La lisibilité est faible pour les lecteurs modernes et les associations culturelles sont plus lourdes que ce que la plupart des marques souhaitent |
| Monospaced | Chaque caractère occupe la même largeur horizontale (chasse fixe) | Code, sorties de terminal, identifiants, diffs, et tout ce où l'alignement en colonnes a du sens. Également les tableaux numériques, où les chiffres tabulaires empêchent les colonnes de « danser » | Elle est utilisée comme texte de corps par choix stylistique. Les largeurs uniformes qui rendent le code facile à balayer du regard ralentissent la lecture de la prose |
Les deux catégories qui comptent le plus lorsque vous écrivez du code sont les célèbres serif et sans-serif. Elles sont importantes car leur caractéristique déterminante est objective et clairement visible, une fois que l'on sait ce que l'on regarde.
La police serif, quant à elle, est souvent considérée comme le meilleur choix pour les longs textes, comme ceux que l'on trouve dans les livres et les journaux. Est-ce vrai ? Pas systématiquement. Une grande partie de ce qui rend cette famille lisible peut se retourner contre elle, selon les caractéristiques de chaque police. Je suis convaincu qu'un Didot, bien qu'il soit serif, sera moins lisible qu'un Lato sur un long bloc de texte.
Le Didot présente un contraste élevé entre ses lignes horizontales et verticales, ce qui crée du bruit et des « irrégularités » dans le flux de lecture. Le Lato conserve une proportion plus équilibrée entre les différentes lignes de la lettre, ce qui en fait la meilleure option des deux. Ce n'est pas une comparaison parfaite, mais le principe reste valable. Jugez la police individuellement, pas la famille à laquelle elle appartient.
Ce qu'il faut comprendre à propos de ces deux styles, si vous voulez savoir lequel utiliser et où, c'est la fonction réelle des empattements. C'est plus facile à saisir une fois que l'on connaît leur origine, ce qui fait l'objet de la section suivante.
Bien avant tout cela. Avant même que l'humanité n'envisage d'imprimer de petits caractères en métal sur du papier pour produire des livres plus rapidement. Avant même que nous n'ayons imaginé le concept de livre, de papier ou de texte, nous utilisions déjà des visuels pour communiquer entre nous.
Des milliers d'années d'évolution ont rendu nécessaire une communication visuelle plus complexe, d'où l'apparition des alphabets. Mais les alphabets ne sont pas nés de rien. Ils sont le fruit de leurs propres mutations et adaptations. Comme on le raconte souvent, l'histoire de la lettre « A » est l'exemple le plus parlant de la manière dont la plupart des lettres ont évolué jusqu'à leur forme actuelle.
Les civilisations se sont succédé. Les sens et les sons se sont établis, certains ont muté, d'autres non. La tête de bœuf a été progressivement simplifiée, pivotée et géométriquement perfectionnée par les Romains pour être gravée sur des monuments, écrite et embellie par les moines, déformée à la main pour une écriture plus rapide et plus fluide, pour finalement être adoptée par les typographes.
En résumé : l'empattement est né du besoin d'écrire rapidement et de lier les lettres entre elles. Plus tard, lorsque la lecture a cessé d'être l'apanage des scribes et de la monarchie, le confort de lecture est devenu une exigence, et l'empattement a été utilisé à cette fin. C'est là un point essentiel à retenir. L'empattement était un outil de lisibilité avant d'être un choix esthétique ; ainsi, choisir entre une police avec ou sans empattement est une décision qui concerne la manière dont le texte sera lu, et non simplement son apparence.
Puis vint la typographie.
À mesure que les gens sont devenus plus conscients de la lisibilité d'une police, son utilisation et sa disposition sur la page ont commencé à recevoir la même attention et le même soin.
Un élément aussi fondamental que l'interlignage, qui dépend directement de la police et de sa taille, influence l'ensemble de la page. Les systèmes de grille sont apparus pour consolider cela en règles, afin que tout designer puisse créer du texte lisible et des pages équilibrées sans repartir de zéro.
L'interlignage, soit dit en passant, correspond à line-height en CSS : la distance verticale entre deux lignes de texte. Cela peut faire ou défaire n'importe quelle zone de texte, car si vous le réglez trop serré ou trop lâche, le lecteur commence à sauter des lignes ou à lire la même deux fois. Tout le monde est passé par là. Ce n'était jamais de votre faute.
Il existe une plage optimale, généralement située entre 120 % et 145 % de la taille du texte — le chiffre que Matthew Butterick donne dans Practical Typography, où il recommande également de l'exprimer en CSS sous forme de valeur sans unité, ainsi 130 % devient 1.3. Si vous devez plutôt le déterminer à l'œil, voici l'astuce :
Tracez une ligne imaginaire droite au milieu des lignes de texte, sans toucher aux jambages inférieurs ou supérieurs. Si elle passe sans encombre, c'est parfait.
Faites également attention à la longueur des lignes. Les modules de grille sont dimensionnés à partir de la hauteur de ligne et finissent généralement par être assez petits par rapport à la taille de la police. Ce n'est pas un hasard. Les petits modules offrent au designer une marge de manœuvre lors de l'organisation d'une page, permettant des zones de texte plus grandes ou plus petites tout en conservant une distance proportionnelle et harmonieuse entre les éléments.
En pratique, des lignes plus courtes sont également plus faciles à lire.
Il existe une bonne mesure pour la longueur de ligne, bien que les sources divergent plutôt qu'elles ne s'accordent. Le Baymard Institute situe l'optimum entre 50 et 60 caractères par ligne, espaces compris, en suivant les recommandations d'Emil Ruder, tout en notant que d'autres sources acceptent jusqu'à 75. La page de Butterick sur la longueur de ligne préconise une plage plus large, de 45 à 90. En tenant compte du recoupement, la fourchette idéale se situe entre 50 et 75 caractères ; au-delà de 80, cela devient problématique — c'est d'ailleurs là que les WCAG fixent leur propre limite. Il y a plusieurs bonnes raisons à cela.
Des lignes trop courtes forcent le lecteur à rompre constamment son rythme pour revenir à la marge gauche tous les quelques mots. Les mots importants en fin de ligne finissent par être ignorés dans ce va-et-vient incessant, ce qui est aussi fatigant à lire qu'il y paraît.
Des lignes trop longues sont difficiles à suivre, car il est impossible de distinguer la fin de la ligne et l'on reste en tension constante pour passer à la suivante. De plus, lorsque le lecteur change de ligne, il risque davantage de se tromper, car la marge gauche est si éloignée qu'il devient difficile de repérer où la précédente a commencé.
En pratique, l'attention est maximale au début d'une ligne et diminue vers la fin ; il faut donc trouver un équilibre très précis. D'où la règle empirique de 50 à 75 caractères.
L'interlignage et la longueur de ligne définissent un bloc de texte. La hiérarchie définit la manière dont ces blocs interagissent, et c'est souvent l'aspect qui est transmis au développeur sous forme d'instruction vague.
Une échelle typographique est un ensemble fixe de tailles autorisées sur une page, chacune constituant un palier délibéré par rapport à la précédente. Choisissez d'abord la taille du corps de texte, car c'est là que le lecteur passe son temps, puis dérivez-en les titres au lieu de les choisir à l'œil. Peu de paliers, clairement distincts. C'est ce qui permet à un titre d'être perçu comme tel.
La taille n'est pas le seul outil, et elle est rarement le meilleur à elle seule. L'épaisseur, la casse, la couleur et l'espace au-dessus et en dessous d'un titre permettent de distinguer les niveaux, et l'espace est généralement le plus économique de ces quatre éléments. Si votre hiérarchie ne repose que sur la différence de taille entre les niveaux, elle s'effondrera sur un écran étroit, où chaque niveau doit être réduit simultanément.
Lisibilité et accessibilité sont deux facettes d'un même sujet. Chaque choix mentionné précédemment a des conséquences sur l'accessibilité : un corps de texte trop petit, un interlignage trop serré, une longueur de ligne trop importante. Tous ces éléments pénalisent certains lecteurs bien plus que d'autres.
Trois habitudes permettent de couvrir l'essentiel. Maintenez un contraste suffisant entre le texte et son arrière-plan, et ne laissez jamais une couleur de marque dicter ce choix seule — les WCAG 2.2 fixent un seuil minimal de 4,5:1 pour le corps de texte et de 3:1 pour les grands textes. Ne laissez pas l'épaisseur ou la couleur être le seul indicateur de distinction, car cela ne sera pas perceptible par tous les lecteurs. Enfin, laissez le texte s'adapter aux réglages de l'utilisateur plutôt que de le figer ; les navigateurs et les systèmes d'exploitation permettent aux utilisateurs de choisir une taille plus grande pour une bonne raison, et Exigence de redimensionnement des WCAG prévoit que votre mise en page doit rester fonctionnelle jusqu'à 200 %.
Cela couvre l'essentiel en matière de lisibilité. Si vous souhaitez toutefois acquérir des bases solides sur l'expression typographique au sens large, le documentaire de Gary Hustwit sorti en 2007, Helvetica , est une référence incontournable.
Il explore la réflexion derrière le nouveau design apparu dans les années cinquante et la manière dont ce travail a fait émerger une conscience ancrée dans la responsabilité sociale, héritage de la Seconde Guerre mondiale. Vous y découvrirez également des créations fascinantes de cette époque, ainsi que les origines et la raison d'être de la célèbre police Helvetica.
Vous comprendrez aussi le contraste saisissant entre la publicité d'avant et d'après le Style international, cette approche suisse du milieu du siècle fondée sur les grilles, les polices sans empattement et l'élimination des fioritures, et ce que ce changement a impliqué concrètement pour la communication visuelle, hier comme aujourd'hui.
Il y a d'autres points essentiels à connaître, que je vais énumérer ci-dessous. Gardez à l'esprit qu'il existe des exceptions à toutes ces règles, selon le rôle que joue la typographie dans votre projet.
Prenons les mots qui se retrouvent isolés à la fin d'un paragraphe ou en haut d'une colonne. Ils ont même des noms. Une veuve est une ligne isolée en haut d'une colonne ; un orphelin est une ligne isolée restée seule en bas d'une colonne. Dans les deux cas, cela crée un vide qui rompt la texture de la page et attire l'œil là où il ne devrait pas. Pour être honnête, ils sont difficiles à éviter en responsive design ; il vaut mieux les corriger lors des derniers ajustements de points de rupture plutôt que d'essayer de les éliminer dès la conception. Il en va de même pour les « lignes creuses », ce bord droit irrégulier laissé par un texte non justifié, que vous voulez varié mais jamais saccadé.
Une autre règle claire, beaucoup plus facile à maîtriser, concerne l'espacement des caractères : l'espace entre les lettres. S'il est trop serré ou trop large, la lisibilité d'un long texte est clairement compromise.
Les textes courts et les titres sont une autre affaire : ils peuvent supporter une certaine stylisation, selon l'ambiance recherchée.
Quoi que vous fassiez, ne déformez jamais votre texte manuellement. Besoin d'une largeur plus importante ? Cherchez des polices « étendues » (extended). Besoin de quelque chose de plus haut et plus percutant ? Optez pour une police « condensée » (condensed) ; il y en a énormément à disposition.
Lorsque vous déformez une police manuellement, toutes les proportions internes des caractères sont faussées. L'épaisseur des traits et la largeur des hampes ne correspondent plus au reste de la famille, et le caractère semble dénaturé par rapport à ses voisins.
Il en va de même pour l'inclinaison d'une police afin de simuler une « italique ». Certes, le résultat n'est pas toujours mauvais, mais il existe de bien meilleures options.
Les polices italiques bien conçues ne sont pas simplement une police standard inclinée. Elles possèdent leurs propres proportions, ce qui garantit leur lisibilité et leur permet de s'harmoniser avec la version normale sans créer de conflit visuel.
Il y a encore beaucoup à dire et à apprendre. Cependant, c'est le strict nécessaire pour savoir quoi surveiller lorsque vous convertissez la typographie en code.
La prochaine fois que vous travaillerez sur le front-end, vous aurez plus ou moins intégré cette routine. « Text-transform ? » C'est bon. « Character-spacing ? » C'est bon. « Line-height ? » C'est bon. « Est-ce une police avec ou sans empattement ? » Vous pouvez désormais y répondre. « Cette police a-t-elle vraiment sa place dans un menu ? » Cette question demande plus de réflexion, mais elle mérite d'être posée.
Appliquer cette routine individuellement est une bonne habitude. L'adopter au sein d'une équipe, sous forme d'échelle typographique partagée et d'une courte liste de vérifications lors du transfert, transforme cette habitude en véritable infrastructure. Les mêmes corrections ne reviennent plus sur chaque projet, et le débat ne porte plus sur l'apparence du texte, mais sur les fonctionnalités du produit. L'accessibilité fonctionne de la même manière. Si vous la considérez comme une option, elle sera la première chose sacrifiée ; si vous la traitez comme une exigence, elle devient une contrainte intégrée dès la conception de l'échelle typographique, ce qui coûte bien moins cher qu'une mise en conformité ultérieure.
Qu'est-ce que la typographie ?La typographie est l'art de disposer les caractères pour faciliter la lecture : choisir la police, définir sa taille et son épaisseur, et contrôler l'espacement entre les caractères, les lignes et les blocs de texte. Elle englobe aussi bien la forme des lettres que celle de la page qui les accueille.
Quelle est la différence entre une police et une famille de caractères ?Une famille de caractères (typeface) est un ensemble de symboles et de caractères typographiques. Une police (font) est un jeu complet de caractères au sein d'une famille, souvent décliné dans une taille et un style particuliers. Les familles typographiques regroupent des polices aux designs apparentés.
Quelle est l'interlignage idéal ?Généralement entre 120 % et 145 % de la taille du texte, selon les recommandations de Practical Typography, et exprimé de préférence en CSS par une valeur sans unité. Pour en juger à l'œil, tracez une ligne imaginaire au milieu des lignes de texte sans toucher aux jambages inférieurs ou supérieurs. Si la ligne passe sans encombre, c'est parfait.
Combien de caractères une ligne de texte doit-elle contenir ?Entre 50 et 75, espaces compris. Baymard situe l'optimum entre 50 et 60, avec une tolérance jusqu'à 75 ; Butterick autorise de 45 à 90. Au-delà de 80, on sort des critères de lisibilité du WCAG. Des lignes trop courtes hachent la lecture, tandis que des lignes trop longues rendent difficile le repérage du début et de la fin de chaque ligne.
Le serif ou le sans-serif est-il préférable pour les longs textes ?On dit souvent que le serif est le meilleur choix, mais tout dépend de la police spécifique plutôt que de la famille. Le Didot est un serif avec un contraste élevé entre ses lignes horizontales et verticales, ce qui perturbe le flux de lecture ; il est donc moins lisible sur un long texte que le Lato, un sans-serif aux proportions plus équilibrées.
Quand utiliser une police à chasse fixe ou une police de titrage ?La police à chasse fixe (monospace) est destinée au code, aux terminaux, aux diffs et aux tableaux numériques, où la largeur égale des caractères permet d'aligner les colonnes ; elle ralentit la lecture de textes suivis. La police de titrage est réservée aux titres principaux et aux textes courts, où le ton prime sur la vitesse de lecture ; elle perd toute efficacité en corps de texte ou en dessous.
Qu'est-ce qu'une échelle typographique et pourquoi est-elle nécessaire à la hiérarchie ?Une échelle typographique est un ensemble fixe de tailles autorisées sur une page, chacune constituant un palier délibéré par rapport à la précédente. Définissez d'abord la taille du corps de texte, puis déduisez-en celle des titres. Ce sont des paliers peu nombreux et distincts qui permettent d'identifier un titre comme tel, le reste étant assuré par l'épaisseur, la casse, la couleur et l'espace environnant.
Pourquoi ne faut-il pas simuler une italique ou déformer une police ?Parce que déformer manuellement une police fausse toutes les proportions internes du caractère, et que l'épaisseur des traits et des fûts ne correspond plus au reste de la famille. Si vous avez besoin de plus large, cherchez des polices « étendues » (extended) ; pour plus étroit, des « condensées » (condensed). Les italiques bien conçues possèdent leurs propres proportions plutôt qu'une simple inclinaison appliquée au style normal.
Pour d'autres décisions de conception connexes, consultez Minimalisme ou brutalisme : lequel choisir ? et Concevoir des applications pour enfants : l'expérience utilisateur d'une application de lecture.
Chez Imaginary Cloud, nous disposons d'une équipe d'experts en design UI et UX. Si vous pensez avoir besoin d'aide pour votre conception, contactez-nous.
Je suis designer d'interface utilisateur et de produits, illustrateur et peintre. Connue pour mon amour des serviettes de plage sales, de la production musicale, de la typographie et de toutes sortes de pizzas.
People who read this post, also found these interesting:
