Conseils
Il est essentiel d’opter pour la bonne typographie dans les sites Web et les applications, car elle influe sur la lisibilité et l’expérience globale de l’utilisateur. Les styles et les normes de typographie du système de conception du GNB ont été conçus pour tenir compte des considérations suivantes :
- Lisibilité : Une bonne typographie permet de s’assurer que le texte est facile à lire. Les polices, les tailles de polices, l’espacement entre les lignes et le contraste utilisés sont conçus pour maximiser la lisibilité de nos sites Web et applications.
- Hiérarchie : La typographie aide à créer une hiérarchie visuelle de l’information. Les utilisateurs ont ainsi plus de facilité à parcourir et à trouver les informations recherchées. Nos styles de titres ont été définis de manière à créer une hiérarchie claire qui peut être utilisée pour attirer l’attention de l’utilisateur sur les informations les plus importantes et l’aider à naviguer plus efficacement.
- Image de marque : La typographie joue un rôle important dans l’image de marque, car elle crée une identité visuelle unique au site Web ou à l’application. Notre typographie communique le ton, la voix et la personnalité de la marque du gouvernement provincial.
- Accessibilité : Une bonne typographie permet de rendre un site Web ou une application plus accessible aux personnes souffrant d’incapacités visuelles ou de difficultés de lecture. L’utilisation de polices de grandes tailles et d’un contraste élevé peut par exemple faciliter la lecture du texte. L’accessibilité joue un rôle clé dans la conception de nos styles et de nos normes typographiques.
Familles de polices
Le système de conception du GNB utilise les polices DM Serif Text et Public Sans. Ces polices de qualité sont gratuites, accessibles en source libre et à la portée de toutes les équipes de l’organisation. Vous pouvez librement utiliser ces polices dans tous les produits et les services offerts par le gouvernement provincial.
DM Serif Text
DM Serif Text est appliquée aux styles des en-têtes de présentation des bannières héroïques et est occasionnellement utilisée dans
les
citations. Elle doit être utilisée avec réserve et ne doit pas être appliquée à plus d’un titre
<h1> ou d’une citation à la fois. Nous utilisons Regular 400 et Italic 400.
Obtenir la famille de polices DM Serif Text
Public Sans
Public Sans est appliquée à tous les autres titres et contenus. Elle a été conçue dans un souci d’accessibilité et de lisibilité. Nous utilisons Regular 400, Italic 400, Medium 500, Medium 500 Italic, Bold 700 et Bold 700 Italic.
Obtenir la famille de polices Public Sans
Ajouter des polices au moyen de l’interface API Google Fonts
Vous pouvez utiliser l’interface API Google Fonts pour ajouter des polices à votre projet. Pour
intégrer les polices, copiez ce code dans l’élément HTML <head> :
HTML
<!-- Google Web Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Text:ital@0;1&family=Public+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
Héberger les polices
Si vous devez héberger les polices localement, téléchargez notre fichier de polices Web pour l’inclure au projet.
Styles et propriétés des titres
Le système de conception du GNB utilise cinq niveaux de titres,de <h1> à
<h5>. Les titres des pages correspondent au niveau <h1>, et
les sous-titres, aux niveaux <h2> à <h5>. Il est déconseillé
d’imbriquer les titres sur plus de quatre niveaux de profondeur (<h4>), car cela
peut nuire à la lisibilité de la page.
À faire
- Utilisez un seul titre
<h1>par page. - Utilisez les titres
<h2>à<h5>pour structurer le contenu. - Structurez les titres dans l’ordre approprié. Par exemple, utilisez un titre
<h3>sous un titre<h2>, et un titre<h4>sous un titre<h3>. - Si vous devez réduire la taille d’un titre pour des raisons esthétiques, utilisez le
niveau de titre HTML approprié et ajustez-en la taille avec une classe de titre
(
.h3).
À ne pas faire
- N’utilisez pas plus d’un titre
<h1>par page et n’appliquez pas de titre<h1>à d’autres éléments que le titre de la page ou de l’application. - N’utilisez pas de titres
<h6>, car ils sont trop petits. - Ne sautez pas de niveaux de titres dans le HTML. Par exemple, évitez d’insérer un
titre
<h3>sous un titre<h1>sans d’abord inclure un titre<h2>. - N’appliquez pas d’autres couleurs ou effets de texte que ceux hérités par défaut d’un composant parent.
Tailles de police
Notre échelle typographique est d’abord conçue pour les appareils mobiles. La taille de base est fixée à 1 rem (16 px). Sur les tablettes et les plus grands écrans, la taille de police passe de 1 rem (16 px) à 1,125 rem (18 px) pour en améliorer la lisibilité et répondre aux besoins des utilisateurs.
Les titres utilisés sont réactifs. Conformément à notre échelle typographique, les titres affichés
sur les appareils mobiles sont inférieurs d’une taille aux titres affichés sur les tablettes et les
plus grands écrans. Par exemple : la taille d’un titre <h1> sur un appareil
mobile est fixée à 2 rem (32 px). Cela correspond à un titre <h2> sur une
tablette ou un plus grand écran, qui affiche également une taille de 2 rem (32 px).
| Style | Balise | Classe | Propriétés |
|---|---|---|---|
Titre 1 |
<h1>
|
.h1
|
Famille de polices : Public Sans Taille de police : 2rem (32px) / 3rem (48px) Poids de police : 700 (gras) Hauteur de ligne : 1.25 (40px) / 1.25 (60px) Marge supérieure : 4rem (64px) |
Titre 2 |
<h2>
|
.h2
|
Famille de polices : Public Sans Taille de police : 1.5rem (24px) / 2rem (32px) Poids de police : 700 (gras) Hauteur de ligne : 1.25 (30px) / 1.25 (40px) Marge supérieure : 3rem (48px) |
Titre 3 |
<h3>
|
.h3
|
Famille de polices : Public Sans Taille de police : 1.25rem (20px) / 1.5rem (24px) Poids de police : 700 (gras) Hauteur de ligne : 1.25 (25px) / 1.25 (30px) Marge supérieure : 2rem (32px) |
Titre 4 |
<h4>
|
.h4
|
Famille de polices : Public Sans Taille de police : 1.125rem (18px) / 1.25rem (20px) Poids de police : 700 (gras) Hauteur de ligne : 1.25 (22.5px) / 1.25 (25px) Marge supérieure : 1.5rem (24px) |
Titre 5 |
<h5>
|
.h5
|
Famille de polices : Public Sans Taille de police : 1rem (16px) / 1.125rem (18px) Poids de police : 700 (gras) Hauteur de ligne : 1.25 (20px) / 1.25 (22.5px) Marge supérieure : 1.5rem (24px) |
HTML
<h1>En-tête 1</h1>
<h2>En-tête 2</h2>
<h3>En-tête 3</h3>
<h4>En-tête 4</h4>
<h5>En-tête 5</h5>
Styles et propriétés des en-têtes de présentation
L’en-tête de présentation est un ensemble de classes qui peuvent être ajoutées à la balise HTML
<h1> pour ajuster la taille des titres de page. Dans certains cas, la taille par
défaut du titre <h1> Si cela se produit, utilisez d’autres options de taille pour
mieux l’adapter au contexte et au contenu. Les tailles des en-têtes de présentation sont réactives
et s’ajustent avec fluidité sur les appareils mobiles.
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
| Style | Balise | Classe | Propriétés |
|---|---|---|---|
En-tête de présentation 1 |
<h1>
|
.display-1
|
Famille de polices : DM Serif Text |
En-tête de présentation 2 |
<h1>
|
.display-2
|
Famille de polices : DM Serif Text |
En-tête de présentation 3 |
<h1>
|
.display-3
|
Famille de polices : DM Serif Text |
HTML
<h1 class="display-1">Affichage 1</h1>
<h1 class="display-2">Affichage 2</h1>
<h1 class="display-3">Affichage 3</h1>
Introduction
L’introduction est une ligne secondaire de texte qui s’affiche sous le titre <h1>
dans le composant de la bannière Web. Elle fournit une courte
introduction ou un résumé des informations les plus importantes de la page. Dans la bannière Web,
les styles d’introduction sont appliqués automatiquement à toute balise <p> du
composant. Pour utiliser les styles d’introduction en dehors de la bannière Web, appliquez la classe
.lead à la balis <p> du HTML. Les introductions doivent toujours
être insérées directement sous un titre.
| Style | Balise | Classe | Propriétés |
|---|---|---|---|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, placerat malesuada odio, nec finibus ex suscipit. |
<p>
|
.lead
|
Famille de polices : Public Sans Taille de police : 1.25rem (20px) / 1.375rem (22px) Poids de police : 400 (régulier) Hauteur de ligne : 1.5 (30px) / 1.5 (33px) Marge supérieure : 0rem (0px) Marge inférieure : 1.5rem (24px) |
HTML
<p class="lead">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, placerat malesuada odio, nec finibus ex suscipit.
</p>
Paragraphe
La balise de paragraphe <p> est un élément HTML essentiel et sert à structurer le
texte.
| Style | Balise | Propriétés |
|---|---|---|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, placerat malesuada odio, nec finibus ex suscipit. |
<p>
|
Famille de polices : Public Sans Taille de police : 1rem (16px) / 1.125rem (18px) Hauteur de ligne : 1.5 (24px) / 1.5 (27.5px) Poids de police : 400 (régulier) Marge supérieure : 0rem (0px) Marge inférieure : 1.5rem (24px) |
HTML
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, placerat malesuada odio, nec finibus ex suscipit.
</p>
Règle horizontale
La règle horizontale <hr /> est utilisée pour créer une ligne ou un séparateur
horizontal entre les contenus.
HTML
<hr />
Texte de petite taille
La balise <small> peut être utilisée pour réduire la taille de la police de
caractères, notamment dans les légendes, les notes de bas de page et les citations des sources.
| Style | Balise | Propriétés |
|---|---|---|
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
<small>
|
Taille de police : 0.875rem (14px) |
HTML
<small>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</small>
Liste non ordonnée
La liste non ordonnée <ul> est utilisée pour énumérer des éléments sans ordre ou
séquence particulière, comme dans une liste à puces.
- Lorem ipsum dolor
- Consectetur adipiscing
- Quisque eu ipsum fringilla
HTML
<ul>
<li>Lorem ipsum dolor</li>
<li>Consectetur adipiscing</li>
<li>Quisque eu ipsum fringilla</li>
</ul>
Classes utilitaires
Les classes utilitaires sont appliquées à la balise <ul>. Elles permettent
d’ajuster l’espacement sous une liste ou entre les éléments d’une liste.
| Classe | Utiliser quand | Propriétés |
|---|---|---|
.list-sm
|
Il faut ajouter plus d’espace sous une liste pour la séparer du prochain élément de la page. |
Marge supérieure : 1rem (16px) Marge inférieure : 2rem (24px) |
.list-md
|
Les éléments de la liste sont longs et continuent sur la ligne suivante. Il faut ajouter plus d’espace pour séparer les éléments les uns des autres. |
Marge supérieure : 1rem (16px) Marge inférieure : 2rem (24px) Espacement des éléments de la liste : 0.5rem (8px) |
.list-lg
|
Les éléments de la liste s’étendent sur plusieurs lignes ou forment des paragraphes. Il faut ajouter d’espace pour séparer les éléments les uns des autres. |
Marge supérieure : 1rem (16px) Marge inférieure : 2rem (24px) Espacement des éléments de la liste : 1rem (16px) |
HTML
<ul class="list-lg">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed placerat malesuada odio, nec finibus ex suscipit a. </li>
<li>Cras vel odio euismod, accumsan massa eu, posuere purus. Donec in mollis dolor.</li>
<li>Cras in scelerisque elit, eu laoreet nisi. Aenean ut lectus et urna hendrerit blandit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </li>
</ul>
Liste ordonnée
La liste ordonnée <ol> est utilisée pour créer une liste d’éléments classés par
ordre numérique.
- Lorem ipsum dolor
- Consectetur adipiscing
- Quisque eu ipsum fringilla
HTML
<ol>
<li>Lorem ipsum dolor</li>
<li>Consectetur adipiscing</li>
<li>Quisque eu ipsum fringilla</li>
</ol>
Jetons de famille de polices
Vous pouvez intégrer des jetons de conception de famille de polices aux fichiers CSS ou SASS supplémentaires que vous créez afin d’assurer la cohérence avec le système de conception.