Typography

This is Inter

Inter is a typeface specially designed for user interfaces with a focus on high legibility of text on screens. It comes in a variety of weights and styles, making it a versatile typeface for different use cases. Inter makes it easy to read text on screens, which is essential for a system that needs to be accessible to all users with different visual abilities.

Regular and Bold Typography

The design system utilizes both regular and bold typography styles to create a clear visual hierarchy and emphasize important information.

Inter Regular: Used for body text, labels, and other non-emphasized content.
Inter Bold: Emphasized content.

Links

This is a link

Links are an essential part of typography, providing users with a way to navigate between different pages and sections of an app. Links are styled to be easily distinguishable from regular text to provide clear visual cues for users. They are underlined and change color when hovered over to indicate interactivity.

Dos and Don'ts

Dos

✔
Use Inter for all text elements to maintain consistency.
✔
Maintain left-aligned, ragged-right alignment for paragraphs to support readability.
✔
Limit font weights to Regular for text, and Bold for important information. For simplicity and cohesion.
✔
Use appropriate font sizes for different text elements.
✔
Use underlined text for links to make them easily recognizable.

Don'ts

✘
Don't use multiple font sizes or weights within the same block of text, as this reduces readability.
✘
Don't use bold text excessively, as it can reduce readability.
✘
Don't use low-contrast text colors between text and background that are hard to read.
✘
Don't use decorative or expressive typefaces outside of specific marketing materials or graphics.
✘
Don't use links for non-navigational purposes, use a button instead.

Further Documentation

For more information about typography and its implementation, refer to the DaisyUI documentation. You can find the Inter font here.