Design System

British Columbia Government Design System for Digital Services


Last Updated: September 15, 2020


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


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


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




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;


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


  • Create an Issue

Design System

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