Typography style: Canada.ca design system

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.