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

We have 4 typographies with specific uses depending on the media (advertising, print, digital, office suite).

Lato

Used for almost everything on digital:
UI elements, data display, titles and paragraphs
Exception: for the office suite, use Arial

Roboto font example

Used on digital for numbers only.

Clan pro font example

Used in print, events, advertising
for running text and headings

Right Grotesk font example

Used in print, events, advertising
for titles only!

Download the fonts

Lato font on Google fonts

Roboto Mono on Google 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.