Typography

Principle

Typography must remain readable, clear and consistent across all screen sizes, themes and zoom levels.

Base body text should be at least 16px and should not be reduced at smaller breakpoints, including mobile.
Avoid text smaller than 14px; small text reduces readability, especially on mobile.
If smaller text is necessary (e.g., legal info), increase contrast and spacing.
Avoid using px based font-sizes that prevent text resizing. Prefer relative units like em or rem.
Typography should scale consistently across devices and user settings.
Content must remain readable and functional when users zoom text up to 200%.
Text must not be cut off, overlap, or become unreadable at any screen size or zoom level.

For body text, use a line height of approximately 1.4–1.6 and ensure that line height and spacing scale in a way that preserves readability on smaller screens.
For headings, use a slightly tighter line height (around 1.1–1.3), but never so tight that lines touch or overlap.
Avoid using very large line heights for short or single-line texts (labels, small helper texts, badges). When such text wraps to multiple lines, it can create visually exaggerated gaps between lines and break layout rhythm.
Keep vertical spacing between components consistent and aligned with the spacing scale used in the design system.
Whenever possible, design with realistic content, not only placeholder text. Very short or very long real text can reveal line-height and spacing issues that are not visible with generic lorem ipsum.
Layout must remain readable and functional when users increase line-height, letter-spacing or word-spacing.

Use clear visual hierarchy: larger + bolder for headings, regular for body.
Avoid subtle differences (e.g., 16px vs 15px) — users cannot perceive the distinction.
Avoid overusing uppercase text; it reduces readability.
Use consistent scale across the design system (e.g., modular scale or consistent increments).

Ensure text remains readable across different font weights.
Use 400–500 for body text
Use 600–700 for headings. Heavier weights (800–900) may be used sparingly for display purposes but can reduce readability in UI contexts.
Very thin fonts (100–300) often fail readability, especially in dark mode. Consider increasing the font size when using a thin weight.
Avoid using text over busy backgrounds unless an overlay ensures sufficient contrast.

Left-align most text; center-align only short labels or headings.
Avoid justified text — it creates inconsistent spacing and reduces legibility, especially at larger text sizes.
Ensure multi-line labels or buttons remain readable and don’t become cramped.