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 #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


    <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: 20px;
        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 : 24 août 2023

    Évaluation de page

    L’information sur cette page vous a-t-elle été utile?
    Avis général

    Des questions ou besoin de renseignements?

    Communiquez avec Services Québec