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.
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.
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.
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.
1. Install the Token Studio Plugin
2. Run the plugin
3. Apply a type scale token on a text layer
4. Select a viewport (Desktop, tablet, mobile)
5. Watch the plugin automatically generate the type-scaling