Typography is important for readability and legibility: it must enhance, never detract from, the message.
Typeface
The Bank's primary typeface is Open 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."
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>
Headings
Our web content uses six levels of semantic headings.
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
Apply transformation classes to change the text's capitalization without changing the text itself.
lowercase text
<p class="textTransform-lowercase">...</p>UPPERCASE TEXT
<p class="textTransform-uppercase">...</p>Capitalized Text
<p class="textTransform-capitalize">...</p>Type tags
Set text in semantic HTML tags to establish structure without changing the text string’s appearance. To change the appearance of the text string, add font size or weight classes.
Paragraph text
<p>...</p>
small text
<small>...</small>
Bold text
<strong>...</strong><time>...</time>