Options de police dans Figma : hauteur de ligne, interlettrage, majuscules, OpenType

Dans Figma, la typographie se règle au millimètre, mais l’erreur la plus fréquente consiste à traiter chaque bloc comme un cas isolé. Commencez par définir des styles de texte nommés par usage plutôt que par taille, par exemple « Body/Long », « Body/Short », « UI/Label », « UI/Meta ». Cette approche favorise la cohérence et le futur passage en tokens. Pour la hauteur de ligne, partez d’un ratio de 1,3 à 1,45 pour les paragraphes, un peu moins pour les gros titres qui, sinon, flottent. L’objectif est un flux lisible dans les composants auto‑layout, sans corrections ponctuelles qui cassent la grille.

L’interlettrage, souvent surutilisé, doit rester nul ou proche de zéro sur les textes courants afin de préserver le rythme de lecture. Il devient utile sur les micro‑libellés, les boutons en capitales ou les petits corps où la fermeture des formes gêne la perception. Les small caps, si la police propose de vraies petites capitales OpenType, offrent une alternative plus élégante que les capitales forcées; elles conservent la modulation du texte tout en affermissant l’impact visuel. Évitez toutefois l’abus sur de longues séquences, où elles fatiguent l’œil.

Les fonctions OpenType constituent un arsenal discret mais décisif. Les chiffres tabulaires alignent impeccablement des montants, les oldstyle figures humanisent un texte éditorial, les ligatures améliorent le flux, et les fractions facilitent l’affichage des prix. Activez ces options au niveau des styles, pas au cas par cas, pour garantir la reproductibilité. Dans les interfaces complexes, prévoyez des variantes de chiffres: tabulaires pour tableaux, proportionnels pour paragraphes, monospace pour code ou identifiants.

Afin de passer de la maquette à la production sans friction, traduisez ces choix en design tokens: fontFamily, fontWeight, lineHeight, letterSpacing, fontFeatureSettings. Documentez les cas limites, comme les valeurs minimales en sombre, les états désactivés ou les libellés sur fond coloré. Testez ensuite sur des appareils réels, en particulier Android et iOS, où le rendu des polices diffère sensiblement. Ce cycle style → token → preview évite les surprises au moment du handoff et garantit que l’intention typographique survive au code.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *