Fondamentaux

Notre charte graphique met en place des normes
à respecter pour un meilleur fonctionnement du
Design System.

L'échelle de typographie va des titres imposants aux corps de texte discrets. Elle garantie une cohérence visuelle à travers les différents produits tout en offrant la flexibilité nécessaire pour adapter le design à divers contextes.

Styles de texte

Vous trouverez si dessous, les principaux types de texte que vous pouvez utiliser. D'autres options sont néanmoins disponibles dans le système de design pour vous laisser plus de liberté.

Titre écran Utilisé pour le titre de l'écran principal, il ne doit être utilisé qu'une seule fois par écran. → Il se marie avec un grand corps.		2x large - bold Famille : Montserrat Graisse : Bold Taille : 36 px Interligne : 130% --dsa-font-2x-large-bold

Titre de section Titre permettant de créer des sections dans la page. → Il se marie avec un grand corps.		x large - bold Famille : Montserrat Graisse : Bold Taille : 24 px Interligne : 130% --dsa-font-x-large-bold

Titre de sous-section Conçu pour les sections dans les sections afin d'augmenter la hiérarchie des informations.		large - bold Famille : Montserrat Graisse : Bold Taille : 20 px Interligne : 130% --dsa-font-large-bold

Body Utilisé pour les paragraphes. → Il se marie bien avec un titre écran ou un titre de section.		medium - regular Famille : Cabin Graisse : Regular Taille : 16 px Interligne : 130% --dsa-font-medium-normal

Body bold Souligne et met en évidence les mots importants ou les petits titres.		medium - bold Famille : Cabin Graisse : Bold Taille : 16 px Interligne : 130% --dsa-font-medium-bold

Body small Lorsque vous avez besoin de quelque chose d'un peu plus petit que le grand corps, ou pour compléter un grand corps.		small - regular Famille : Cabin Graisse : Regular Taille : 16 px Interligne : 130% --dsa-font-small-normal

Body small - bold Souligne et met en évidence les mots importants ou les petits titres.		small - bold Famille : Cabin Graisse : Bold Taille : 14 px Interligne : 130% --dsa-font-small-bold

Grand bouton Utilisé seulement pour les boutons de taille large.		button - regular Famille : Cabin Graisse : Bold Taille : 20 px Interligne : auto

Bouton Utilisé seulement pour les boutons de taille medium.		button - regular Famille : Cabin Graisse : Bold Taille : 16 px Interligne : auto

Petit bouton Utilisé seulement pour les boutons de taille small.		button - regular Famille : Cabin Graisse : Bold Taille : 14 px Interligne : auto

Grand lien À utiliser pour un lien dans avec un paragraphe en grand corps, ou lorsque vous avez besoin d'un grand lien.		medium - regular - underline Famille : Cabin Graisse : Regular Taille : 16 px Interligne : 130%

Lien À utiliser pour un lien dans avec un paragraphe en corps, ou lorsque vous avez besoin d'un lien.		small - regular - underline Famille : Cabin Graisse : Regular Taille : 14 px Interligne : 130%

Légende A utiliser pour annoter les images.		small - regular - underline Famille : Cabin Graisse : Regular Taille : 12 px Interligne : 130%

Téléchargement

Les typographies Montserrat et Cabin sont disponibles en téléchargement sur les liens suivants :

Montserrat - Google Fonts

The old posters and signs in the traditional Montserrat neighborhood of Buenos Aires inspired Julieta Ulanovsky to design this typeface and rescue the beauty of

Cabin - Google Fonts

Cabin is a humanist sans inspired by Edward Johnston's and Eric Gill's typefaces, with a touch of modernism. Cabin incorporates modern proportions, optical adju