From 55134934f0e5ddccdabd02c8ed376102ac80866d Mon Sep 17 00:00:00 2001 From: Peter Crane Date: Tue, 5 Mar 2024 09:21:50 -0500 Subject: [PATCH 1/5] Update latest changes (Design system) --- about/latest-changes.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/about/latest-changes.md b/about/latest-changes.md index 04648c9e5a..516dce7961 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-03-05 description: "Latest changes to the Canada.ca design system" layout: default title: "Latest changes to the Canada.ca design system" From a224e9ed0a505a388507aaa29ec4ead594a3b95c Mon Sep 17 00:00:00 2001 From: prycrane Date: Tue, 5 Mar 2024 09:33:22 -0500 Subject: [PATCH 2/5] go --- about/latest-changes.md | 4 ++ styles/typography.md | 143 +++++++++++----------------------------- 2 files changed, 44 insertions(+), 103 deletions(-) diff --git a/about/latest-changes.md b/about/latest-changes.md index 516dce7961..3eb0c51361 100644 --- a/about/latest-changes.md +++ b/about/latest-changes.md @@ -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

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

\ No newline at end of file From b3094a1898d5ec7d0d7d272e16ca532cae4a88bc Mon Sep 17 00:00:00 2001 From: prycrane Date: Tue, 5 Mar 2024 09:49:17 -0500 Subject: [PATCH 3/5] go --- about/latest-changes.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/about/latest-changes.md b/about/latest-changes.md index 3eb0c51361..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: 2024-03-05 +dateModified: 2024-02-19 description: "Latest changes to the Canada.ca design system" layout: default title: "Latest changes to the Canada.ca design system" From 8a259888d014cfff97315e2b57a757d83b5323ac Mon Sep 17 00:00:00 2001 From: Peter Crane Date: Thu, 7 Mar 2024 06:54:12 -0500 Subject: [PATCH 4/5] Style Guide: make sure links work --- style-guide/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style-guide/index.md b/style-guide/index.md index f34693ccff..401134b4a5 100644 --- a/style-guide/index.md +++ b/style-guide/index.md @@ -1,7 +1,7 @@ --- altLangPage: "https://conception.canada.ca/guide-redaction" date: 2017-10-05 -dateModified: 2024-02-14 +dateModified: 2024-03-07 description: "The Canada.ca Content Style Guide provides the rules to create web content that can be easily found, understood and used." title: "Canada.ca Content Style Guide" --- From f75cfb7678cb565f920a68b6707610c7b88d302e Mon Sep 17 00:00:00 2001 From: Peter Crane Date: Thu, 7 Mar 2024 07:07:19 -0500 Subject: [PATCH 5/5] Update index.md --- style-guide/index.md | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/style-guide/index.md b/style-guide/index.md index 401134b4a5..ee53f866de 100644 --- a/style-guide/index.md +++ b/style-guide/index.md @@ -2314,7 +2314,19 @@ title: "Canada.ca Content Style Guide"

7.3 Make sure that links work

-

Make sure that your links work. Check that they take people to the correct page, which contains up-to-date information, in the appropriate official language. Links that don't work frustrate people and hurt the credibility of your content.

+

Make sure that your links work and point to the correct information. Broken or outdated links are frustrating. They can cause people to lose confidence in your content.

+

You should check your links and update them as part of your regular content maintenance schedule:

+
    +
  • fix links that are broken (links that point to a 404 message "Page not found", for example)
    • +
  • make sure that link destinations are correct and have relevant, up-to-date information
    • +
  • evaluate your URL redirects: +
      +
    • make sure they are current, redirecting people to the correct page
      • +
    • update your site links so they to point to current links, not to the URLs that are being redirected
      • +
    +
    • +
  • verify that links point to the appropriate official language
    • +

See how the rule for verifying links applies in French