Typography
Typography comes in three types of fonts: Filson Soft, Lato, Sweden Sans The main fonts that you will be working on is Filson Soft and Lato.
Filson Soft
This font is used for headings 1-3, used to emphasise text and catch the users’ attention on the heading text.
Lato
Lato is used for headings 4-6, and body text. This font is used for general text.
Font weights
Font weights come in <p class="b">bold,</p> regular, <p class="text-light">light</p>.
Heading text
The table below shows you the fonts available to use, how and when to use them and also its token properties.
| Visual Example | Role | Token |
|---|---|---|
This is for layout headings |
Display heading |
var(--text-xxl) Font: Filson Soft Size: 67pt / 5rem / 90px Line height: 72 / 1.2 Weight: 300 / light Heading: h1 |
This is for impact |
Display heading impact |
var(--text-xxl) Font: Filson Soft Size: 67pt / 5rem / 90px Line height: 72 / 1.2 Weight: 700 / bold Heading: h1 |
This is for layout headings |
Page heading |
var(--text-xl) Font: Filson Soft Size: 42pt / 3rem Line height: 72 / 1.2 / 56px Weight: 700 / bold Heading: h3 |
This is for layout headings |
Sub heading |
var(--text-lg) Font: Filson Soft Size: 26pt / 2rem / 34px Weight: 700 / bold Heading: h4 |
Body text
The table below shows you the fonts available to use, how and when to use them and also its token properties.
| Visual Example | Role | Token |
|---|---|---|
This is used for emotive body content that is larger and easier to read. It is larger and makes reading long blocks of text easier and has a larger line spacing than productive type. |
Body content emotive |
var(--text-base-size) Font: Lato Size: 16pt / 1rem Line height: 24 / 1.6 Weight: 400 / regular |
This type is used for primary body content and good size for reading text within components. It is generally used in small paragraphs or as single sentences. |
Body content productive |
var(--text-xsm) Font: Lato Size: 14pt / .75rem Line height: 24 / 1.6 Weight: 400 / regular |
Productive text
The table below shows you the fonts available to use, how and when to use them and also its token properties.
| Visual Example | Role | Token |
|---|---|---|
This is used for when you need to call attention to something |
Bold body |
var(--text-base-size) Font: Lato Size: 16pt / 1rem Line height: 24 / 1.6 Weight: 700 / bold |
This is used for labels and never exceeds a single line. |
Labels |
var(--text-xsm) Font: Lato Size: 14pt / .75rem Line height: 24 / 1.6 Weight: 400 / regular |
This is used for when space as at a premium and never exceeds a single line. |
Body tiny |
var(--text-xsm) Font: Lato Size: 12px / .75rem Line height: 72 / 1.2 Weight: 400 / regular |
This is used for code blocks. |
Code |
var(--text-xsm) Font: Lato Size: 14pt / .75rem Line height: 72 / 1.2 Weight: 400 / regular |