Les interfaces numériques de tous les jours 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. Je vais avouez 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 précis. Par conséquent, j'ai toujours été réticent à écrire sur la typographie.

La typographie commence par établir une base de familles de polices et de graisses ainsi que des solutions de remplacement. 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 l'article et l'en-tête) ainsi qu'aux composants personnalisés créés par d'autres équipes.

Polices

Avant de creuser dans les détails, vous devez vous contenter de l'essentiel : la ou les polices. Grâce à l'exploration, à la comparaison, à la recherche et souvent - pour les grandes entreprises - à la création d'une police elles-mêmes, chaque affichage découle de ce choix et dépend de ce choix.

Familles, poids et solutions de secours

Bien que les systèmes puissent faire varier les polices en fonction du thème, la plupart se basent initialement sur l'identification de la famille de polices primaires avec empattement et/ou sans empattement. Chaque police est augmentée d'une cascade de solutions de secours (Hello, Arial et Times), et de nombreux systèmes ajoutent une police à espacement fixe pour l'affichage du 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 de téléchargement.

À retenir : il n'est pas toujours difficile d'accéder à une police principale, mais le choix des graisses à 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 du système de conception possède ou non les 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 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 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 comprend 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 fournissant des options telles que :

• Téléchargement direct des polices pour servir les polices elles-mêmes
• Instructions pour se connecter à 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 les coûts récurrents et souvent non négligeables 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 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 et hiérarchie typographiques

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 fins.

Corps du texte

Les systèmes tirent parti d'une échelle de caractères pour offrir 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 d'environ trois (d'où mon confort avec l'utilisation de tailles de t-shirt). Commencez par quelques-uns et développez autant que nécessaire les conceptions de composants et les compositions de pages à l'état sauvage.

Le corps du texte peut également proposer un paragraphe distinct "Lead" (ou "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 de plomb. Ceci est particulièrement pertinent dans les systèmes offrant plusieurs tailles, car un lead pour des affichages plus grands et de faible densité serait plus grand qu'un lead pour 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 selon des types établis tels que :

• Principal, pour la plupart des textes d'interface, que ce soit le corps ou l'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é, ce qui entraîne souvent un contraste particulièrement faiblements
• Erreur, généralement rouge, pour le contraste le plus élevé avec son environnement

Quand il s'agit de nommer les couleurs du texte en fonction de l'intention, je trouve les noms uniformes Hudl les plus intrigants : par défaut, contraste, subtil et non essentiel. De tels noms équilibrent les compromis d'un contrôle plus fort avec 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, ils sont éparpillés dans tout le catalogue de composants via des outils tels que des jetons et mixin. Notamment, ils deviennent nécessaires car les conceptions de composants s'étendent sur des paramètres clairs et sombres.

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