Communications numériques gouvernementales Beta
  1. Accueil  
  2. Système de design gouvernemental  
  3. Bases  
  4. Niveaux de titres

Système de design gouvernemental

Niveaux de titres

Les niveaux de titres sont utilisés pour organiser le contenu et offrir une hiérarchie claire à l’ensemble de la page.

Les titres sont d’une longueur d’environ 60 caractères. Ils doivent être précis, riches en mots-clés, concis et informatifs.

Les termes pertinents, soit les mots-clés susceptibles d’être recherchés, sont placés au début des titres et des sous-titres; ceux-ci ne doivent pas commencer par un déterminant. L’abréviation, sauf si elle est mieux connue du public cible que l’appellation au long, n’est pas utilisée, ni la ponctuation.

Exemple

Titre de niveau 1


CSS au format bureau
Font-family : Roboto
Font-size : 2.5rem
Font-weight : bold
Color : #223654

CSS au format mobile
Font-family : Roboto
Font-size : 2rem
Font-weight : bold
Color : #223654

Exemple

Titre de niveau 2


CSS au format bureau
Font-family : Roboto
Font-size : 2rem
Font-weight : bold
Color : #223654

CSS au format mobile
Font-family : Roboto
Font-size : 1.75rem
Font-weight : bold
Color : #223654

Exemple

Titre de niveau 3


CSS au format bureau
Font-family : Roboto
Font-size : 1.75rem
Font-weight : 600
Color : #223654

CSS au format mobile
Font-family : Roboto
Font-size : 1.5rem
Font-weight : 600
Color : #223654

Exemple

Titre de niveau 4


CSS au format bureau
Font-family : Roboto
Font-size : 1.3125rem
Font-weight : bold
Color : #223654

CSS au format mobile
Font-family : Roboto
Font-size : 1.3125rem
Font-weight : bold
Color : #223654

Exemple

Titre de niveau 5

CSS au format bureau
Font-family : Roboto
Font-size : 1.125rem
Font-weight : bold
Color : #223654

CSS au format mobile
Font-family : Roboto
Font-size : 1.125rem
Font-weight : bold
Color : #223654

Exemple

Titre de niveau 6

CSS au format bureau
Font-family : Roboto
Font-size : 1rem
Font-weight : 600
Color : #223654

CSS au format mobile
Font-family : Roboto
Font-size : 1rem
Font-weight : 600
Color : #223654

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 25 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 95 caractères par ligne (espaces compris) au format bureau, par souci de lisibilité.

Dernière mise à jour : 10 juillet 2020