Language selection

Government of Canada / Gouvernement du Canada

Search

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.

Core typography of Canada.ca

Desktop and large tablet default font specification

Smaller device default font specification

Typography scale by patterns

Certain patterns use font sizes beyond the core typography for content pages. These patterns have specific use cases and their sizing is designed with that in mind, such as:

Small text elements

Noto Sans 16px, plain text, non-responsive

Some examples of patterns that use small text include:

This is the smallest size recommended on Canada.ca for readable text.

Navigational page font scaling

Navigation pages are compact by design. These pages help users scan and find links to the task information they need.

To support scanning and fit more content on a page, navigational pages use a smaller heading scale. For example, headings in sections such as Services and information, Contact us, and Features use H3 styling instead of the larger H2 styling used elsewhere on Canada.ca.

When creating a standard Canada.ca navigational page, follow the typography and heading guidance for the design pattern you are using.

Examples of navigation pages:

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 of additional font families than can be added to support additional character types.

The Noto Sans Canadian Aboriginal font-family is included by default in the typography of Canada.ca.

When publishing content that has unsupported character types, you can choose to add a Noto Sans font package for the characters you need for both headings and content as necessary.

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="zh-Hans">
  <h2>标题</h2>
  <p>....</p>
</section>

CSS for the language tag

:lang(zh-Hans) {
  font-family: 'Noto Sans SC';
}
:lang(zh-Hans) :is(h1, h2, h3, h4, h5, h6) {
  font-weight: bold;
}

Developers will need to make the Noto Sans language set available, for this example it would be:

Implementation resources:

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.

Underline links in an underline style that skips descenders.

Latest updates

Updated to clarify the differences between core Canada.ca typography and the typography used for navigational pages and components.
Updated to reflect that the Noto Sans Canadian Aboriginal font family has been added to the typography of Canada.ca.
Updated to include information about how to customize typography to support additional languages
Updated typography specifications in tandem with alignment activities for GCWeb and GC Design System

Page details

Date modified: