Previous iterations of the brand used the Poppins typeface exclusively. With the Bionic version of the theme, we have introduced a serif font (Neuton) which is used for headers.
When writing content, the theme will automatically apply the default styles and typeface to headers and paragraph text respectively, so in most cases, you don’t need to think about this.
Headers should always use font-weight 800
This is a header
It is possible to override the font which is applied by using the Text (Adv) block rather than header or paragraph blocks, but this should only be used sparingly for specific use cases.
The way type appears is consistent across the site and is as follows:
(Note header styles can be applied to any text by applying the class h1, h2 h3 etc.)
2.5rem, 40px
H1. The quick brown fox jumps over the lazy dog.
<h1></h1> <p class="h1"></p>2rem, 32px
H2. The quick brown fox jumps over the lazy dog.
<h2></h2> <p class="h2"></p>1.75rem, 28px
H3. The quick brown fox jumps over the lazy dog.
<h3></h3> <p class="h3"></p>1.5rem, 24px
H4. The quick brown fox jumps over the lazy dog.
<h4></h4> <p class="h4"></p>1.25rem, 20px
H5. The quick brown fox jumps over the lazy dog.
<h5></h5> <p class="h5"></p>1rem, 16px
H6. The quick brown fox jumps over the lazy dog.
<h6></h6> <p class="h6"></p>1rem, 16px
p. The quick brown fox jumps over the lazy dog.
<p></p>List
- List Item
- List Item
Display Headings
Display headings are meant for banners, covers and other parts of the page which need to stand out more
1rem, 16px
Display 1. The quick brown fox jumps over the lazy dog.
<h1 class="display-1"></h1>1rem, 16px
Display 2. The quick brown fox jumps over the lazy dog.
<h1 class="display-2"></h1>Display 3. The quick brown fox jumps over the lazy dog.
<h1 class="display-3"></h1>Display 4. The quick brown fox jumps over the lazy dog.
<h1 class="display-4"></h1>Display 5. The quick brown fox jumps over the lazy dog.
<h1 class="display-5"></h1>Display 6. The quick brown fox jumps over the lazy dog.
<h1 class="display-6"></h1>