Typographie

Sommaire :

  1. Polices de titrages
  2. Polices de Display
  3. Polices de contenus
  4. Polices de boutons

Documentation et exemples pour les règles typographiques utilisées dans le design system.

Polices de titrages

Les titrages désignent les éléments HTML <h1>, <h2>, <h3>, <h4>, <h5> et <h6>.

Recommandations générales :

  • Il est recommandé de n’utiliser qu’un seul <h1> par page, sauf contre-indication (une modale par exemple porte un <h1>).
  • La hiérarchie des titres et sous-titres (de <h2> vers <h6>) doit être respectée et ordonnée pour structurer la page.
    Exemple : Ne pas intégrer un <h3> sous un <h1> sans un <h2> entre ces deux éléments.
  • L’interlignage entre les titres est fixé à ×1.2 la taille du texte courant.

Familles de police

La police utilisée pour les niveaux de titres est Marianne.

Marianne, Helvetica, Arial, sans-serif;

De la même manière, il conviendra de lier les versions de fichiers suivantes pour les variantes : Marianne-regular, Marianne-italic, Marianne-lightitalic, Marianne-bold, Marianne-bolditalic.

Tailles de police

La taille des niveaux de titres (sur desktop) est :

  • .t1 = 1.5rem ±24px
  • .t2 = 1.125rem ±18px
  • .t3 = 1rem ±16px
  • .t4 = 0.875rem ±14px
  • .t5 = 0.813rem ±13px

Exemples :

Je suis un titre H1

Je suis un titre H2

Je suis un titre H3

Je suis un titre H4

Je suis un titre H5
<h1 class="t1">Je suis un titre H1</h1>
<h2 class="t2">Je suis un titre H2</h2>
<h3 class="t3">Je suis un titre H3</h3>
<h4 class="t4">Je suis un titre H4</h4>
<h5 class="t5">Je suis un titre H5</h4>

Graisse et italique

Les niveaux de graisse utilisés pour les différents niveaux de titres :

  • 400 pour tous les niveaux de titres
Les tailles de titres sont automatiquement Responsive : elles se réduisent en fonction de la taille de l'écran.

Polices de Display

Les éléments de titre traditionnels sont conçus pour fonctionner au mieux dans le contenu de votre page.

Pour des titres plus grands (hero, bandeaux, etc.), il existe des classes .display-1 à .display-4.

Exemples :

Je suis un titre Display-1

Je suis un titre Display-2

Je suis un titre Display-3

Je suis un titre Display-4

<h1 class="display-1">Je suis un titre Display-1</h1>
<h1 class="display-2">Je suis un titre Display-2</h1>
<h1 class="display-3">Je suis un titre Display-3</h1>
<h1 class="display-4">Je suis un titre Display-4</h1>

La taille des titres Display (sur desktop) est :

  • .display-1 = 2.25rem ±36px
  • .display-2 = 2rem ±32px
  • .display-3 = 1.75rem ±28px
  • .display-4 = 1.625rem ±26px
Les tailles de titres "Display" sont automatiquement Responsive : elles se réduisent en fonction de la taille de l'écran.

Polices de contenus

La police employée sur les textes de contenu (appelée aussi “texte de labeur”) est une police dite “système”, commune et présente sur chaque OS sans nécessiter de téléchargement.

Recommandations générales :

  • La taille de police par défaut est de 0.875rem soit un équivalent de 14px.
  • L’interlignage du document est fixée à ×1.5 la taille du texte courant.

Famille de police

La famille de police pour les contenus correspond à la police par défaut sur le système d’exploitation du visiteur (system-ui).

-apple-system, BlinkMacSystemFont, "Segoe UI", Marianne, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
La syntaxe ci-dessus existe aujourd'hui sous forme simplifiée font-family: system-ui; mais malheureusement moins compatible sur les anciens navigateurs.

Tailles de police

Les classes utilitaires .t1 à .t5 peuvent être utilisées pour les cas où une taille de texte doit "correspondre à un niveau de titre" mais où il n'est pas possible d'utiliser l'élément HTML correspondant.

Par exemple :

Je suis un Titre principal

Je suis un Titre de niveau 2 qui s'affiche comme un H1

Je suis un paragraphe qui s'affiche comme un H3

<h1>Je suis un Titre principal</h1>
<h2 class="t1">Je suis un Titre de niveau 2 qui s'affiche comme un H1</h2>
<p class="t3">Je suis un paragraphe qui s'affiche comme un H3</p>

Graisse et italique

La graisse utilisée pour les textes de contenu :

  • 400 pour le corps de texte
  • 700 pour les contenus en gras

Polices de boutons

Les boutons désignent les éléments HTML <button> de classe .btn (ainsi que les éléments devant avoir l’aspect d’un bouton).

Famille de police

La police utilisée pour les boutons est Marianne.

font-family: Marianne, Helvetica, Arial, sans-serif;

Tailles et graisse

La taille de police d’un bouton est .t5 (soit font-size: 0.813rem; ±13px)

La graisse utilisée pour les boutons est font-weight: 500.