Typographie

Une échelle typographique claire pour assurer la hiérarchie visuelle et la lisibilité sur tous nos produits.

Police principale

Lato est utilisée sur l'ensemble des produits. Elle est chargée via Google Fonts avec toutes ses graisses disponibles.

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

Lato Voir sur Google Fonts

Token : var(--ds-font-family) ne jamais déclarer la font directement, toujours passer par le token.

--ds-font-size-heading 32px h1 Titres principaux de page

Tableau de bord

--ds-font-size-title 24px h2 Titres de section ou de modal

Informations générales

--ds-font-size-large 18px h3 / p Sous-titres, textes d'introduction

Gérez vos alertes et notifications en temps réel.

--ds-font-size-body 14px p / span Contenu principal, valeurs, descriptions

Le monitoring a détecté 3 anomalies sur le serveur principal depuis ce matin.

--ds-font-size-small 12px span / label Labels, badges, métadonnées, timestamps

Dernière mise à jour · il y a 5 minutes · par admin@sudalys.fr

3 graisses autorisées. On ne mélange pas les poids sans raison hiérarchique.

400 Regular Contenu courant, descriptions, paragraphes Corps de texte, helpers, placeholders

600 Semi-bold Labels, titres de composants Labels de formulaires, titres de cards

700 Bold Titres principaux, headings Headings, titles, éléments forts

Règle

Même usage = même taille. Un label de formulaire est toujours en small.

Règle

Taille minimale : 12px. En dessous, le texte devient illisible sur mobile.

Règle

La hiérarchie est visuelle ET sémantique utiliser les bons tags HTML (h1, h2, p...).

Règle

Limiter à 3 tailles différentes par page. Au-delà, la hiérarchie devient confuse.