Typography
Typography is the structure of every well-designed interface. It is used to guide users through the interface and help them understand the logic behind the interface intuitively.
Overview
Lato
Used for almost everything on digital:
UI elements,
data display, titles and paragraphs
Used in print and on social media:
Headings quotes, ...
Used in print with restrictions:
Titles, hero images and catchphrases.
Download the fonts
For the Clan Pro, please contact the brand direction of ENGIE.
For the Right Grotesk, please contact the brand direction of ENGIE.
Scale & Formatting
Heading Styles
Headings are used in your website to bring consistency and information architecture. Make sure to use them in the right order (H1 before H2, H3 before H4, etc.)
Peta - H1
Font: Lato - Bold
Font size: 76px
Line-height: 82px
Tera - H2
Font: Lato - Bold
Font size: 54px
Line-height: 64px
Giga - H3
Font: Lato - Regular
Font size: 36px
Line-height: 45px
Mega - H4
Font: Lato - Regular
Font size: 28px
Line-height: 35px
Kilo - H5
Font: Lato - Regular
Font size: 24px
Line-height: 34px
Hecto - H6
Font: Lato - Regular
Font size: 20px
Line-height: 30px
Base Styles
Base styles define the foundational type size used in the body of the website: default texts, links, etc…
Deca - bold
Font: Lato - Bold
Font size: 18px
Line-height: 28px
Base - regular
Font: Lato - Regular
Font size: 16px
Line-height: 24px
Base - bold
Font: Lato - Bold
Font size: 16px
Line-height: 24px
Deci - regular
Font: Lato - Regular
Font size: 14px
Line-height: 20px
Deci - bold
Font: Lato - Bold
Font size: 14px
Line-height: 20px
Centi - regular
Font: Lato - Regular
Font size: 12px
Line-height: 16px
Centi - bold
Font: Lato - Bold
Font size: 12px
Line-height: 16px
Centi - italic
Font: Lato - Italic
Font size: 12px
Line-height: 16px
Common mistakes
Information hierarchy
Using headings in the wrong order weakens the information architecture of the page.
Using headings in the correct order makes the information on the page clearer for the user, in addition to meat accessibility requirements.
Code
Please refer to the design tokens page.