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

Example

---

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.

Don’t:

• 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 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

Implement fonts via a CDN

The Ontario Design System fonts can be pulled directly from a CDN (Content Delivery Network).

A CDN is an online service that hosts files for access and viewing without the need for developers to add them to their own hosting infrastructure.

Using a CDN allows you to reference the fonts via a CSS file that includes all the font definitions and their underlying files. The fonts will be kept current as we make updates.

Examples of situations where you may want to use CDN-hosted fonts include:

• email newsletters
• software as a service (SaaS) web applications that support adding custom fonts from Google Fonts or other online font services

Instructions

1. Add a <link> tag to your HTML that references the ontario-design-system-fonts.css file.

   <link href="https://unpkg.com/@ongov/ontario-design-system-global-styles@latest/dist/misc/ontario-design-system-fonts.css" rel="stylesheet" />

2. Apply the desired font faces to your own CSS/HTML. For example, to use Raleway, use the font-family Raleway.

   font-family: Raleway;

3. To use the fonts in HTML emails, add the following to your email HTML header:

   <style>
       @import url('https://unpkg.com/@ongov/ontario-design-system-global-styles@latest/dist/misc/ontario-design-system-fonts.css');
   </style>

   Note: The example above uses latest as its package version to ensure that the most up-to-date version is always retrieved. If you are concerned about introducing breaking changes into your project, you can swap latest for a fixed version of the package. For example, if the latest version is 4.0.0, you can retrieve this version by updating the URL to https://unpkg.com/@ontario-digital-service/ontario-design-system-global-styles@4.0.0/dist/misc/ontario-design-system-fonts.css.

For more information, read the Google Fonts documentation on using a font delivery service, which our CSS mimics.

If everything is configured correctly, the Ontario Design System fonts will load and be visible within the loaded page and will also appear in the browser’s Network tab.