In order to give you a better service Airbus uses cookies. By continuing to browse the site you are agreeing to our use of cookies I agree

Typography

Used to tell stories, typography are also used for organizing the content, creating hierarchy and ease the end user’s experience.

A new set of text styles for the Digital world.

Airbus Design System uses the base Roboto, a Sans Serif font inspired by several fonts, including Helvetica. Made for the web, this font has several sizes and styles developed to balance content density and reading comfort.

 

Combining several parameters such as font size, font-weight, color, line height, etc, we created a set of defined text styles.

 

Size matters when it comes to creating content hierarchy. We created several text styles and inserted them into categories.

Heading, used as title, it helps the users quickly scan the content. Use them wisely, mix them with the spacing and your UI is going to be flawless.

Body are used for text paragraphs, several sizes are available and can be applied depending on the HMI type (18px body will better suit for public website with imagery and space)

Labels are mainly combined with other components, such as text fields, combo box, etc.

Small text is used for additional information.

Typography01
Using Roboto with Sketch

The UI Kit uses the font Roboto. You can download it and install it for free on Google Fonts.

For now, you only need 3 fonts to use the UIKit (Regular 400, Medium 500 and Bold 700), but we recommend you to download and install all fonts to stay consistent with the latest release if we decide to use more fonts variants in the UIKit.

 

Always use the text styles to stay synchronized with the library. In case you detect a bug or you feel some text styles are wrong or missing, tell us.

Typography02

Colours

App Icon

Ui Icons

Grid & layout

Back to top