Typography

On this page

• Typography system
• Using typography
• Typography token reference

Typography system

Using typography

Structure content with headings

• All headings and subheadings need a heading tag (<h1> - <h6>).
• Start main content with an H1. Use no more than one H1 for each page.
• Order heading levels numerically. H3 follows H2, H2 follows H1, and so on.
• Avoid skipping hierarchical heading levels.
• Match an H1 font size with an H1 line height, an H2 font size with an H2 line height, etc.
• Make each heading distinctive and make it obvious what the content is about.

Choose the font family based on content

• Only use the heading tokens for headings. Everything else can be set in text.
• Use the body font family for most purposes.
• Opt to use monospace when citing code to give specific code examples.

Keep text readable

• For font size, keep text line length below 65 characters for a comfortable, accessible reading length.
• Use the CSS unit 65ch (--gcds-text-character-limit) or lower to set the maximum width of your paragraphs.

Use font weights in a accessible way

• Limit the quantity of font weights to two or three in the same space to avoid compromising contrast.
• Use font weights to emphasize words within a table, at the start of a paragraph, or in long blocks of text when you’ve exhausted available headings and other style elements.
• Be mindful in establishing emphasis in an accessible way, as many assistive technologies ignore font weights.

Limit bold text and italics

• Use bold text sparingly, as it can create cognitive processing difficulties for sighted readers.
• Use italics when referencing a Canadian law, as in Accessible Canada Act.
• Limit your use of italics to short strings of text. Long passages in italics can create cognitive processing difficulties for sighted readers.

Choose how to apply typography

• Use CSS Shortcuts when you need to adjust the typography or presentation of your own content. CSS Shortcuts are available for properties such as font family, font size, font style, font weight, line height, and text alignment.
• If a CSS Shortcuts class does not cover your need, use a global typography token in your custom CSS.

Apply typography

Typography token reference

Heading font

Text font

Font families

Font weights