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.


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

Heading: Business services. Example of a lead statement and a subheader reading: Get services online. Arrows pointing to Heading, lead statement and subheading.

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


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

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

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

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

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

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
Body text Font: Open Sans
Size: 16px
Line Height: 1.6
Weight: 400
Font: Open Sans
Size: 16px
Line Height: 1.6
Weight: 400

Lead text

Font: Open Sans
Size: 20px
Line Height: 1.6
Weight: 400
Font: Open Sans
Size: 22px
Line Height: 1.6
Weight: 400

Help improve this page

If you have other suggestions, advice or any questions on fonts and typography, the design system team would love to hear from you.