Les interfaces numériques du quotidien incluent une grande variété d’images, de visualisations et d’autres images. Mais plus que tout, elles sont faites de mots. Oh, tellement de mots. Alors que nous équipons les équipes pour concevoir et coder des interfaces utilisables, cohérentes et esthétiques à l’aide de systèmes, il est essentiel que les mots s’appuient sur une base solide de typographie. Je l’avoue, je ne suis pas un expert en typographie. Je n’ai pas de diplôme en graphisme. Je ne suis jamais la personne qui choisit une police, met à l’échelle un type ou peaufine l’espacement des lettres. Par conséquent, j’ai toujours été réticente à écrire sur la typographie.

La typographie commence par établir une base de familles de polices et de poids ainsi que des solutions de secours. Elle explore ensuite comment créer une hiérarchie à l’aide de la taille, de la couleur, de détails supplémentaires comme la hauteur de ligne et la réactivité de la superposition. Ces modèles sont ensuite appliqués aux composants de la bibliothèque d’un système (comme Article et Header) ainsi qu’aux composants personnalisés créés par d’autres équipes.

Polices

Avant de plonger dans les détails, vous devez vous arrêter sur les bases : 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, graisses et solutions de secours

Bien que les systèmes puissent varier les polices en fonction du thème, la plupart se basent initialement sur l'identification de la famille de polices serif et/ou sans serif principale. Chaque police est augmentée d'une cascade de polices de secours (Hello, Arial et Times), et de nombreux systèmes intègrent une police monospace pour les affichages de code (même s'il s'agit uniquement 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 : il n’est pas toujours difficile d’obtenir une police principale, mais le choix des graisses à inclure a des conséquences à long terme. L’ajout de polices et de graisses est facile. La gestion de la taille du téléchargement et leur modification sont difficiles.

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

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

Du point de vue d’un concepteur, tout est une question de téléchargement. Certaines polices sont une propriété intellectuelle étroitement détenue avec un partage intentionnellement très 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 fichier 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, en proposant des options telles que :

• Téléchargement direct des polices pour diffuser 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, car une licence pour la police est requise. Les organisations exigent cela pour contrôler le coût récurrent et souvent non négligeable de l'hébergement et de la diffusion de la police.

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

Échelle et hiérarchie typographiques

La plupart des systèmes de conception présentent une échelle typographique dans la documentation sous forme de pile verticale. Cela ne suffit pas. Un système typographique doit également établir des constructions telles 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 typographique pour offrir 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 de trois environ (d'où mon confort avec l'utilisation de tailles de t-shirt). Commencez avec quelques-uns et développez-les autant que nécessaire au fur et à mesure de la conception des composants et des compositions de pages.

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 échelle S/M/L simple peut également nécessiter d'autres variantes de lead. Cela est particulièrement pertinent dans les systèmes proposant plusieurs tailles, car un Lead pour les écrans plus grands et de plus faible densité serait plus grand qu'un Lead pour les alternatives plus petites et de plus haute densité.

Couleur du texte

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