Après avoir posé les bases colorimétriques du Design System UniCore, il est temps de s’attaquer à un autre pilier fondamental : la typographie.
Au cœur de la lisibilité et de la hiérarchie de l’information, la typographie façonne, d’une certaine façon, la voix de votre interface.
UniCore la structure en deux couches : les primitives, pour définir les valeurs de base (familles, tailles, graisses, interlignage, etc.) et les styles sémantiques, pour adapter ces bases aux différents contextes d’usage dans vos interfaces.
Ce système permet de garantir une cohérence de lecture, tout en restant flexible selon le ton, le composant ou l’espace où le texte s’exprime.
Les primitives typographiques d’UniCore
Avant même de penser à la hiérarchie visuelle d’un produit, il faut s’accorder sur des valeurs typographiques de base.
Si vous avez lu mes précédents articles, vous savez très certainement que je vais encore insister ici sur le rôle de primitives : des valeurs de base qui vont permettre de poser un socle stable et cohérent, à partir duquel tous les styles textuels d’UniCore vont s’articuler.
On retrouve ainsi :
Les familles de polices
La typographie d’UniCore repose sur trois familles, volontairement limitées pour maintenir une identité graphique maîtrisée tout en offrant assez de variété pour couvrir tous les usages :
• Inter : une police sans-serif moderne et lisible. Dans UniCore, c’est la police par défaut pour tous les contenus textuels classiques.
• Poppins : une police utilisée pour les titres d’accroche (display) ou les citations (blockquote), elle ajoute un caractère visuel plus expressif.
• Roboto Mono : réservée aux usages techniques (code, terminal), cette police monospace garantit lisibilité et alignement des caractères.
Une échelle de taille
Inspirée des systèmes typographiques de Tailwind ou Bootstrap, UniCore adopte une échelle modulaire (xs, sm, md, lg, xl, etc.) qui permet une adaptation fluide entre design et intégration.
Chaque taille a été calibrée pour assurer une bonne lisibilité à l’écran, que ce soit sur desktop ou mobile.
Poids, interlignage et approche
- Les graisses (font-weights) proposés couvrent les cas les plus fréquents, sans surcharge : light, regular, medium, semi-bold et bold.
- L’interlignage (line-height) est défini en fonction de chaque taille pour optimiser la lisibilité du texte courant comme du texte embarqué.
- Quant au letter-spacing, il est bien présent dans les primitives, mais volontairement laissé de côté dans la couche sémantique pour conserver un rythme naturel par défaut.
Des styles typographiques adaptés à chaque usage
Les valeurs primitives sont donc ensuite réutilisées dans des styles de texte, qui répondent pour chacun, à un contexte précis d’utilisation dans une interface :
display: pour les titres d’accroche ou les grandes sectionsheading: pour les niveaux de titres (h1 à h6)text: pour les paragraphes, le corps principalcode: styles monospace pour le texte techniqueblockquote: pour les citations styliséescomponent: pour le texte embarqué dans des composants (boutons, badges, menus…)utility: pour des usages secondaires (infos de statut, labels, légendes…)
À savoir que la propriété line-height est elle-aussi adaptée aux usages.
Elle sera, par exemple, plus aérée pour un paragraphe rendant ainsi la lecture plus agréable, tandis qu’elle sera plus serrée dans des composants pour s’y intégrer harmonieusement.
Nous avons vu ensemble que le choix d’une typographie ne se limite pas à choisir de “belles polices” mais qu’il s’agit d’une « voix structurelle », elle aussi construite avec rigueur.
Aussi et comme dit précédemment, UniCore est un socle, pas une cage.
Vous êtes donc libre de composer, d’ajuster, de faire vivre ce langage typographique selon vos besoins. UniCore vous donne les outils, vous restez l’auteur.
Et en parlant polices d’écritures…
En voici, ci-dessous, quelques-unes que j’ai découverte et que je vous recommande dans vos divers projets digitaux ou artisanaux :
• Jollin Police :
Cette police propose de nombreuses lettres alternatives pour créer des compositions variées, selon vos envies.
Voir sur Creative Fabrica
• One Day :
Police fine et avec des lignes de séparation originales.
Voir sur Creative Fabrica
• Ethna :
Son équilibre entre modernisme et vintage rend la police polyvante.
Voir sur Créative Fabrica
