Fonts and typography
Always use the modified version of Raleway font for headings and Open Sans for leads and body text.
Guiding principle: Be consistent.
On this page
- Before you start – install Raleway modified
- Parts of the page
- Headings
- Lead text
- Body text
- Line length
- Font specifications (summary chart)
Before you start – install Raleway modified
To make it easier to read, we’ve modified the “w” and the numbers of the standard Raleway font. So the first thing you’ll need to do before you start designing is to download the Ontario Design System fonts. (Users won’t need it installed because they’ll get it directly from us as their pages load.)
Parts of the page

Headings
Writers use headings and subheadings to structure information on a page.
Headings font
Use the Raleway modified font for headings on Ontario webpages. If a character is not part of Raleway modified the user will see it as either (in order):
- Open Sans
- Helvetica Neue
- Sans Serif
Use (almost) black text (#1A1A1A
) for the standard font colour against a white background (#FFFFFF
).
Heading levels
There are six heading levels: H1 to H6. H1 is the title of the page and H2-H6 are subheading levels. Generally, writers try to not go further than H4 because too many nested subheadings can make a page harder to read.
The approximate typescales for H1 to H6 headings are:
- 1.2 for desktop screens
- 1.137 for mobile screens
The font weight for headings on both desktop and mobile screens is 700
.
Do:
- use only one H1 heading per page
- use H2 to H6 headings (in order) to further structure your page
- for example, use an H3 under an H2, an H4 under an H3, etc.
Do not:
- use more than one H1 per page
- skip a heading level
- for example, do not put an H3 under an H1 without an H2 in between
Lead text
On Ontario webpages, the “lead” is the text that goes directly under the title (H1). Writers use lead text to briefly tell the user what they’ll find on the page so they know if they’re in the right place or not.
Use the ontario-lead-statement
class for lead text.
Lead content looks like this
Lead text font
Use Open Sans font for lead text on Ontario webpages. If a character is not part of Open Sans, the user will see it as either (in order):
- Helvetica Neue
- Sans Serif
The default size for lead text is 22px for both desktop and mobile screens.
Use (almost) black text (#1A1A1A
) for lead text against a white page background (#FFFFFF
).
Body text
Use body text for the main content and paragraphs of your page.
Use the <strong>
tag for bolded body text.
Use the <cite>
tag for italics.
Body text font
Use Open Sans font for all body text on Ontario webpages. If a character is not part of Open Sans, the user will see it as either (in order):
- Helvetica Neue
- Sans Serif
The default body text size is 16px for desktop and mobile screens.
Use (almost) black text (#1A1A1A
) for body text against a white page background (#FFFFFF
).
Line length
Line length is the width of a block of text. Long lines of text can be difficult for people with reading or vision disabilities to follow.
To limit line length, the Ontario Design System applies a max-width property to headings, leads and body text. Get the details in the font specifications (summary chart).
Font specifications (summary chart)
For all fonts below, across desktop and mobile screen sizes:
- Text colour:
#1A1A1A
- Page body colour:
#FFFFFF
Name | Mobile styles | Desktop styles |
---|---|---|
H1 |
Font: Raleway modified Size: 32px Line Height: 1.29 Weight: 700 Spacing: 0.04rem |
Font: Raleway modified Size: 40px Line Height: 1.2 Weight: 700 Spacing: 0.04rem Line length: 70rem |
H2 |
Font: Raleway modified Size: 27px Line Height: 1.37 Weight: 700 Spacing: 0.03rem |
Font: Raleway modified Size: 33px Line Height: 1.33 Weight: 700 Spacing: 0.02rem Line length: 48rem |
H3 |
Font: Raleway modified Size: 23px Line Height: 1.39 Weight: 700 Spacing: 0.02rem |
Font: Raleway modified Size: 28px Line Height: 1.43 Weight: 700 Spacing: 0.02rem Line length: 48rem |
H4 |
Font: Raleway modified Size: 20px Line Height: 1.5 Weight: 700 Spacing: 0.03rem |
Font: Raleway modified Size: 24px Line Height: 1.5 Weight: 700 Spacing: 0.0313rem Line length: 48rem |
H5 |
Font: Raleway modified Size: 18px Line Height: 1.56 Weight: 700 Spacing: 0.03rem |
Font: Raleway modified Size: 19px Line Height: 1.5 Weight: 700 Spacing: 0.025rem Line length: 48rem |
H6 |
Font: Raleway modified Size: 16px Line Height: 1.56 Weight: 700 Spacing: 0.03rem |
Font: Raleway modified Size: 16px Line Height: 1.5 Weight: 700 Spacing: 0.025rem Line length: 48rem |
Body text | Font: Open Sans Size: 16px Line Height: 1.6 Weight: 400 |
Font: Open Sans Size: 16px Line Height: 1.6 Weight: 400 Line length: 48rem |
Lead text | Font: Open Sans Size: 20px Line Height: 1.6 Weight: 400 |
Font: Open Sans Size: 22px Line Height: 1.6 Weight: 400 Line length: 70rem |
Contact us
If you have any questions or feedback, please get in touch.