Typography
Fonts are important for the readability of a page and are at the very foundation of a good user experience.
Font family
The native font of the design system is Inter (opens in a new tab).
We define several sizes to build a hierarchy of font sizes. The font sizes are defined in rem units which are relative to the root font size of the page.
The default root font size is defined by the browser and is usually 16px. This means that 1rem is usually equal to 16px.
Font sizes
Use it for the main title of a page.
Use it for a secondary title, typically in a drawer or in a modal.
Use it if you need to structure the content even more. It can be used for the name of sections in a page. It also a good size for card titles.
Sometimes used for subtitle or section titles.
This is the main font size used for the regular content of a page.
This is a good size for error messages in a form.
Caption size can be used for labels in specific cases where there is not a lot of space. It's also a good size for chip text.
Colors
The main color for the font size is [calculating...].
Some of the text can use other colors. Typically:
- Labels are [calculating...]
- Active tabs are [calculating...]
- Some secondary titles are [calculating...]
Line length
The line length is the number of characters per line. It's important to keep a good line length to ensure a good readability of the text.
Using the regular font size (14px), it's recommended to not have line larger than 1000px.