L’échelle typographique organise les styles de texte et définit une hiérarchie claire qui s’étend des titres les plus marqués aux corps de texte les plus discrets.
Elle garantit une cohérence visuelle entre l'ensemble des produits, tout en offrant la flexibilité nécessaire pour s’adapter aux différents cas d'usage et contextes.
Mise à jour mineure (février 2026)
En février 2026, une modification des typographies du DSA a été réalisée. Ces changements visent à simplifier l’utilisation des styles à travers de nouveaux noms contextuels et l’ajout de styles intermédiaires.
Tableau des correspondances
Vous trouverez ci-dessous un tableau de correspondances entre les anciens et les nouveaux styles.
|
Ancienne version |
Nouvelle version |
|
4x large |
Display XL |
|
3x large |
Display M |
|
2x large |
Display S |
|
|
new Headline XL |
|
|
new Headline M |
|
x large |
Title XL |
|
|
new Title M |
|
large |
Title S |
|
|
new Title XS |
|
|
new Label L |
|
|
new Label M |
|
|
new Label S |
|
|
new Body L |
|
medium |
Body M |
|
small |
Body S |
|
x small |
Body XS |
|
2x small |
Body 2XS |
Avantages de la mise à jour
- Des composants améliorés : Certains textes de composants passaient de Cabin à Montserrat sur des tailles plus grandes, par manque d’options. Aujourd’hui, ceux-ci sont consistants sur l’ensemble des tailles.
- Des noms contextualisés : Le changement de nomenclature ajoute davantage de contexte quant à l’utilisation des différentes typographies.
- Une meilleure modularité dans les textes
- Un interlignage retravaillé : Les nouveaux interlignages s’alignent sur de bonnes pratiques d’UI afin d’améliorer et de fluidifier la lecture.
Tokens et usages
Chaque typographie possède quatre variants : normal, normal link, bold et bold link, afin de couvrir l’ensemble des besoins potentiels.
Display
À utiliser pour les messages les plus visibles et impactants de l’interface, comme les hero sections ou les pages marketing. Ces styles servent à attirer l’attention sur un contenu clé et doivent rester courts. Ils ne doivent pas être utilisés pour du contenu long ou fonctionnel.
Display XL
Famille : Montserrat
Taille : 64 px
Interligne : 120%
Variables CSS : --dsa-font-display-xl-normal, --dsa-font-display-xl-bold
Display M
Famille : Montserrat
Taille : 48 px
Interligne : 120%
Variables CSS : --dsa-font-display-m-normal, --dsa-font-display-m-bold
Display S
Famille : Montserrat
Taille : 36 px
Interligne : 120%
Variables CSS : --dsa-font-display-s-normal, --dsa-font-display-s-bold
Headline
À utiliser pour les titres principaux de pages et les grandes sections. Ils structurent l’interface et permettent d’identifier rapidement le sujet d’un écran ou d’un module important.
Headline XL
Famille : Montserrat
Taille : 32 px
Interligne : 120%
Variables CSS : --dsa-font-headline-xl-normal, --dsa-font-headline-xl-bold
Headline M
Famille : Montserrat
Taille : 28 px
Interligne : 120%
Variables CSS : --dsa-font-headline-m-normal, --dsa-font-headline-m-bold
Title
À utiliser pour les titres de sections, de sous-sections et de composants. Ces styles servent à organiser le contenu à l’intérieur d’une page et à hiérarchiser les informations.
Title XL
Famille : Montserrat
Taille : 24 px
Interligne : 130%
Variables CSS : --dsa-font-title-xl-normal, --dsa-font-title-xl-bold
Title M
Famille : Montserrat
Taille : 22 px
Interligne : 130%
Variables CSS : --dsa-font-title-m-normal, --dsa-font-title-m-bold
Title S
Famille : Montserrat
Taille : 20 px
Interligne : 130%
Variables CSS : --dsa-font-title-s-normal, --dsa-font-title-s-bold
Title XS
Famille : Montserrat
Taille : 18 px
Interligne : 130%
Variables CSS : --dsa-font-title-xs-normal, --dsa-font-title-xs-bold
Label
À utiliser pour les éléments d’interface courts, tels que les labels de champs, boutons, filtres, onglets, badges ou tags. Ils identifient des actions ou des catégories et ne doivent pas être utilisés pour des phrases complètes.
Label L
Famille : Cabin
Taille : 20 px
Interligne : 150%
Variables CSS : --dsa-font-label-l-normal, --dsa-font-label-l-bold
Label M
Famille : Cabin
Taille : 16 px
Interligne : 150%
Variables CSS : --dsa-font-label-m-normal, --dsa-font-label-m-bold
Label S
Famille : Cabin
Taille : 14 px
Interligne : 150%
Variables CSS : --dsa-font-label-s-normal, --dsa-font-label-s-bold
Body
À utiliser pour les textes de lecture et les contenus informatifs. Ces styles servent aux paragraphes, descriptions, messages d’aide et informations secondaires.
Body L
Famille : Cabin
Taille : 18 px
Interligne : 150%
Variables CSS : --dsa-font-body-l-normal, --dsa-font-body-l-bold
Body M
Famille : Cabin
Taille : 16 px
Interligne : 150%
Variables CSS : --dsa-font-body-m-normal, --dsa-font-body-m-bold
Body S
Famille : Cabin
Taille : 14 px
Interligne : 150%
Variables CSS : --dsa-font-body-s-normal, --dsa-font-body-s-bold
Body XS
Famille : Cabin
Taille : 12 px
Interligne : 130%
Variables CSS : --dsa-font-body-xs-normal, --dsa-font-body-xs-bold
Body 2XS
Famille : Cabin
Taille : 16 px
Interligne : 150%
Variables CSS : --dsa-font-body-2-xs-normal, --dsa-font-body-2-xs-bold
Responsive
Afin de garantir une expérience cohérente sur tous les écrans, les styles typographiques existants doivent être adaptés aux contraintes du mobile. Cette section propose des recommandations pour guider le choix des niveaux typographiques les plus adaptés à partir des styles utilisés sur desktop.
|
Desktop |
Mobile |
|
Display XL |
Display L |
|
Display M |
Display S |
|
Headline XL |
Headline M |
|
Title XL |
Title M |
|
Title M |
Title S |
|
Title S |
Title XS |
Fonts
Les typographies Montserrat et Cabin sont disponibles en téléchargement aux liens suivants :