1. Accueil  
  2. Bases  
  3. Niveaux de titres

Niveaux de titres

L’application d’un système de niveaux de titres permet de rendre les contenus facilement repérables et de créer une hiérarchie. Il est essentiel d’utiliser les styles du système typographique pour assurer la cohérence de toutes les plateformes gouvernementales.

Quand l’utiliser

Le titre s’affiche toujours dans le haut d’une page et n'apparaît qu’une seule fois par page. Le titre correspond au niveau H1.

Les sous-titres sont utilisés pour organiser le contenu et offrir une hiérarchie claire à l’ensemble de la page. Les niveaux de sous-titres peuvent aussi être utilisés dans les graphiques, les fenêtres de dialogue modale, les tuiles et d’autres cas d’utilisation. Les sous-titres correspondent aux niveaux H2 à H6.

Les surtitres sont facultatifs et rarement nécessaires. Ils peuvent aider à rappeler la catégorie parent d’un long formulaire ou d’un article de nouvelle, par exemple.

Comment l’utiliser

Titres

Le titre correspond au niveau H1: il est unique, clair et concis (environ 60 caractères).

Sous-titres

Dans une page de contenu, les niveaux de sous-titres doivent suivre l’ordre. Par exemple, le niveau H2 sera suivi des niveaux H3, H4 et ainsi de suite. On n'affiche pas un niveau H4 à la suite d’un niveau H2. 

Surtitres

Les surtitres sont ajoutés au-dessus du H1 pour rappeler la catégorie parent ou apporter une précision contextuelle. Ils doivent être très courts, idéalement moins de 40 caractères.

Informations techniques

Exemple

Titre de niveau 1


<h1>Titre de niveau 1</h1>

h1 {
    font-family: Roboto;
    font-size: 48px;
    line-height: 56px;
    font-weight: bold;
    color: #223654;
    margin-top: 72px;
    margin-bottom: 32px;
}

@media (max-width: 1200px) {
    h1 {
        font-family: Roboto;
        font-size: 36px;
        line-height: 40px;
        font-weight: bold;
        color: #223654;
        margin-top: 48px;
        margin-bottom: 16px;
    }
}

h1:after {
   content: "";
   display: block;
   margin: 0px;
   width: 48px;
   padding-top: 4px;
   border-bottom: 4px solid #F09686;
}

  

  

Exemple

Titre de niveau 2


<h2>Titre de niveau 2</h2>

h2 {
    font-family: Roboto;
    font-size: 35px;
    line-height: 40px;
    font-weight: bold;
    color: #223654;
    margin-top: 48px;
    margin-bottom: 16px;
}

@media (max-width: 1200px) {
    h2 {
        font-family: Roboto;
        font-size: 29px;
        line-height: 32px;
        font-weight: bold;
        color: #223654;
        margin-top: 48px;
        margin-bottom: 16px;
    }
}

  

  

Exemple

Titre de niveau 3


<h3>Titre de niveau 3</h3>

h3 {
    font-family: Roboto;
    font-size: 28px;
    line-height: 32px;
    font-weight: bold;
    color: #223654;
    margin-top: 24px;
    margin-bottom: 16px;
}

@media (max-width: 1200px) {
    h3 {
        font-family: Roboto;
        font-size: 25px;
        line-height: 32px;
        font-weight: bold;
        color: #223654;
        margin-top: 24px;
        margin-bottom: 16px;
    }
}

  

  

Exemple

Titre de niveau 4


<h4>Titre de niveau 4</h4>

h4 {
    font-family: Roboto;
    font-size: 21px;
    line-height: 24px;
    font-weight: bold;
    color: #223654;
    margin-top: 24px;
    margin-bottom: 8px;
}

  

  

Exemple

Titre de niveau 5

<h5>Titre de niveau 5</h5>

h5 {
    font-family: Roboto;
    font-size: 19px;
    line-height: 24px;
    font-weight: bold;
    color: #223654;
    margin-top: 16px;
    margin-bottom: 0px;
}

  

  

Exemple

Titre de niveau 6

<h6>Titre de niveau 6</h6>

h6 {
    font-family: Roboto;
    font-size: 16px;
    line-height: 24px;
    font-weight: bold;
    color: #223654;
    margin-top: 16px;
    margin-bottom: 0px;
}

  

  

Exemple

Surtitre


<span class="surtitre">Surtitre</span>

span.surtitre {
    font-family: Open Sans;
    font-size: 14px;
    line-height: 20px;
    font-weight: normal;
    color: #647287;
    margin-top: 0px;
    margin-bottom: 0px;
}

Paragraphes

Dans le bloc de contenu principal, les paragraphes ont une taille de 16 px autant dans le format bureau que dans le format mobile. L’interligne est de 24 px et le dégagement entre deux paragraphes est de 24 px.

Les paragraphes sont présentés de manière à ne pas dépasser une largeur d’environ 80 caractères par ligne (espaces compris) au format bureau, par souci de lisibilité.

À consulter aussi

Dernière mise à jour : 22 juin 2022