Typography

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

The Bank's 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

To change the capitalization of text without changing the text itself, you can 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

Text can be set in HTML tags, which communicate semantic meaning but not aesthetic value. To tweak the appearance of a text string, you can add classes for font size or weight.

Paragraph text

<p>...</p>

small text
<small>...</small>

Bold text
<strong>...</strong>;
<time>...</time>