-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #306 from canada-ca/ds-latest-changes-fr
Update latest changes (Design system)
- Loading branch information
Showing
2 changed files
with
46 additions
and
106 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,109 +1,45 @@ | ||
| --- | ||
| altLangPage: https://design.canada.ca/styles/typography.html | ||
| date: null | ||
| dateModified: '2019-10-01' | ||
| date: 2019-10-01 | ||
| dateModified: 2024-02-19 | ||
| description: null | ||
| title: Typographie - Style de Canada.ca | ||
| --- | ||
|
|
||
|
|
||
|
|
||
|
|
||
| <section> | ||
| <p> | ||
| <span class="label label-danger"> | ||
| Obligatoire | ||
| </span> | ||
| </p> | ||
| <p> | ||
| Les directives concernant la typographie sont obligatoires pour toutes les pages. | ||
| </p> | ||
| <p> | ||
| <a href="{{ site.url }}/architecture/elements-obligatoires.html"> | ||
| Éléments obligatoires du système de conception | ||
| </a> | ||
| </p> | ||
| <p> | ||
| 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. | ||
| </p> | ||
| <h2> | ||
| Ordinateurs de bureau et tablettes | ||
| </h2> | ||
| <ul> | ||
| <li> | ||
| H1 : Lato, 38px, caractère gras | ||
| </li> | ||
| <li> | ||
| H2 : Lato, 36px, caractère gras | ||
| </li> | ||
| <li> | ||
| H3 : Lato, 24px, caractère gras | ||
| </li> | ||
| <li> | ||
| H4 : Lato, 22px, caractère gras | ||
| </li> | ||
| <li> | ||
| H5 : Lato, 20px, caractère gras | ||
| </li> | ||
| <li> | ||
| H6 : Lato, 19px, texte régulier | ||
| </li> | ||
| <li> | ||
| Corps du texte : Noto sans, 20px, texte régulier | ||
| </li> | ||
| </ul> | ||
| <h2> | ||
| Petits appareils | ||
| </h2> | ||
| <ul> | ||
| <li> | ||
| H1 : Lato, 34px, caractère gras | ||
| </li> | ||
| <li> | ||
| H2 : Lato, 32px, caractère gras | ||
| </li> | ||
| <li> | ||
| H3 : Lato, 24px, caractère gras | ||
| </li> | ||
| <li> | ||
| H4 : Lato, 22px, caractère gras | ||
| </li> | ||
| <li> | ||
| H5 : Lato, 20px, caractère gras | ||
| </li> | ||
| <li> | ||
| H6 : Lato, 19px, texte régulier | ||
| </li> | ||
| <li> | ||
| Corps du texte : Noto sans, 20px, texte régulier | ||
| </li> | ||
| </ul> | ||
| <h2>Titre principal de la page</h2> | ||
| <p>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.</p> | ||
| <p>Spécifications de la barre rouge (auparavant connue sous le nom de gc-thickline) :</p> | ||
| <ul> | ||
| <li>alignement : gauche</li> | ||
| <li>couleur : #AF3C43</li> | ||
| <li>positionnement : 8 px ou 0,4 em sous l’en-tête H1 (le corps du texte est réglé à 20 px)</li> | ||
| <li>taille : 71 px par 3,6 px ou 3,55 em par 0,18 em (le corps du texte est réglé à 20 px)</li> | ||
| </ul> | ||
| <h2> | ||
| Longueur de la ligne | ||
| </h2> | ||
| <p> | ||
| Limitez la longueur des lignes de texte à 65 caractères. Cela garantit qu'aucune ligne ne dépasse une longueur de lecture confortable. | ||
| </p> | ||
| <p> | ||
| Les mises en page peuvent comporter plus de 65 caractères. Cette restriction de longueur de ligne s'applique uniquement aux lignes de texte. | ||
| </p> | ||
| <h2> | ||
| Liens | ||
| </h2> | ||
| <p> | ||
| Soulignez les liens en utilisant un style de soulignement qui ignore les descendeurs. | ||
| </p> | ||
| </section> | ||
|
|
||
|
|
||
|
|
||
|
|
||
| <p><span class="label label-danger">Obligatoire</span></p> | ||
| <p>Les directives concernant la typographie sont obligatoires pour toutes les pages.</p> | ||
| <p><a href="{{ site.url }}/architecture/elements-obligatoires.html">Éléments obligatoires du système de conception</a></p> | ||
| <p>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.</p> | ||
| <h2>Ordinateurs de bureau et tablettes</h2> | ||
| <ul> | ||
| <li>H1 : Lato, 38px, caractère gras</li> | ||
| <li>H2 : Lato, 36px, caractère gras</li> | ||
| <li>H3 : Lato, 24px, caractère gras</li> | ||
| <li>H4 : Lato, 22px, caractère gras</li> | ||
| <li>H5 : Lato, 20px, caractère gras</li> | ||
| <li>H6 : Lato, 19px, texte régulier</li> | ||
| <li>Corps du texte : Noto sans, 20px, texte régulier</li> | ||
| </ul> | ||
| <h2>Petits appareils</h2> | ||
| <ul> | ||
| <li>H1 : Lato, 34px, caractère gras</li> | ||
| <li>H2 : Lato, 32px, caractère gras</li> | ||
| <li>H3 : Lato, 24px, caractère gras</li> | ||
| <li>H4 : Lato, 22px, caractère gras</li> | ||
| <li>H5 : Lato, 20px, caractère gras</li> | ||
| <li>H6 : Lato, 19px, texte régulier</li> | ||
| <li>Corps du texte : Noto sans, 20px, texte régulier</li> | ||
| </ul> | ||
| <h2>Titre principal de la page</h2> | ||
| <p>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.</p> | ||
| <p>Spécifications de la barre rouge (auparavant connue sous le nom de gc-thickline) :</p> | ||
| <ul> | ||
| <li>alignement : gauche</li> | ||
| <li>couleur : #AF3C43</li> | ||
| <li>positionnement : 8 px ou 0,4 em sous l'en-tête H1 (le corps du texte est réglé à 20 px)</li> | ||
| <li>taille : 71 px par 3,6 px ou 3,55 em par 0,18 em (le corps du texte est réglé à 20 px)</li> | ||
| </ul> | ||
| <h2>Longueur de la ligne</h2> | ||
| <p>Limitez la longueur des lignes de texte à 65 caractères. Cela garantit qu'aucune ligne ne dépasse une longueur de lecture confortable.</p> | ||
| <p>Les mises en page peuvent comporter plus de 65 caractères. Cette restriction de longueur de ligne s'applique uniquement aux lignes de texte.</p> | ||
| <h2>Liens</h2> | ||
| <p>Soulignez les liens en utilisant un style de soulignement qui ignore les descendeurs.</p> |