Conception de système typographique : Comment créer une typographie évolutive

Choisir une police n'est pas concevoir un système typographique. Choisir deux polices qui s'accordent bien n'est toujours pas concevoir un système typographique. Un système typographique est l'ensemble des règles qui déterminent comment chaque élément de texte de votre produit, marque ou interface se comporte dans tous les contextes où il apparaîtra.

La plupart des designers sautent cette étape. Ils choisissent une police pour les titres et une pour le corps de texte, ajustent les tailles à l'œil, et considèrent que c'est terminé. Six mois plus tard, le site marketing utilise une échelle, l'application une autre, le pitch deck une troisième, et personne ne peut expliquer pourquoi la marque semble incohérente alors que le logo n'a pas changé.

Cette incohérence est un problème de système typographique. Et c'est réparable.

Ce que contient réellement un système typographique

Un véritable système typographique définit cinq choses :

1. Une échelle typographique. La relation mathématique entre vos tailles de texte.
2. Associations de polices. Quelles polices de caractères jouent quels rôles et pourquoi.
3. Règles de graisse et de style. Quand utiliser le gras, l'italique, le médium, et ce que chaque graisse signale.
4. Standards d'espacement. Hauteur de ligne, espacement des lettres et espacement des paragraphes pour chaque taille.
5. Comportement adaptatif. Comment chaque élément ci-dessus s'adapte aux différentes tailles d'écran.

Si votre "système typographique" manque l'un de ces éléments, vous avez des choix de polices, pas un système.

L'échelle typographique est la fondation

Une échelle typographique est un ensemble de tailles de police générées à partir d'un rapport mathématique cohérent. Au lieu de choisir les tailles au feeling (16px ici, 24px là, peut-être 36px pour le héros), vous choisissez une taille de base et un rapport, et toutes les autres tailles en découlent.

Rapports courants qui fonctionnent :

| Ratio | Nom | Sensation | Idéal pour | |---| | 1.125 | Seconde Majeure | Serré, dense | Tableaux de bord riches en données, petits écrans | | 1.200 | Tierce Mineure | Équilibré, calme | Éditorial, documentation | | 1.250 | Tierce Majeure | Hiérarchie claire | Sites marketing, portfolios | | 1.333 | Quarte Juste | Fort contraste | Pages de destination, titres | | 1.618 | Nombre d'Or | Dramatique | Impression, conception d'affiches, sections héro |

Commencez avec une base de 16px (la valeur par défaut du navigateur, accessible, lisible) et multipliez pour les titres, divisez pour les légendes et les étiquettes. Une échelle de Tierce Majeure à partir de 16px vous donne : 10px, 12.8px, 16px, 20px, 25px, 31.25px, 39px. Arrondissez à des valeurs nettes et vous obtiendrez une échelle qui semble intentionnelle plutôt qu'arbitraire.

L'association de polices est une stratégie

Internet regorge de listes des "meilleures associations de polices". La plupart sont des conseils de décoration déguisés en conseils de design. Une véritable association de polices est stratégique.

Les règles qui fonctionnent réellement :

Contraste de structure, harmonie de proportion. Associez une sans géométrique à une sérif humaniste. Le contraste structurel crée un intérêt visuel. La hauteur d'x et la proportion partagées leur donnent l'impression d'appartenir ensemble. Inter + Merriweather. DM Sans + Lora. Satoshi + Source Serif.

Une voix par rôle. Votre police de titre porte la personnalité. Votre police de corps de texte porte le contenu. Votre police d'interface utilisateur porte la fonction. Essayer de faire en sorte qu'une seule police fasse les trois est la façon dont vous vous retrouvez avec un système qui semble générique ou forcé.

Deux polices sont presque toujours suffisantes. Trois est le maximum pour tout système qui doit rester gérable. Chaque police de caractères supplémentaire multiplie le nombre de décisions d'association, de décisions de graisse et de décisions adaptatives que vous devez prendre. Si vous pensez avoir besoin de quatre polices, vous devez probablement mieux utiliser deux polices.

Testez l'association en contexte, pas sur un spécimen. Une association qui semble magnifique sur une affiche de spécimen typographique peut s'effondrer à l'intérieur d'un composant de carte ou d'une barre de navigation. Testez dans la mise en page réelle avant de vous engager.

Règles de graisse et de style

La graisse est une hiérarchie. Le gras signifie important. Le médium signifie support. Le régulier signifie corps de texte. Le léger signifie décoratif ou secondaire. Ces associations sont ancrées dans la façon dont les gens lisent.

L'erreur est d'utiliser la graisse de manière incohérente. Si votre H2 est semi-gras sur le site marketing mais gras dans l'application, la marque semble différente même si la police est la même. Un système typographique fixe cela :

• H1 : Gras (700). Toujours. C'est votre voix la plus forte.
• H2 : Semi-gras (600) ou Gras (700). Choisissez-en un, utilisez-le partout.
• H3 : Médium (500). Assez de contraste pour être remarqué sans concurrencer le H2.
• Corps de texte : Régulier (400). Lisible, neutre, sans friction.
• Légendes et étiquettes : Régulier (400) ou Médium (500) aux petites tailles.

L'italique n'a qu'un seul rôle : l'emphase dans le corps de texte. Utiliser l'italique à des fins décoratives (citations en exergue, étiquettes de section) dilue sa signification et rend l'emphase réelle invisible.

L'espacement est le point de rupture des systèmes

La hauteur de ligne, l'espacement des lettres et l'espacement des paragraphes sont les points où la plupart des "systèmes typographiques" s'effondrent discrètement. Les tailles de police correspondent entre les produits, les graisses correspondent, mais le texte semble différent parce que l'espacement est incohérent.

Règles de hauteur de ligne :

Les titres nécessitent une hauteur de ligne plus serrée (1.1 à 1.3) car le texte de grande taille crée trop d'espace vertical avec les rapports de corps de texte. Le corps de texte nécessite une hauteur de ligne plus lâche (1.5 à 1.8) pour une lecture confortable. L'erreur courante est d'appliquer 1.5 à tout, ce qui fait flotter les titres et donne l'impression que le corps de texte est à l'étroit à la mauvaise taille.

Règles d'espacement des lettres :

Le texte de grande taille (titres, affichage) bénéficie d'un espacement des lettres légèrement négatif (-0.01em à -0.02em). L'espacement optique aux grandes tailles crée des lacunes qui semblent plus larges que prévu. Le texte de petite taille (légendes, étiquettes, majuscules) bénéficie d'un espacement des lettres légèrement positif (+0.02em à +0.05em) car un crénage serré aux petites tailles réduit la lisibilité.

Espacement des paragraphes :

Utilisez un multiplicateur cohérent de votre unité de base. Si votre base est de 16px avec une grille de 4px, l'espacement des paragraphes doit être de 16px ou 24px, et non une valeur arbitraire. Cela maintient un rythme vertical cohérent sur chaque page.

Comportement adaptatif

Un système typographique qui fonctionne à un seul point de rupture n'est pas un système. C'est une capture d'écran.

La typographie fluide adapte les tailles de police en douceur entre les points de rupture à l'aide de CSS clamp(). Au lieu de passer de 16px à 14px à un point de rupture, la taille s'interpole. Cela élimine les saccades de mise en page qui résultent des changements brusques de points de rupture.

font-size: clamp(1rem, 0.5rem + 2vw, 2.5rem);

Compression de l'échelle sur mobile. Votre rapport d'échelle de bureau (disons 1.250) crée trop de contraste sur un petit écran. Un H1 de 39px sur ordinateur fonctionne. Un H1 de 39px sur un téléphone de 375px ne fonctionne pas. La solution : compresser le rapport sur mobile (descendre à 1.125 ou 1.150) tout en gardant la taille de base identique. La hiérarchie reste, les tailles s'adaptent.

Tailles minimales lisibles. Ne descendez jamais en dessous de 16px pour le corps de texte sur mobile. Ne descendez jamais en dessous de 12px pour tout texte. L'accessibilité n'est pas une option, et le petit texte sur les petits écrans nuit aux utilisateurs réels.

Échecs courants des systèmes typographiques

Le buffet de polices. Cinq polices de caractères, aucune justification. Chaque page donne l'impression d'une marque différente.

La graisse orpheline. Utiliser le Fin (100) ou le Noir (900) pour un seul élément décoratif et rien d'autre. Cela ajoute du bruit visuel sans ajouter de valeur au système.

L'espacement au hasard. Des hauteurs de ligne et des espacements de lettres qui changent entre les composants parce que personne n'a défini les règles.

L'échelle uniquement pour ordinateur de bureau. Superbe sur une maquette de 1440px. S'effondre sur tout ce qui est plus petit parce que personne n'a testé le comportement adaptatif.

Les tokens manquants. Un système typographique défini dans un fichier Figma mais non traduit en design tokens ou en propriétés CSS personnalisées. Le système existe en théorie mais pas dans le code, donc les ingénieurs le réinventent à chaque sprint.

FAQ

Qu'est-ce qu'un système typographique en design ?

Un système typographique est l'ensemble complet des règles régissant la sélection, le dimensionnement, la graisse, l'espacement et le comportement adaptatif des polices au sein d'une marque ou d'un produit. Il va au-delà du simple choix de polices pour définir comment chaque élément de texte s'adapte et maintient sa cohérence.

Combien de polices un système de design devrait-il avoir ?

Deux est la norme. Trois est le maximum pour la plupart des systèmes. Une police d'affichage ou de titre et une police de corps de texte répondent à la grande majorité des besoins de conception. En ajouter davantage crée une complexité exponentielle dans les décisions d'association, de graisse et d'adaptation.

Quel est le meilleur rapport d'échelle typographique ?

Il n'y a pas de meilleur rapport unique. La Tierce Majeure (1.250) fonctionne bien pour le marketing et l'éditorial. La Tierce Mineure (1.200) convient aux interfaces denses. La Quarte Juste (1.333) crée un fort contraste pour les titres. Choisissez le rapport qui correspond à la densité de votre contenu et à vos besoins de hiérarchie.

Construisez le système avant de choisir la police

La police est la dernière décision, pas la première. Définissez votre échelle, vos règles d'espacement, votre hiérarchie de graisses et votre comportement adaptatif. Ensuite, choisissez la police de caractères qui correspond à ces contraintes. Une police médiocre au sein d'un excellent système surpassera toujours une excellente police sans système.