Système de design GCStyles
Système de design GC Démarrer Aperçu des modèles de pagePage de base Aperçu des composantsAlerteAvisBarre de navigation latéraleBarre de navigation supérieureBascule de langueBoutonBoutons radioCarteCases à cocherChamp de dateChamp de saisieChemin de navigationConteneurDate de modificationDétailsEn-têteGrilleIcôneIndicateur d'étapeJeu de champsLienMasquage accessibleMenu thématiqueMessage d'erreurPaginationPied de pageRechercheRésumé des erreursSélectionSignatureTableauTéléverseur de fichiersTexteTitreZone de texte Aperçu des raccourcis CSS Réinitialisation des styles Mise en page réactiveÉtat Dimensionnement de la boîteDimensionnement du conteneurAffichageDébordementPositionVisibilité PoliceFamille de policeTaille de policeStyle de policeÉpaisseur de policeHauteur de ligneCouleur de lienTaille de lienDécoration de texte de lienStyle de listeAlignement de texteCouleur de texteDébordement de texteTransformation de texteSaut de mot MargeMarge intérieure Alignement de contenuAlignement des élémentsAlignement individuelÉlément flexibleDirection de l’élément flexibleÉlargissement de l’élément flexibleRétrécissement de l’élément flexibleHabillage de l’élément flexibleDégagementColonnes de grilleLignes de grilleJustification de contenuJustification des élémentsJustification individuelleOrdreAgencement de contenuAgencement des élémentsAgencement individuel Couleur de l'arrière-planCouleur de la bordureRayon de la bordureStyle de la bordureLargeur de la bordure Noms des icônesTaille de l'icôneImage CurseurÉvénements de pointeurTransition Aperçu des stylesUnités de styleCouleurEspacementTypographie Nous contacterS'impliquerTrouvez une démo

Unités de style typographiques

Les unités de style typographiques comprennent le style, la disposition et l’apparence des lettres, chiffres et symboles.

Typographie et accessibilité

Les composants de Système de design GC sont conformes au niveau AA des Règles pour l’accessibilité des contenus Web 2.1 (WCAG 2.1) (site Web anglais) en matière d’espacement du texte et au niveau AAA en matière de présentation visuelle.

Rythme vertical et tailles d’espacement en rem

L’espacement de la typographie dans Système de design GC est basé sur le rythme vertical et calculé en fonction d’une taille de base. Le rythme vertical est un alignement du texte selon des lignes horizontales espacées de manière égale pour former des motifs récurrents. Un espacement vertical uniforme aide à l’interprétation, la lecture et la compréhension du contenu. Les espacements sont configurés au moyen d’unités rem. Toute valeur typographique et d’espacement s’exprime en fonction d’une taille de base de 1.25 rem (20 px).

Unités de style typographiques globales

Titres

Les balises de titre pour les titres et sous-titres donnent la structure à une page et servent à disposer le contenu. Elles aident également à la navigation, surtout pour les gens qui ont recours aux technologies d’assistance.
  • Tout titre et sous-titre doit être inséré à l’aide d’une balise (<h1> - <h6>).
  • Commencez le contenu principal avec un titre H1. N’utilisez qu’un seul titre H1 par page.
  • Organisez les niveaux de titre par ordre numérique. H1 est suivi de H2, qui est suivi de H3 et ainsi de suite.
  • Évitez de sauter des niveaux de titre hiérarchiques.
  • Assurez-vous que la taille de police et la hauteur de ligne correspondent (taille de police H1 avec la hauteur de ligne H1, etc.).
  • Employez des titres pour les appels à l’action pour accentuer du contenu.
  • Assurez-vous que les titres sont uniques et qu’ils indiquent clairement la nature du contenu qui suit.
AperçuNom de l'unité de styleValeur
Titre 1 --gcds-font-h1 700 2.56rem/117% 'Lato', sans-serif
Titre 2 --gcds-font-h2 700 2.44rem/123% 'Lato', sans-serif
Titre 3 --gcds-font-h3 700 1.81rem/137% 'Lato', sans-serif
Titre 4 --gcds-font-h4 700 1.69rem/133% 'Lato', sans-serif
Titre 5 --gcds-font-h5 700 1.5rem/133% 'Lato', sans-serif
Titre 6 --gcds-font-h6 700 1.38rem/145% 'Lato', sans-serif
Remarque : La propriété de la police représente à la fois l’épaisseur, la taille/la hauteur de ligne et la famille de police.

Texte

  • Pour la taille de police, conservez la longueur d’une ligne à moins de 65 caractères pour assurer une lecture aisée et accessible.
  • Insérez la valeur css 65ch (--gcds-text-character-limit) ou moins pour régler la largeur maximale de vos paragraphes.
AperçuNom de l'unité de styleValeur
Texte --gcds-font-text 400 1.25rem/160% 'Noto Sans', sans-serif
Petit texte --gcds-font-text-small 400 1.13rem/155% 'Noto Sans', sans-serif

Familles de police

Les titres font appel à la police « Lato ». Les paragraphes et autres éléments textuels se servent de la police « Noto Sans ». La famille de police comprend des valeurs de rechange. Les valeurs de rechange sont seulement utilisées pour une famille de police lorsqu’une police n’est pas disponible.
  • N’utilisez les unités de style titre que pour les titres. Tout autre contenu peut utiliser la police Texte.
  • Utilisez la famille de police Texte pour la plupart de votre contenu.
  • Lorsque vous citez des éléments de code, vous pouvez insérer vos exemples de code avec la famille de police Espacement fixe.
AperçuNom de l'unité de styleValeur
Titre --gcds-font-families-heading 'Lato', sans-serif
Texte --gcds-font-families-body 'Noto Sans', sans-serif
Espacement fixe --gcds-font-families-monospace 'Noto Sans Mono', monospace
icons --gcds-font-families-icons 'gcds-icons'

Épaisseurs de police

  • Limitez le nombre de modifications de l’épaisseur de police dans votre conception afin de ne pas nuire au contraste. N’utilisez que deux ou trois épaisseurs de police en assurant un maximum de contraste.
  • Employez différentes épaisseurs de police pour accentuer des mots dans un tableau, en début de paragraphe ou dans de longs blocs de texte lorsque les autres options de titre et de style ne sont pas appropriées.
  • Veillez à accentuer des éléments de façon accessible, car plusieurs technologies d’assistance ne tiennent pas compte de l’épaisseur de la police.
  • Plutôt que de modifier l’épaisseur de la police, envisagez d’utiliser des puces ou des alinéas pour découper le texte.
AperçuNom de l'unité de styleValeur
Maigre --gcds-font-weights-light 300
Régulier --gcds-font-weights-regular 400
Moyen --gcds-font-weights-medium 500
Semi-gras --gcds-font-weights-semibold 600
Gras --gcds-font-weights-bold 700

Caractères gras

  • Conservez le réglage des caractères gras par défaut pour les titres.
  • Une surutilisation de texte en caractères gras peut rendre difficile le traitement cognitif pour certains lecteurs.

Italiques

  • Mettez toute référence à un projet de loi canadien en caractères italiques, par example, Loi canadienne sur l’accessibilité.
  • N’utilisez les caractères en italiques que pour de courts passages. Un gros volume de texte en caractères italiques peut rendre difficile le traitement cognitif pour certains lecteurs.
Aidez-nous à nous améliorer Vous avez des questions ou des demandes? Faites-nous part de vos commentaires à l'aide de notre formulaire de contact. Quelque chose ne va pas? Signalez-le sur GitHub en créant un compte. Vous pourrez accéder aux réponses de l'équipe, suivre les progrès réalisés concernant votre problèmes et voir les problèmes signalés par d'autres personnes. Fournir des commentaires Signaler un problème sur GitHub
2025-12-03