Typography is important for readability and legibility: it must enhance, never detract from, the message.
Typeface
The Bank's primary fonts are Poppins Semibold for headers and Open sans for body copy.
Poppins Semibold — a geometric sans serif typeface created by Indian Type Foundry, Jonny Pinhorn, Ninad Kale and commissioned by Google. According to Google, it was designed to be easier to read and has “become popular with individuals who have visual or cognitive disabilities.”
Opens sans — a sans-serif typeface designed by Steve Matteson and commissioned by Google. According to Google, it was developed with an "upright stress, open forms and a neutral, yet friendly appearance" and is "optimized for legibility across print, web, and mobile interfaces."
We also use Noto Serif italic in promotional text only to highlight key words. When emphasizing key words in body copy, follow our guiding principles for content and the Bank Style Guide (available to Bank employees only).
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9
<p class="bocss-lead">...</p>
Promotional text
Appears in stand-alone situations such as:
- social media
- banners
- display screens
- pull quotes
Example
We are Canada’s central bank. We work to preserve the value of money by keeping inflation low and stable.
Dos of promotion text
- Use a combination of Poppins Semibold and Noto Serif Italic.
- Italicize only the most descriptive or action oriented word for emphasis.
- Use sentence case.
- Ensure headlines are left aligned.
- Limit text to ten words. Otherwise use Open sans for legibility.
Don’ts of promotional text
- Avoid more than one italicization per sentence.
- Never add more than four words per line and only include one word Noto Serif Italic.
- Do not use UPPERCASE.
Web content
Headings
Our web content uses six levels of semantic headings. Heading styles are automatically set as Poppins Semibold.
The quick brown fox jumps over the lazy dog
<h1>The quick brown fox jumps over the lazy dog</h1>The quick brown fox jumps over the lazy dog
<h2>The quick brown fox jumps over the lazy dog</h2>The quick brown fox jumps over the lazy dog
<h3>The quick brown fox jumps over the lazy dog</h3>The quick brown fox jumps over the lazy dog
<h4>The quick brown fox jumps over the lazy dog</h4>The quick brown fox jumps over the lazy dog
<h5>The quick brown fox jumps over the lazy dog</h5>The quick brown fox jumps over the lazy dog
<h6>The quick brown fox jumps over the lazy dog</h6>Transformation classes
To change the text's capitalization without changing the text itself, apply transformation classes.
lowercase text
<p class="textTransform-lowercase">...</p>UPPERCASE TEXT
<p class="textTransform-uppercase">...</p>Capitalized Text
<p class="textTransform-capitalize">...</p>Type tags
Our body copy styles are automatically set to Open sans.
Semantic HTML tags establish structure without changing the text string’s appearance. To change the appearance of the text string, add font size or weight classes.
For guidance on our web standards and best practices, consult our guiding principles for content.
For word choice, spelling, and grammar, refer to the Bank of Canada Style Guide (available to Bank employees only).
Paragraph text
<p>...</p>
small text
<small>...</small>
Bold text
<strong>...</strong><time>...</time>