Polices et typographie

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.


Dans cette page


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 d’une page démontrant les niveaux de titre. Le titre de la page est « Services pour entreprises », avec une flèche pointant vers lui pour l'indiquer comme un titre. Le texte sous le titre se lit comme suit : « Vous pouvez vous occuper de toutes sortes d’activités en ligne, de l’enregistrement du nom de l’entreprise au dépôt d’une petite réclamation, jusqu’à l’obtention d’un permis d’agent de sécurité », avec une flèche pointant vers ce texte pour l'identifier comme texte d’en-tête. Il y a une flèche pointant vers « Obtenir des services en ligne » pour l'identifier comme sous-titre, avec un texte du corps en dessous.

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).


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
Nom Styles pour mobile Styles pour ordinateur

H1

Police : Raleway modified
Taille : 32px
Hauteur de ligne 1.29
Épaisseur : 700
Espacement : 0.04rem
Police : Raleway modified
Taille : 40px
Hauteur de ligne : 1.2
Épaisseur : 700
Espacement : 0.04rem

H2

Police : Raleway modified
Taille : 27px
Hauteur de ligne : 1.37
Épaisseur : 700
Espacement : 0.03rem
Police : Raleway modified
Taille : 33px
Hauteur de ligne : 1.33
Épaisseur : 700
Espacement : 0.02rem

H3

Police : Raleway modified
Taille : 23px
Hauteur de ligne : 1.39
Épaisseur : 700
Espacement : 0.02rem
Police : Raleway modified
Taille : 28px
Hauteur de ligne : 1.43
Épaisseur : 700
Espacement : 0.02rem

H4

Police : Raleway modified
Taille : 20px
Hauteur de ligne : 1.5
Épaisseur : 700
Espacement : 0.03rem
Police : Raleway modified
Taille : 24px
Hauteur de ligne : 1.5
Épaisseur : 700
Espacement : 0.0313rem
H5
Police : Raleway modified
Taille : 18px
Hauteur de ligne : 1.56
Épaisseur : 700
Espacement : 0.03rem
Police : Raleway modified
Taille : 19px
Hauteur de ligne : 1.5
Épaisseur : 700
Espacement : 0.025rem
H6
Police : Raleway modified
Taille : 16px
Hauteur de ligne : 1.56
Épaisseur : 700
Espacement : 0.03rem
Police : Raleway modified
Taille : 16px
Hauteur de ligne : 1.5
Épaisseur : 700
Espacement : 0.025rem
Body text Police : Open Sans
Taille : 16px
Hauteur de ligne : 1.6
Épaisseur : 400
Police : Open Sans
Taille : 16px
Hauteur de ligne : 1.6
Épaisseur : 400
Lead text Police : Open Sans
Taille : 20px
Hauteur de ligne : 1.6
Épaisseur : 400
Police : Open Sans
Taille : 22px
Hauteur de ligne : 1.6
Épaisseur : 400

Pour nous joindre

Si vous avez des questions ou souhaitez donner de la rétroaction, veuillez communiquer avec nous.