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. 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 raffiné. Par conséquent, j'ai toujours été réticent à écrire sur la typographie.

La typographie commence par définir une base de familles de polices et de poids, ainsi que des alternatives. 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 d'entrer 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 solutions de remplacement

Alors que les systèmes peuvent faire varier les polices en fonction du thème, la plupart se basent initialement sur l'identification de la famille de polices avec empattement principal 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 seulement 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.

À 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 de 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 à 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, en proposant 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 de la diffusion 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 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 fournir les polices elles-mêmes.

Échelle de typographie et amp ; 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 caractères 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 fonction des conceptions de composants et des 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 types établis comme :

• Primary, pour la plupart des textes d'interface, qu'il s'agisse du corps ou du titre.
• Secondary, pour un contraste diminué (souvent, le "texte gris") pour des informations supplémentaires.
• Interactive, non seulement pour les liens, mais aussi pour les boutons plats, les étiquettes d'onglet, et plus encore
• Désactivé, ce qui entraîne souvent des traitements de contraste particulièrement faibles
• 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 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.