Typography

Our typography is the core system of fonts. It plays an essential role in design and communication.

Font family

We support three typefaces (1) Ubuntu and (2) Open Sans for structuring content and (3) Inter for numerical values.

 

 

 

Ubuntu

Ubuntu is an Open Type-based font family, designed to be a modern, humanist-style typeface. It comes in three weights, regular, medium and bold. We use this type mainly for navigation, titles, and headlines. Ubuntu enhances the design by adding rhythm, creating a clear hierarchy, and providing a strong visual identity to our brand.

null

 

 

 

 

Open Sans

Open Sans is our secondary font and it comes in three weights. Open Sans is designed and optimised for legibility across web, and mobile interfaces, and has excellent legibility characteristics in its letterforms, especially in smaller sizes and in larger quantities. We use this type for body text.

null

 

 

 

 

Inter

Inter is our tertiary font and it comes in three weights. Inter is designed for improving legibility on computer screens. It's useful when you want to distinguish similar characters, such as 0 and O.

null

 

 

 

Use different fonts

If you prefer different fonts than what VUD offers, you can specify the font families in these respective tokens:

Ubuntu

Open Sans

Inter

core-font-familiy-primary

core-font-familiy-secondary

core-font-familiy-tertiary

 

 

Use static type

If you prefer a static type where every step has a fixed font size at every viewport width, you can use static tokens. This ensures that the font remains unchanged regardless of the device or screen size.

 

 

 

Use type scaling

If you prefer different font sizes for various screen sizes, use typescale tokens. The font size will automatically scale according to your device. These tokens allow the font to adapt and remain readable across different devices and screen resolutions. Note that the VUD components use type-scale tokens. E.g. when you rotate your phone to landscape mode, the font size will adapt to the viewport width.