Typography
“Lato” is used for body text and “Humanist 521 BT” is used for highlights and Call to Actions.
Below are some suggested font sizes for body and headers.
Headers (Font sizing/line height)
Titlte Size 1 (t1): Desktop: 52/52 | Tablet: 46/46 | Mobile: 42/42
Tortor sed maecenas elementum consectetur tincidunt adipiscing aliquam commodo.
Titlte Size 2 (t2): Desktop: 44/52 | Tablet: 34/42 | Mobile: 30/36
Tortor sed maecenas elementum consectetur tincidunt adipiscing aliquam commodo.
Titlte Size 3 (t3): Desktop: 36/44 | Tablet: 30/36 | Mobile: 26/32
Tortor sed maecenas elementum consectetur tincidunt adipiscing aliquam commodo.
Titlte Size 4 (t4): Desktop: 28/36 | Tablet: 28/36 | Mobile: 24/32
Tortor sed maecenas elementum consectetur tincidunt adipiscing aliquam commodo.Tortor sed maecenas elementum consectetur tincidunt adipiscing aliquam commodo.
Titlte Size 5 (t5): Desktop: 24/32 | Tablet: 22/27 | Mobile: 19/25
Tortor sed maecenas elementum consectetur tincidunt adipiscing aliquam commodo.Tortor sed maecenas elementum consectetur tincidunt adipiscing aliquam commodo.
Titlte Size 6 (t6): Desktop: 20/24 | Tablet: 20/36 | Mobile: 17/22
Tortor sed maecenas elementum consectetur tincidunt adipiscing aliquam commodo.Tortor sed maecenas elementum consectetur tincidunt adipiscing aliquam commodo.
body text: Lato Regular
Depending on hierarchy and/or importance, different text sizes can be used. Avoid using the small and tiny paragraphs to display long body text as it will hurt the legibility of the text.
Tiny paragraph 13/18
Tortor sed maecenas elementum consectetur tincidunt adipiscing aliquam commodo.Tortor sed maecenas elementum consectetur tincidunt adipiscing aliquam commodo. Tortor sed maecenas elementum consectetur tincidunt adipiscing aliquam commodo.Tortor sed maecenas elementum consectetur tincidunt adipiscing aliquam commodo.
Small paragraph 15/20
Tortor sed maecenas elementum consectetur tincidunt adipiscing aliquam commodo.Tortor sed maecenas elementum consectetur tincidunt adipiscing aliquam commodo. Tortor sed maecenas elementum consectetur tincidunt adipiscing aliquam commodo.Tortor sed maecenas elementum consectetur tincidunt adipiscing aliquam commodo.
Normal paragraph 16/22
Tortor sed maecenas elementum consectetur tincidunt adipiscing aliquam commodo.Tortor sed maecenas elementum consectetur tincidunt adipiscing aliquam commodo. Tortor sed maecenas elementum consectetur tincidunt adipiscing aliquam commodo.Tortor sed maecenas elementum consectetur tincidunt adipiscing aliquam commodo.
Large paragraph 18/24
Tortor sed maecenas elementum consectetur tincidunt adipiscing aliquam commodo.Tortor sed maecenas elementum consectetur tincidunt adipiscing aliquam commodo. Tortor sed maecenas elementum consectetur tincidunt adipiscing aliquam commodo.Tortor sed maecenas elementum consectetur tincidunt adipiscing aliquam commodo.
Unordered list 16/21 | List spacing: 8px
- Tortor sed maecenas elementum consectetur tincidunt adipiscing aliquam commodo.
- Tincidunt adipiscing aliquam commodo. Tortor sed maecenas elementum.Tortor sed maecenas elementum.Tortor sed maecenas elementum.Tortor sed maecenas elementum.
- Consectetur tincidunt adipiscing aliquam commodo.
- Tortor sed maecenas elementum consectetur tincidunt adipiscing aliquam commodo.
Ordered list 16/21 | List spacing: 8px
- Tortor sed maecenas elementum consectetur tincidunt adipiscing aliquam commodo.
- Tincidunt adipiscing aliquam commodo. Tortor sed maecenas elementum.Tortor sed maecenas elementum.Tortor sed maecenas elementum.Tortor sed maecenas elementum.
- Consectetur tincidunt adipiscing aliquam commodo.
- Tortor sed maecenas elementum consectetur tincidunt adipiscing aliquam commodo.
> Title Underlines
An underline may be used under elements as a decorative element or as a separator from the rest of the content.
The underline - as well as slider arrows - should be Blue-300 on a white background and Accent Colour on light gray background.
Avoid overusing the underline. Use either within the section, or for the section header, not both.
T1 | Element title
Underline Size - Height: 4px | Width: Font Size * 1.5
T2 | Element title
Underline Size - Height: 4px | Width: Font Size * 1.5
T3 | Element title
Underline Size - Height: 4px | Width: Font Size * 1.5
T4 | Element title
Underline Size - Height: 4px | Width: Font Size * 1.5
T5 | Element title
Underline Size - Height: 3px | Width: Font Size * 2
T6 | Element title
Underline Size - Height: 2px | Width: Font Size * 2