Les interfaces numériques quotidiennes incluent une grande variété d'images, de visualisations et d'autres images. Cependant, 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 reposent sur une base solide de typographie. J'avoue que je ne suis pas un expert en typographie. Il me manque un diplôme en graphisme. Je ne suis jamais la personne qui choisit une police, un type de mise à l'échelle ou un espacement des lettres raffiné. En conséquence, j'ai toujours été réticent à écrire sur la typographie.

La typographie commence par établir une base de familles de polices et de poids ainsi que des solutions de repli. Il explore ensuite comment créer une hiérarchie en utilisant la taille, la couleur, des 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 creuser dans les détails, vous devez régler les bases : police(s). 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 replis

Alors que les systèmes peuvent faire varier les polices en fonction du thème, la plupart se fondent initialement en identifiant la famille de polices avec empattement principal et/ou sans empattement. Chaque police est complétée par une cascade de solutions de repli (Hello, Arial et Times), et de nombreux systèmes intègrent une police à espacement fixe pour les affichages de code (même si ce n'est que la leur).

Certains systèmes peuvent s'en tirer avec aussi peu que deux ou trois poids de leur police de caractères principale, cherchant à équilibrer la variété et la flexibilité avec la gouvernance et le poids du téléchargement.

Point à retenir : arriver à 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 à l'utilisation des polices.

Du point de vue d'un concepteur, tout est une question de téléchargements. Certaines polices sont étroitement liées à la propriété intellectuelle avec un partage très intentionnellement limité. Ainsi, au minimum, une page 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 des polices pour servir les polices elles-mêmes
• Instructions pour créer un lien vers un service tel que Google Fonts
• Références CDN auxquelles tous les produits se réfèrent collectivement
• Une invitation à contacter un architecte technique, car une licence pour la police est requise. Les organisations l'exigent pour contrôler le coût récurrent et souvent non négligeable de l'hébergement et du service de la police.

Point à retenir : différentes personnes ont besoin de polices de différentes manières. Les utilisateurs du système s'attendent à ce que le système 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 les polices elles-mêmes.

Échelle de typographie & Hiérarchie

La plupart des systèmes de conception présentent une échelle de typographie dans la documentation sous la forme d'une pile verticale. Ce n'est pas assez. 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 à grain fin.

Corps du texte

Les systèmes exploitent une échelle de type pour proposer des tailles de texte de base - souvent appelées simplement texte ou corps - qui incluent petit, moyen, grand 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 par quelques-uns et développez-les si nécessaire en tant que conceptions de composants - et compositions de pages à l'état sauvage.

Le corps du texte peut également proposer un paragraphe distinct "Lead" (alternativement, "Lede") pour ouvrir une page, comme dans un article (plus à ce sujet 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 offrant plusieurs tailles, car une avance pour des écrans plus grands et à faible densité serait plus grande qu'une avance 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 des types établis comme :

• Primaire, pour la plupart des textes d'interface, qu'il s'agisse de corps ou d'en-tête.
• Secondaire, pour un contraste diminué (souvent, le « texte gris ») pour des informations supplémentaires.
• Interactif, non seulement pour les liens, mais aussi pour les boutons plats, les étiquettes d'onglet, etc.
• Désactivé, il en résulte souvent des traitements à contraste particulièrement faible
• Erreur, généralement rouge, pour le contraste le plus élevé avec son environnement

Quand il s'agit de nommer les couleurs de texte en fonction de l'intention, je trouve les noms Hudl Uniform les plus intrigants : par défaut, contraste, subtil et non essentiel. Ces noms équilibrent les compromis entre un contrôle plus fort et une plus grande abstraction (et donc une réutilisation moins évidente).

Ces types sont typiques, rencontrés lors des premières conceptions de composants comme le bouton, l'entrée et le lien. Au fur et à mesure qu'une bibliothèque grandit, elles deviennent éparpillées dans le catalogue de composants via des outils tels que les jetons et le mixin. Notamment, ils deviennent nécessaires lorsque les conceptions de composants s'étendent dans des environnements clairs et sombres.

Par exemple, dans la bibliothèque Yoursite.com (beaucoup moins rigoureusement entretenue, les enfants du cordonnier et tout), nous utilisons un mixin de coloration du texte qui parcourt les couleurs d'arrière-plan, par type.