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

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 de caractères non latins. Cependant, Noto Sans dispose d’une plus grande gamme de familles de polices supplémentaires qui peuvent être ajoutées pour prendre en charge des types de caractères additionnels.

La famille de polices Noto Sans Canadian Aboriginal est incluse par défaut dans la typographie de Canada.ca.

Lorsque vous publiez du contenu comportant des types de caractères non pris en charge, vous pouvez choisir d’ajouter un ensemble de polices Noto Sans pour les caractères dont vous avez besoin, tant pour les en-têtes que pour le contenu, selon les besoins.

Par défaut, sans cette modification spécifique, le style de Canada.ca indique 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="zh-Hans">
  <h2>标题</h2>
  <p>....</p>
</section>

Style CSS pour la balise linguistique

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

Les développeurs devront mettre à disposition le jeu de langues Noto Sans. Dans cet exemple, il s’agirait de :

• Noto Sans Simplified Chinese (en anglais seulement)

Ressources de mise en œvre :

• Noto Sans : familles de polices pour les caractères supplémentaires (en anglais seulement)
• 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

2026-01-29

Mise à jour pour refléter l'ajout de la famille de polices Noto Sans Canadian Aboriginal à la typographie de Canada.ca

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.