Typography
Typographic hierarchy organizes type and establishes an order of importance within the content and this helps the user to easily find what they are looking for and navigate the content without hesitation.
For accessibility reasons we should aim for a line-height adhering to the 8 point grid, which means rounding up numbers to meet the grid specs.
YouSee’s Typeface
YouSee use the LTF Etica typeface (designed by Type Together), which is used throughout the entire website.
The usage is limited to the following variations:
- LFT Etica Bold
- LFT Etica SemiBold
- LFT Etica Regular
- LFT Etica Light
How to use:
Color
As a general rule, all text on the website should be set in ys-color-grey-28, as defined in the Colors section or ys-color-white when on dark backgrounds.
Font sizes and weights
A set of typographic rules have been determined and implemented:
| Mobile/Tablet1 | Desktop2 | |
|---|---|---|
Main Title.ys-main-title |
Font size: 40px Line height: 48px (1.2) font weight: bold (700) |
Font size: 56px Line-height: 72px (1.28) font weight: bold (700) |
Primary Title.ys-primary-title |
Font size: 32px Line height: 40px (1.25) font weight: bold (700) |
Font size: 40px Line-height: 56px (1.28) font weight: bold (700) |
Secondary Title.ys-secondary-title |
Font size: 24px Line height: 32px (1.33) font weight: bold (700) |
Font size: 24px Line-height: 40px (1.67) font weight: bold (700) |
Subtitle.ys-subtitle |
Font size: 24px Line height: 30px (1.25) font weight: light (200) |
Font size: 24px Line-height: 40px (1.67) font weight: light (200) |
Body Text.ys-body-text |
Font size: 16px Line height: 24px (1.5) font weight: normal (400) |
|
Small Text.ys-small-text |
Font size: 12px Line height: 15px (1.25) font weight: normal (400) Font style: italic |
|
Notes
1) “Mobile/Tablet” in this context is defined as any device having a viewport with a maximum width of 992px.
2) “Desktop” in this context is defined as any device having a viewport with a minimum width of 992px.