Typography
Typography is a fundamental element of design that can greatly impact the readability, usability, and aesthetics of a user interface. Our design system includes a robust typography system that is designed to provide clear and consistent typography guidelines for all of our products and platforms. In this section, we will explore the various typography properties and guidelines that govern our design system's typography, including font families, font sizes, line heights, letter spacing, and usage recommendations. By following our typography guidelines, you can ensure that your designs are easy to read, aesthetically pleasing, and consistent with our brand identity.
Whether you are a designer, developer, or product manager, understanding our typography system is essential to creating high-quality, cohesive user interfaces that meet the needs of our users and align with our brand identity.
The DHL User Interface Library Typography system is designed using relative (rem) values and use the default 16px base font-size to calculate typography token sizing.
To accommodate projects with different base, the DHL User Interface Library automagically applies the correct scaling based on the project's set base font-size.
For fine-tuned control, the --dui-size-theme CSS variable can be set as needed to calculate typography values. This variable, which defaults to 1, scales each typography design token proportionally to suit your specific requirements .
font family
| Variable name | value 1 | Example |
|---|
font size
| Variable name | value 1 | value 2 | Example |
|---|
font weight
| Variable name | value 1 | Example |
|---|
letter spacing
| Variable name | value 1 | Example |
|---|
line height
| Variable name | value 1 | Example |
|---|