Typography style: Canada.ca design

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, 41px, bold
• H2: Lato, 39px, bold
• H3: Lato, 29px, bold
• H4: Lato, 27px, bold
• H5: Lato, 24px, bold
• H6: Lato, 22px, bold
• Body: Noto sans, 20px, plain text

Smaller device default font specification

• H1: Lato, 37px, bold
• H2: Lato, 35px, bold
• H3: Lato, 26px, bold
• H4: Lato, 22px, bold
• H5: Lato, 20px, bold
• H6: Lato, 18px, bold
• Body: Noto sans, 18px, plain text

Headings for Indigenous characters and other languages

Both Lato and Noto Sans support a wide variety of languages and non-latin characters; however, Noto Sans has a larger range and is designed with Canadian Indigenous fonts in mind when using Noto Sans Canadian Aboriginal.

When publishing content in another language, if Lato does not support the characters for the headings, you can change the font to one that does, such as Noto Sans or Noto Sans Canadian Aboriginal.

By default, without this specific modification, the style of Canada.ca instructs the user’s browser to use an available font that will display the characters correctly.

Example:

Language tag applied to section with content

<section lang="iu">
  <h2>ᑐᓴᒐᒃᓴᖅ</h2>
  <p>....</p>
</section>

CSS for the language tag

:lang(iu) {
  font-family: 'Noto Sans Canadian Aboriginal';
}
:lang(iu) :is(h1, h2, h3, h4, h5, h6) {
  font-weight: bold;
}

List of ISO 639 language codes

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: #A62A1E
• position: .2em (7.6px) underneath the H1
• size: 72px wide 6px thick

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.

Latest updates

2025-11-21

Updated to include information about how to customize typography to support additional languages

2025-05-15

Updated typography specifications in tandem with alignment activities for GCWeb and GC Design System.