DevHub

beta

Topic

Design System

British Columbia Government Design System for Digital Services

Status

Last Updated: September 15, 2020

Typography

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

BC Sans

The standard font for B.C. Government digital services is BC Sans. BC Sans is an open source font family, and is a modified version of Noto Sans, developed by Google. BC Sans includes modifications to support Indigenous languages in British Columbia.

Font weights and styles included:

  • BC Sans Regular - 400
  • BC Sans Italic - 400
  • BC Sans Bold - 700
  • BC Sans Bold Italic - 700

Typography standards for print are on the B.C. Visual Identity Program page.

Download Files

Download and include the font files in your project

npm Font Package

npm i --save @bcgov/bc-sans

React

Embed into a root level component import '@bcgov/bc-sans/css/BCSans.css'

Typography.js

A high-level elegant API for expressing typographic design intent

See Typography.js installation instructions here

import Typography from 'typography';
import '@bcgov/bc-sans/css/BCSans.css';

const typography = new Typography({
  baseFontSize: '16px',
  baseLineHeight: 1.25,
  headerFontFamily: ['BCSans', 'Noto Sans', 'Verdana', 'Arial', 'sans-serif'],
  bodyFontFamily: ['BCSans', 'Noto Sans', 'Verdana', 'Arial', 'sans-serif'],
  scaleRatio: 2.074,
});

export default typography;

@font-face

@font-face {
  font-family: 'BCSans';
  font-style: normal;
  src: url('assets/fonts/BCSans/BCSans-Regular.woff2') format('woff2'), /* Optimized for very modern browsers */
       url('assets/fonts/BCSans/BCSans-Regular.woff') format('woff'); /* Modern Browsers */
}
@font-face {
  font-family: 'BCSans';
  font-style: italic;
  src: url('assets/fonts/BCSans/BCSans-Italic.woff2') format('woff2'), /* Optimized for very modern browsers */
       url('assets/fonts/BCSans/BCSans-Italic.woff') format('woff'); /* Modern Browsers */
}
@font-face {
  font-family: 'BCSans';
  font-weight: 700;
  src: url('assets/fonts/BCSans/BCSans-Bold.woff2') format('woff2'), /* Optimized for very modern browsers */
       url('assets/fonts/BCSans/BCSans-Bold.woff') format('woff'); /* Modern Browsers */
}
@font-face {
  font-family: 'BCSans';
  font-style: italic;
  font-weight: 700;
  src: url('assets/fonts/BCSans/BCSans-BoldItalic.woff2') format('woff2'), /* Optimized for very modern browsers */
       url('assets/fonts/BCSans/BCSans-BoldItalic.woff') format('woff'); /* Modern Browsers */
}

Font Stack

font-family: 'BCSans', 'Noto Sans', Verdana, Arial, sans-serif;

Paragraphs

Example

Loading...

The default paragraph font size is 16px (1em) with a line height of 1.6.

p {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 36px;
  color: #313132;
}

Headings

Heading are sized based on a Minor Third (1.200) scale to achieve a harmonious increase of sizes.

Loading...

  • Create an Issue

Design System
Content

  • home
  • disclaimer
  • privacy
  • accessibility
  • copyright
  • contact us
  • Government Of BC