Typography
Introduction
Our typography system is built on rems where 1 rem = 14px. This is the size of standard body text. All other sizes are defined as relative rems.
Check here to read about installation of the fonts in your apps.
Fonts
- We use
--f-fonts-family-bodywhich is set to Open Sans for body text - We use use
--f-fonts-family-header-primarywhich is set to Funnel Display for H1 and H2. - We use use
--f-fonts-family-header-secondarywhich is set to Funnel Sans for H3 to H5.
Font weight
- We use
--f-fonts-weight-bodywhich is set to (regular : 400px) for body text - We use use
--f-fonts-weight-header-primarywhich is set to (medium : 500px) for H1 and H2. - We use use
--f-fonts-weight-header-secondarywhich is set to (medium : 500px) for H3 and H5. - We use use
--f-fonts-weight-highlightwhich is set to (medium : 600px) for bold.
Font height
Standard line height is 1.5 * the text height. For scalability, Fonts, weights, sizes and herights are defined in the variables, can be found [here] (8_token-reference#fonts)
Headings
You should use <h1> - <h5> elements for heading, based on how they are nested to reflect the organization of content in the page.
This is generally a best practice and helps for accessibility needs.
Use these utility classes to get the correct styling
Sizes, fonts family, font weight & font height are set by variables
| Utility Class | Font Size | Font Weight | Line Height | Font Family |
|---|---|---|---|---|
| text-fun-h1 | --f-header-h1-fonts-size | --f-header-h1-fonts-weight | --f-header-h1-line-height | --f-fonts-family-header-primary |
| text-fun-h2 | --f-header-h2-fonts-size | --f-header-h2-fonts-weight | --f-header-h2-line-height | --f-fonts-family-header-primary |
| text-fun-h3 | --f-header-h3-fonts-size | --f-header-h3-fonts-weight | --f-sizes-sm-line-height | --f-fonts-family-header-secondary |
| text-fun-h4 | --f-header-h4-fonts-size | --f-header-h4-fonts-weight | --f-header-h4-line-height | --f-fonts-family-header-secondary |
| text-fun-h5 | --f-header-h5-fonts-size | --f-header-h5-fonts-weight | --f-header-h5-line-height | --f-fonts-family-header-secondary |
Body text
Default text
The default copy size and weight of 14px, with line height 21px, and 400-weight Open Sans. If required the text-base class can be used to reset text back to this.
Bold text
Add the font-bold class to give parts of text a bolder heavier appearance to draw attention to important content.
Comparision of new utility classes with legacy implimentation
Page heading
The h1 should only be used in page headers
Utility class
Legacy
Section heading
If pages need a second level of headings to divide the content up, classes text-3xl font-heading is a good default.
Utility class
Legacy
Sub section heading
If there is a second level of content structure in a section we recommend using classes text-2xl font-heading.
Utility class
Legacy
