Typographie

Trois familles, trois rôles

Il vous faut les bons.

Aa Bb Cc Éé 0123456789 — « € % → »

Police: Chakra Petch
Rôle: Titres de la landing, chiffres clés
Graisses: 500 · 600 · 700

Commerce actif et très bien noté, mais son site lui fait perdre des clients.

Aa Bb Cc Éé 0123456789 — « € % → »

Police: DM Sans
Rôle: Texte courant, interface de l’application
Graisses: 400 · 500 · 600 · 700

OPPORTUNITÉ N°1 CETTE SEMAINE · 87 / 100

Aa Bb Cc Éé 0123456789 — « € % → »

Police: DM Mono
Rôle: Libellés en capitales, navigation, données, code
Graisses: 400 · 500

	Landing	Application
Titres	Chakra Petch, graisse 600–700, interlettrage légèrement resserré	DM Sans, graisse 600
Texte courant	DM Sans 400	DM Sans 400
Libellés, navigation	DM Mono en capitales, interlettrage large (≈ 0,1 em), très petit corps	DM Sans 500 ; petites capitales ponctuelles (`overline`)
Chiffres clés	Chakra Petch (ex. le score « 87 »)	DM Sans 600, chiffres tabulaires (alignés en colonne)
Code, données	DM Mono	DM Mono

Les trois familles sont libres de droits (SIL Open Font License). La documentation les héberge elle-même ; l’application et la landing les chargent depuis Google Fonts.

L’échelle (application)

Tailles relevées dans les tokens de l’application (--text-*), en rem (1 rem = 16 px) :

--text-2xs.6875rem · 11pxProspects qualifiés

--text-xs.75rem · 12pxProspects qualifiés

--text-13.8125rem · 13pxProspects qualifiés

--text-sm.875rem · 14pxProspects qualifiés

--text-md.9375rem · 15pxProspects qualifiés

--text-base1rem · 16pxProspects qualifiés

--text-lg1.125rem · 18pxProspects qualifiés

--text-xl1.25rem · 20pxProspects qualifiés

--text-2xl1.5rem · 24pxProspects qualifiés

--text-3xl2rem · 32pxProspects qualifiés

--text-4xl2.5rem · 40pxProspects qualifiés

--text-5xl3.5rem · 56pxProspects qualifiés

Usages courants : --text-sm (14 px) pour l’interface dense, --text-base (16 px) pour la lecture, --text-3xl (32 px) pour les indicateurs (KPI), --text-13 et --text-2xs pour les libellés de champ et les surtitres.

Règles typographiques

Le français a ses règles ; l’interface et la landing les respectent déjà :

Règle	Exemple
Guillemets français, avec espaces	« À relire »
Apostrophe typographique	l’email, d’abord (et non l’email)
Espace insécable avant `: ; ! ?` et dans les nombres	Score : 87 · 1 600 €
Virgule décimale	4,8 / 5 · 27,99 €
Symbole euro après le nombre	40 €
Points de suspension en un caractère	Recherche en cours…
Pas de capitale après deux-points en milieu de phrase	Rayon : 15 km