Bases
Niveaux de titres
Dans cette page :
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 #e58271;
}
Exemple
Titre de niveau 2
<h2>Titre de niveau 2</h2>
h2 {
font-family: Roboto;
font-size: 36px;
line-height: 40px;
font-weight: bold;
color: #223654;
margin-top: 48px;
margin-bottom: 16px;
}
@media (max-width: 1200px) {
h2 {
font-family: Roboto;
font-size: 28px;
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
Exemple
Titre de niveau 5
Exemple
Titre de niveau 6
Exemple
Surtitre
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 110 caractères par ligne (espaces compris, ce qui correspond à une largeur de 825 px) au format bureau, par souci de lisibilité.
Exemple
Paragraphe
À consulter aussi
Dernière mise à jour : 12 février 2024