-
Notifications
You must be signed in to change notification settings - Fork 15
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 #427 from canada-ca/ds-latest-changes
Update latest changes (Design system)
- Loading branch information
Showing
2 changed files
with
45 additions
and
104 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,108 +1,45 @@ | ||
| --- | ||
| altLangPage: https://conception.canada.ca/styles/typographie.html | ||
| date: null | ||
| dateModified: '2018-10-01' | ||
| date: 2018-10-01 | ||
| dateModified: 2024-02-19 | ||
| description: null | ||
| title: Typography style | ||
| --- | ||
|
|
||
|
|
||
| <div> | ||
|
|
||
| <section> | ||
| <p> | ||
| <span class="label label-danger"> | ||
| Mandatory | ||
| </span> | ||
| </p> | ||
| <p> | ||
| The typography guidance is mandatory on all pages. | ||
| </p> | ||
| <p> | ||
| <a href="{{ site.url }}/architecture/mandatory-elements.html"> | ||
| Mandatory elements of the design system | ||
| </a> | ||
| </p> | ||
| <p> | ||
| Fonts must be consistent across Canada.ca pages, and should be easily readable across devices. Use a combination of Lato for headings, and Noto sans for body text. | ||
| </p> | ||
| <h2> | ||
| Desktop and tablet default font specification | ||
| </h2> | ||
| <ul> | ||
| <li> | ||
| H1: Lato, 38px, bold | ||
| </li> | ||
| <li> | ||
| H2: Lato, 36px, bold | ||
| </li> | ||
| <li> | ||
| H3: Lato, 24px, bold | ||
| </li> | ||
| <li> | ||
| H4: Lato, 22px, bold | ||
| </li> | ||
| <li> | ||
| H5: Lato, 20px, bold | ||
| </li> | ||
| <li> | ||
| H6: Lato, 19px, plain text | ||
| </li> | ||
| <li> | ||
| Body: Noto sans, 20px, plain text | ||
| </li> | ||
| </ul> | ||
| <h2> | ||
| Smaller device default font specification | ||
| </h2> | ||
| <ul> | ||
| <li> | ||
| H1: Lato, 34px, bold | ||
| </li> | ||
| <li> | ||
| H2: Lato, 32px, bold | ||
| </li> | ||
| <li> | ||
| H3: Lato, 24px, bold | ||
| </li> | ||
| <li> | ||
| H4: Lato, 22px, bold | ||
| </li> | ||
| <li> | ||
| H5: Lato, 20px, bold | ||
| </li> | ||
| <li> | ||
| H6: Lato, 19px, plain text | ||
| </li> | ||
| <li> | ||
| Body: Noto sans, 20px, plain text | ||
| </li> | ||
| </ul> | ||
| <h2>Main page title</h2> | ||
| <p>When the H1 is the main title of a page, it includes a red bar as part of the Canada.ca brand.</p> | ||
| <p>Specifications for the red bar (formerly known as gc-thickline):</p> | ||
| <ul> | ||
| <li>alignment: left</li> | ||
| <li>colour: #AF3C43</li> | ||
| <li>position: 8px or 0.4em underneath the H1 (body is set to 20px)</li> | ||
| <li>size: 71px by 3.6px or 3.55em by 0.18em (body is set to 20px)</li> | ||
| </ul> | ||
| <h2> | ||
| Line length | ||
| </h2> | ||
| <p> | ||
| Constrain text line length to 65 characters. This ensures that no lines extend beyond a comfortable reading length. | ||
| </p> | ||
| <p> | ||
| Page layouts may be wider than 65 characters. The line length restriction applies only to lines of text. | ||
| </p> | ||
| <h2> | ||
| Links | ||
| </h2> | ||
| <p> | ||
| Underline links in an underline style that skips descenders. | ||
| </p> | ||
| </section> | ||
| </div> | ||
|
|
||
|
|
||
| <p><span class="label label-danger">Mandatory</span></p> | ||
| <p>The typography guidance is mandatory on all pages.</p> | ||
| <p><a href="{{ site.url }}/architecture/mandatory-elements.html"> Mandatory elements of the design system</a></p> | ||
| <p>Fonts must be consistent across Canada.ca pages, and should be easily readable across devices. Use a combination of Lato for headings, and Noto sans for body text.</p> | ||
| <h2> Desktop and tablet default font specification</h2> | ||
| <ul> | ||
| <li>H1: Lato, 38px, bold</li> | ||
| <li>H2: Lato, 36px, bold</li> | ||
| <li>H3: Lato, 24px, bold</li> | ||
| <li>H4: Lato, 22px, bold</li> | ||
| <li>H5: Lato, 20px, bold</li> | ||
| <li>H6: Lato, 19px, plain text</li> | ||
| <li>Body: Noto sans, 20px, plain text</li> | ||
| </ul> | ||
| <h2> Smaller device default font specification </h2> | ||
| <ul> | ||
| <li>H1: Lato, 34px, bold</li> | ||
| <li>H2: Lato, 32px, bold</li> | ||
| <li>H3: Lato, 24px, bold</li> | ||
| <li>H4: Lato, 22px, bold</li> | ||
| <li>H5: Lato, 20px, bold</li> | ||
| <li>H6: Lato, 19px, plain text</li> | ||
| <li>Body: Noto sans, 20px, plain text</li> | ||
| </ul> | ||
| <h2>Main page title</h2> | ||
| <p>When the H1 is the main title of a page, it includes a red bar as part of the Canada.ca brand.</p> | ||
| <p>Specifications for the red bar (formerly known as gc-thickline):</p> | ||
| <ul> | ||
| <li>alignment: left</li> | ||
| <li>colour: #AF3C43</li> | ||
| <li>position: 8px or 0.4em underneath the H1 (body is set to 20px)</li> | ||
| <li>size: 71px by 3.6px or 3.55em by 0.18em (body is set to 20px)</li> | ||
| </ul> | ||
| <h2>Line length</h2> | ||
| <p>Constrain text line length to 65 characters. This ensures that no lines extend beyond a comfortable reading length.</p> | ||
| <p>Page layouts may be wider than 65 characters. The line length restriction applies only to lines of text.</p> | ||
| <h2>Links </h2> | ||
| <p>Underline links in an underline style that skips descenders.</p> |