diff --git a/about/latest-changes.md b/about/latest-changes.md index 04648c9e5a..f04e2dd6e8 100644 --- a/about/latest-changes.md +++ b/about/latest-changes.md @@ -1,7 +1,7 @@ --- altLangPage: "https://conception.canada.ca/a-propos/derniers-changements.html" date: 2017-10-05 -dateModified: 2023-11-07 +dateModified: 2024-02-19 description: "Latest changes to the Canada.ca design system" layout: default title: "Latest changes to the Canada.ca design system" @@ -14,6 +14,10 @@ title: "Latest changes to the Canada.ca design system"
+ February 19, 2024 +

Updated the Typography style to include design specifications for the new main page title (h1) style.

+
+
November 7, 2023

Updated the Report a problem pattern to inform users that it is being decommissioned. Stabilized the Page feedback tool pattern and added content specifications and updated implementation instructions.

diff --git a/styles/typography.md b/styles/typography.md index a7d02436f0..359c510b2f 100644 --- a/styles/typography.md +++ b/styles/typography.md @@ -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 --- - - -
- -
-

- - Mandatory - -

-

- The typography guidance is mandatory on all pages. -

-

- - Mandatory elements of the design system - -

-

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

-

- Desktop and tablet default font specification -

-
    -
  • - H1: Lato, 38px, bold -
  • -
  • - H2: Lato, 36px, bold -
  • -
  • - H3: Lato, 24px, bold -
  • -
  • - H4: Lato, 22px, bold -
  • -
  • - H5: Lato, 20px, bold -
  • -
  • - H6: Lato, 19px, plain text -
  • -
  • - Body: Noto sans, 20px, plain text -
  • -
-

- Smaller device default font specification -

-
    -
  • - H1: Lato, 34px, bold -
  • -
  • - H2: Lato, 32px, bold -
  • -
  • - H3: Lato, 24px, bold -
  • -
  • - H4: Lato, 22px, bold -
  • -
  • - H5: Lato, 20px, bold -
  • -
  • - H6: Lato, 19px, plain text -
  • -
  • - Body: Noto sans, 20px, plain text -
  • -
-

Main page title

-

When the H1 is the main title of a page, it includes a red bar as part of the Canada.ca brand.

-

Specifications for the red bar (formerly known as gc-thickline):

-
    -
  • alignment: left
  • -
  • colour: #AF3C43
  • -
  • position: 8px or 0.4em underneath the H1 (body is set to 20px)
  • -
  • size: 71px by 3.6px or 3.55em by 0.18em (body is set to 20px)
  • -
-

- Line length -

-

- Constrain text line length to 65 characters. This ensures that no lines extend beyond a comfortable reading length. -

-

- Page layouts may be wider than 65 characters. The line length restriction applies only to lines of text. -

-

- Links -

-

- Underline links in an underline style that skips descenders. -

-
-
- - +

Mandatory

+

The typography guidance is mandatory on all pages.

+

Mandatory elements of the design system

+

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.

+

Desktop and tablet default font specification

+ +

Smaller device default font specification

+ +

Main page title

+

When the H1 is the main title of a page, it includes a red bar as part of the Canada.ca brand.

+

Specifications for the red bar (formerly known as gc-thickline):

+ +

Line length

+

Constrain text line length to 65 characters. This ensures that no lines extend beyond a comfortable reading length.

+

Page layouts may be wider than 65 characters. The line length restriction applies only to lines of text.

+

Links

+

Underline links in an underline style that skips descenders.

\ No newline at end of file