Les interfaces numériques quotidiennes incluent une grande variété d'images, de visualisations et d'autres images. Mais plus que toute autre chose, ils sont faits de mots. Oh, tant de mots. Alors que nous équipons les équipes pour concevoir et coder des interfaces utilisables, cohérentes et belles à l’aide de systèmes, il est essentiel que les mots dépendent d’une solide base de typographie. Je l’avoue, je ne suis pas un expert en typographie. Il me manque un diplôme en graphisme. Je ne suis jamais du genre à choisir une police, à mettre à l’échelle un type ou à affiner l’espacement des lettres. En conséquence, j’ai toujours été réticent à écrire sur la typographie.

La typographie

commence par établir une base de familles et de poids de polices ainsi que des solutions de secours. Il explore ensuite comment créer une hiérarchie en utilisant la taille, la couleur, des détails supplémentaires tels que la hauteur des lignes et la réactivité des couches. Ces modèles sont ensuite appliqués aux composants de la bibliothèque d'un système (comme l'article et l'en-tête) ainsi qu'aux composants personnalisés créés par d'autres équipes.

Polices

Avant d'entrer dans les détails, vous devez vous contenter des bases : la ou les polices. Grâce à l’exploration, à la comparaison, à la recherche et souvent – ​​pour les grandes entreprises – à la création d’une police elle-même, chaque affichage découle de ce choix et en dépend.

Familles

, pondérations et solutions de secours

Bien que les systèmes puissent varier les polices en fonction du thème, la plupart se fondent initialement sur l'identification de la famille de polices primaires avec empattement et/ou sans empattement. Chaque police est complétée par une cascade de solutions de secours (Hello, Arial et Times), et de nombreux systèmes incluent une police monospace pour l'affichage du code (même s'il ne s'agit que de la leur).

Certains systèmes peuvent s'en sortir avec seulement deux ou trois graisses de leur police principale, cherchant à équilibrer la variété et la flexibilité avec la gouvernance et le poids de téléchargement.

À retenir : accéder à une police principale n'est pas toujours difficile, mais choisir les poids à inclure a des conséquences à long terme. L’ajout de polices et de poids est facile. Gérer la taille des téléchargements et les modifier est difficile.

Obtenir les polices, que ce soit par téléchargement, lien ou CDN

Qu'un programme de système de conception soit propriétaire ou non des polices, les utilisateurs d'un système de conception s'attendent à ce qu'un système fournisse les instructions nécessaires pour utiliser les polices.

Du point de vue d'un concepteur, tout est une question de téléchargements. Certaines polices sont une propriété intellectuelle étroitement détenue avec un partage très intentionnellement limité. Ainsi, au minimum, une page de typographie doit fournir un téléchargement direct ou des instructions sur la façon d'obtenir l'approbation pour les obtenir.La plupart des équipes fournissent un ZIP téléchargeable qui inclut tous les fichiers dont vous avez besoin pour installer et utiliser les polices localement.

Pour les développeurs, cela dépend de l'approche, offrant des options telles que :

• Téléchargement direct de polices pour servir les polices elles-mêmes
• Instructions pour créer un lien vers un service comme Google Fonts
• Références CDN auxquelles tous les produits font référence collectivement
• Une invitation à contacter un architecte technique, puisqu'une licence pour la police est requise. Les organisations en ont besoin pour contrôler les coûts récurrents et souvent non négligeables liés à l’hébergement et à la maintenance de la police.

À retenir : les polices sont utilisées de différentes manières par différentes personnes. Les utilisateurs du système s'attendent à ce que le système leur explique comment tout utiliser facilement, même si ce n'est pas le travail de l'équipe système de créer des polices personnalisées ou de servir elles-mêmes les polices.

Échelle de typographie et amp; Hiérarchie

La plupart des systèmes de conception présentent une échelle typographique dans la documentation sous forme de pile verticale. Ce n'est pas assez. Un système typographique doit également établir des éléments tels que le corps du texte, les titres, la couleur, la réactivité, la couleur et d'autres détails précis.

Corps du texte

Les systèmes exploitent une échelle de caractères pour proposer des tailles de texte de base (souvent appelées simplement texte ou corps) qui incluent petite, moyenne, grande et, si vous en avez besoin, xs, xl, etc. La plupart des systèmes en ont besoin d'environ trois (d'où mon aisance à utiliser les tailles de t-shirts). Commencez par quelques-uns et développez autant que nécessaire la conception des composants et la composition des pages à l'état sauvage.

Le corps du texte peut également proposer un paragraphe « Lead » (ou « Lede ») distinct pour ouvrir une page, comme dans un article (nous y reviendrons plus tard). Ainsi, une simple échelle S/M/L peut également nécessiter d’autres variantes. Ceci est particulièrement pertinent dans les systèmes proposant plusieurs tailles, car un câble pour des écrans plus grands et à faible densité serait plus grand qu'un câble pour des alternatives plus petites et à haute densité.

Couleur du texte

La couleur joue également un rôle clé dans la hiérarchie typographique d'une interface, souvent par types établis comme :