Typographie - Style de Canada.ca: Conception de Canada.ca

Obligatoire

Les directives concernant la typographie sont obligatoires pour toutes les pages.

Éléments obligatoires du système de conception

Les polices doivent être harmonisées dans tout le site Canada.ca, et elles doivent être facilement lisibles sur tous les appareils. Utilisez une combinaison de Lato pour les en-têtes et de Noto sans pour le corps du texte.

Ordinateurs de bureau et tablettes

• H1 : Lato, 41px, caractère gras
• H2 : Lato, 39px, caractère gras
• H3 : Lato, 29px, caractère gras
• H4 : Lato, 27px, caractère gras
• H5 : Lato, 24px, caractère gras
• H6 : Lato, 22px, caractère gras
• Corps du texte : Noto sans, 20px, texte régulier

Petits appareils

• H1 : Lato, 37px, caractère gras
• H2 : Lato, 35px, caractère gras
• H3 : Lato, 26px, caractère gras
• H4 : Lato, 22px, caractère gras
• H5 : Lato, 20px, caractère gras
• H6 : Lato, 18px, caractère gras
• Corps du texte : Noto sans, 18px, texte régulier

En‑têtes pour les caractères en langues autochtones et les autres langues

Les polices Lato et Noto Sans prennent en charge une grande variété de langues et les caractères non latins. La police Noto Sans offre cependant un éventail plus large de caractères et a été conçue en fonction des polices de langues autochtones canadiennes, notamment Noto Sans Canadian Aboriginal.

Si, lorsque vous publiez du contenu dans une autre langue, Lato ne prend pas en charge les caractères des en-têtes, vous pouvez remplacer cette police par une autre qui le fait, comme Noto Sans ou Noto Sans Canadian Aboriginal.

Si cette modification précise n’est pas apportée, le style de Canada.ca demandera par défaut au navigateur de l’utilisateur d’utiliser une police disponible qui affichera les caractères correctement.

Par exemple :

Balise linguistique appliquée à une section ayant du contenu

<section lang="iu">
  <h2>ᑐᓴᒐᒃᓴᖅ</h2>
  <p>....</p>
</section>

Style CSS pour la balise linguistique

:lang(iu) {
  font-family: 'Noto Sans Canadian Aboriginal';
}
:lang(iu) :is(h1, h2, h3, h4, h5, h6) {
  font-weight: bold;
}

Liste des codes de langue ISO 639

Titre principal de la page

Lorsque l'en-tête H1 est le titre principal d'une page, il est souligné d'une barre rouge conformément à l'image de marque de Canada.ca.

Spécifications de la barre rouge (auparavant connue sous le nom de gc-thickline) :

• alignement : gauche
• couleur : #A62A1
• positionnement : .2em (7.6 px) sous l'en-tête H1
• taille : 72 px de large 6 px d'épaisseur

Longueur de la ligne

Limitez la longueur des lignes de texte à 65 caractères. Cela garantit qu'aucune ligne ne dépasse une longueur de lecture confortable.

Les mises en page peuvent comporter plus de 65 caractères. Cette restriction de longueur de ligne s'applique uniquement aux lignes de texte.

Liens

Soulignez les liens en utilisant un style de soulignement qui ignore les descendeurs.

Derniers changements

2025-11-21

Mise à jour pour ajouter les instructions sur la manière de personnaliser la typographie afin qu’elle prenne en charge d’autres langues.

2025-05-15

Mise à jour des caractéristiques typographiques en parallèle avec les activités d'alignement pour GCWeb et le Système de design GC.