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):

1. Open Sans
2. Helvetica Neue
3. 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):

1. Helvetica Neue
2. 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):

1. Helvetica Neue
2. 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