More topics

Typography

Last updated on May 1, 2024

Good typography maintains a clear hierarchy of information and structures the content to help users understand and navigate your service.

On this page:

The BC Sans font

BC Sans is the standard font for the Government of British Columbia. The B.C. Visual Identity Program requires B.C. government digital services to use BC Sans.

BC Sans is a modified version of Noto Sans, created by Google. It includes support for special characters and syllabics found in Indigenous languages.

BC Sans is open source, and available under the Open Font License. It is free to use, change and distribute.

Available styles and weights

  • BC Sans Light (300 weight)
  • BC Sans Light Italic (300 weight)
  • BC Sans Regular (400 weight)
  • BC Sans Regular Italic (400 weight)
  • BC Sans Bold (700 weight)
  • BC Sans Bold Italic (700 weight) 

Headings and text styles

The easiest way to implement the B.C. Design System typescale is by using design tokens.

The design system uses a type scale based on a modified Major Third scale:
Style Weight Size (px) Size (rem) Line height Letter spacing
Heading 1 700 36px 2.25rem 1.5em normal
Heading 2 700 32px 2em 1.5em normal
Heading 3 700 28px 1.75rem 1.5em normal
Heading 4 700 24px 1.5rem 1.5em normal
Heading 5 700 20px 1.25rem 1.5em normal
Heading 6 700 18px 1.125rem 1.5em normal
Large body 400 18px 1.125rem 1.5em normal
Body 400 16px 1rem 1.5em normal
Small body 400 14px 0.875rem 1.25em normal
Label 400 12px 0.75rem 1.25em normal

The baseline text size is 16px (1rem). This has been tested with a diverse range of users, and is large enough to be comfortably readable for most people. 16px is also the default font size for most browser user agents.

For accessibility reasons, you should generally use relative units (rem) to define text size. This helps to ensure that interfaces and text rescale smoothly when the user zooms in or out.

Headings

The type scale includes styles for Heading 1 (H1) to Heading 6 (H6).

Headings are used to break up content into sections. They are visually prominent, to help the user scan and navigate a page quickly.

How to use headings

Headings are semantically nested according to their level. Proper use of headings is particularly important for users who rely on assistive technologies like screen-readers.

You should only have one H1 on a page. This is normally the page title.

Headings should always be used in sequence. Do not skip heading levels (for example: an H4 following an H2, without an H3.)

Additional styles

The design system includes several additional utility styles:

  • Display: extra-large text style. Do not use in place of semantic headings
  • Large body: larger variant of the default body text style
  • Small body: reduced size variant of the default body text style
  • Label: used for text labels and captions

Text colour

Colours used for text, including headings and hyperlinks
Description Token Value Preview
Default colour for all body text and headings typography.color.primary #2D2D2D  
Alternative colour for secondary/miscellaneous text typography.color.secondary #474543  
Use only for text in inactive user interface elements typography.color.disabled #9F9D9C  
Use for placeholder text in forms typography.color.placeholder #9F9D9C  
Use for hyperlinks in body text and headings typography.color.link #255A90  
Use for error, failure or danger message text typography.color.danger #CE3E39  
Default colour for text on dark backgrounds typography.color.primaryInvert #FFFFFF  
Secondary colour for text on dark backgrounds typography.color.secondaryInvert #ECEAE8  

When setting text colours, keep in mind the minimum contrast requirements for accessibility:

  • 4.5:1 contrast ratio for text smaller than 18pt (H3, H4, H5, H6 and all body text)
  • 3:1 contast ratio for large text (H1 and H2)

Review the documentation on proper use of colour. Use the WebAIM Contrast Checker to test colour combinations.

Install and use BC Sans

Developers

You can find BC Sans on GitHub or install it as a dependency via npm.

You can download and install the font for local development or testing, or use it as a web font in your project.

Designers

BC Sans is pre-installed on most B.C. government workstations. If you don't have it installed, download the font.

Setting up your typography

Use design tokens to import and use the B.C. Design System typescale in your project.

If you choose not to use the design tokens package, you can use the typescale table as a reference to configure your typography.

Accessibility

B.C. government digital services must meet the Level AA requirements defined in the Web Content Accessibility Guidelines (WCAG).

How text renders and behaves can have a significant effect on how accessible your product is, especially for users who rely on assistive technologies.

Refer to the simplified WCAG guidance to help you ensure your product is accessible: