Typography
There are two type sets: one for desktop and tablet and one for small devices. The full typography list can be found in the DECD Design System Extended Figma Library
When designing for desktop and tablet use the type sizing and line height below.
When designing for small devices use the type sizing and line height below.
Start by checking out the general pattern and style guidance on "how and when to use page titles and headings" from the Canada.ca Content Style Guide.
It is important that Headings follow the heading hierarchy, in order from H1 (most important) to H6 (least important). Skipping a heading level should be avoided, and there can only be one "Heading 1" per page. For more information visit WCAG.
Note that Heading 1 always contains a red ruler underline. This is a component in our library and the documentation can be found here.**
Headings and body text should use the colour style Grey100, which is our darkest grey.
Constrain text line length to 8 columns. This ensures that no lines extend beyond a comfortable reading length.
Page layouts may be wider than 8 columns. The line length restriction applies only to lines of text.
We imported headings and body text details from the Core GC Design Library into the Extended GC Design Library - DECD, then augmented the styles with missing line heights, and added a new "display" typeface.