Utilisez toujours une version modifiée de la police Raleway pour les titres, et la police Open Sans pour les en‑têtes et le corps du texte.

Principe directeur : Faire preuve de cohérence.

Avant de commencer – installez la police « Raleway modified »

Pour faciliter la lecture, nous avons modifié les « w » et les chiffres de la police Raleway normale. Ainsi, la première chose à faire avant d’entamer la conception est de télécharger les polices du système de conception. (Les utilisateurs n’auront pas à l’installer parce qu’ils l’obtiendront directement de nous au fil du chargement de leurs pages.)

Parties de la page

Exemple

---

Titres

Les rédacteurs emploient des titres et des sous-titres pour structurer l’information sur une page.

Police des titres

Employez la police Raleway modified pou les titres des pages Web de l’Ontario. Si un caractère est absent de la police Raleway modified, l’utilisateur le verra apparaître en (dans l’ordre) :

1. Open Sans
2. Helvetica Neue
3. Sans Serif

Utilisez un texte (presque) noir (#1A1A1A) pour la couleur de police normale sur fond blanc (#FFFFFF).

Niveaux de titre

Il existe six niveaux de titre : de H1 à H6. H1 est le titre de la page, et H2-H6 sont des niveaux de sous‑titre. Habituellement, les rédacteurs essaient de ne pas dépasser le niveau H4 parce que trop de sous‑titres imbriqués rendent parfois une page difficile à lire.

Les typomètres approximatifs des titres H1 à H6 sont :

• 1,2 pour les écrans d’ordinateur
• 1,137 pour les écrans d’appareils mobiles

L’épaisseur de trait de la police des titres, pour les écrans tant d’ordinateur que d’appareils mobiles, est de 700.

À faire :

• Employer seulement un titre H1 par page
• Employer les titres H2 à H6 (dans l’ordre) pour structurer davantage votre page
  • Utiliser par exemple un H3 sous un H2, un H4 sous un H3, et ainsi de suite

À ne pas faire :

• Employer plus d’un titre H1 par page
• Omettre un niveau de titre
  • Par exemple, ne pas placer un H3 sous un H1 sans avoir de H2 entre les deux

Texte d’en-tête

Sur les pages Web de l’Ontario, l’« en-tête » est le texte qui suit directement le titre (H1). Les rédacteurs utilisent le texte d’en‑tête pour indiquer brièvement à l’utilisateur ce qu’ils trouveront sur la page, pour qu’ils sachent s’ils sont au bon endroit.

Employez la catégorie ontario-lead-statement pour le texte d’en-tête.

Le contenu de l’en-tête ressemble à ceci.

Police du texte d’en-tête

Employez la police Open Sans pour le texte d’en-tête des pages Web de l’Ontario. Si un caractère est absent de la police Open Sans, l’utilisateur le verra apparaître en (dans l’ordre)

1. Helvetica Neue
2. Sans Serif

La taille par défaut du texte d’en-tête est de 22 px pour les écrans d’ordinateur et d’appareils mobiles.

Utilisez un texte (presque) noir (#1A1A1A) pour le texte d’en-tête sur une page à fond blanc (#FFFFFF).

Texte du corps

Employez le texte du corps pour le contenu principal et les paragraphes de votre page.

Utilisez la balise <strong> pour le texte du corps en caractères gras. .

Utilisez la balise <cite> pour l’italique.

Police du texte de corps

Employez la police Open Sans pour le texte de corps des pages Web de l’Ontario. Si un caractère est absent de la police Open Sans, l’utilisateur le verra apparaître en (dans l’ordre)

1. Helvetica Neue
2. Sans Serif

La taille par défaut du texte d’en-tête est de 16 px pour les écrans d’ordinateur et d’appareils mobiles.

Utilisez un texte (presque) noir (#1A1A1A) pour le texte de corps sur une page à fond blanc (#FFFFFF).

Longueur des lignes

La longueur des lignes représente la largeur d’un bloc de texte. Les longues lignes de texte peuvent être difficiles à suivre pour les personnes ayant un handicap de lecture ou de vision.

Pour limiter la longueur des lignes, le Système de conception pour l’Ontario applique une propriété de longueur maximale aux en-têtes, aux entrées et au corps du texte. Vous trouverez tous les détails dans les Spécifications relatives aux polices (graphique sommaire).

Spécifications relatives aux polices (graphique sommaire)

Pour toutes les polices ci-dessous, à travers les tailles d’écrans d’ordinateur et d’appareils mobiles :

• Couleur du texte : #1A1A1A
• Couleur du corps de page : #FFFFFF

Ajouter des polices à l’aide d’un réseau de diffusion de contenu

Les polices du Système de conception pour l’Ontario peuvent être extraites directement d’un réseau de diffusion de contenu (c.-à-d RDC ou CDN).

Un CDN est un service en ligne qui héberge des fichiers pour l’accès et la visualisation sans que les développeurs aient besoin de les ajouter à leur propre système.

L’utilisation d’un CDN vous permet de reproduire les polices à l’aide d’un fichier CSS qui inclut toutes les définitions de polices et leurs fichiers sous-jacents. Les polices seront actualisées au fur et à mesure des mises à jour.

Voici quelques exemples de situations dans lesquelles vous pourriez vouloir utiliser des polices hébergées par un CDN :

• les bulletins d’information par courrier électronique;
• les applications Web de modèle SaaS qui permettent d’ajouter des polices personnalisées à partir de Google Fonts ou d’autres services de polices en ligne.

Directives

1. Pour ajouter un <lien> identifiez le lien HTML qui se rapporte à votre fichier ontario-design-system-fonts.css.

   <link href="https://unpkg.com/@ongov/ontario-design-system-global-styles@latest/dist/misc/ontario-design-system-fonts.css" rel="stylesheet" />

2. Appliquez les polices de caractères souhaitées à vos propres feuilles de style CSS ou HTML. Par exemple, pour utiliser la police Raleway, utilisez font-family Raleway.

   font-family: Raleway;

3. Pour utiliser les polices dans les courriels HTML, ajoutez ce qui suit à l’en-tête HTML de votre courriel:

   <style>
       @import url('https://unpkg.com/@ongov/ontario-design-system-global-styles@latest/dist/misc/ontario-design-system-fonts.css');
   </style>

   Remarque : L’exemple ci-dessus emploie la version latest de la trousse pour garantir que la version la plus à jour est toujours utilisée. Si vous craignez d’introduire des changements problématiques dans votre projet, vous pouvez remplacer latest par une version précise de la trousse. Par exemple, si la version la plus récente est la version 4.0.0, vous pouvez l’utiliser en modifiant l’URL ainsi : https://unpkg.com/@ontario-digital-service/ontario-design-system-global-styles@4.0.0/dist/misc/ontario-design-system-fonts.css.

Pour plus de renseignements, consultez la Google Fonts documentation (Documentation de Google Fonts) (en anglais seulement) sur l’utilisation d’un service de livraison de polices, que notre CSS imite.

Si tout est configuré correctement, les polices du Système de conception pour l’Ontario seront téléchargées et visibles dans la page affichée et apparaîtront également dans l’onglet Réseau du navigateur.