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.

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 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 avez pour se contenter de l'essentiel : police(s). 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 en dépend.

Familles, poids et solutions de repli

Bien que Les systèmes peuvent faire varier les polices en fonction du thème, la plupart se fondent d'abord en identifiant la famille de polices avec empattement primaire et/ou sans empattement. 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 à espacement fixe pour les affichages de code (même si ce n'est que la leur).

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

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

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

Si un programme système de conception possède ou non les polices, les utilisateurs d'une conception système 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 é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 :

• Direct téléchargement de 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 les coûts récurrents et souvent non triviaux de l'hébergement et du service de la police.

À 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 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 les polices elles-mêmes.

Typography Scale & 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 en-têtes, la couleur, la réactivité, la couleur et d'autres détails précis.

Corps du texte

Les systèmes exploitent une échelle de type pour offrir un noyau tailles de texte - 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 dans la nature.

Le corps du texte peut également proposer un paragraphe "Lead" (alternativement, "Lede") distinct pour ouvrir une page, comme 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 types établis comme :

• Primaire
• Secondaire
• Interactif
• Désactivé
• 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 Hudl Uniform 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, 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 maintenue, les enfants du cordonnier et tout), nous utilisons un mixin de coloration du texte qui parcourt les couleurs d'arrière-plan, par type.