Typography
Elevate’s typography system offers a flexible and consistent way to manage text sizes across your application. It defines a set of font sizes tailored for various use cases, from subtle footnotes to bold, prominent headings.
How It Works
The font sizes are defined in elevate/core/system/etc/typography.ts
as part of the size
property:
Font Sizes
Name | Value | Description |
---|---|---|
tiny | 0.533rem | Smallest size for subtle or legal text. |
small | 0.711rem | Slightly larger text for captions. |
base | 1rem | Standard body text size. |
heading6 | 1.125rem | Smallest heading size. |
heading5 | 1.5rem | Slightly larger heading for subsections. |
heading3 | 3.375rem | Large headings for standout content. |
heading2 | 5.062rem | Extra-large headings for important areas. |
heading1 | 7.594rem | Largest size for main titles. |
eyebrow | 0.583rem | Decorative text for overlines or tags. |
Simplified, Hierarchical Text Styling
The font sizes in Elevate help create:
- Clear Text Hierarchy: Sizes are designed to visually guide the reader.
- Readability: Well-balanced text scales ensure optimal legibility across devices.
- Clean Markup: Developers can use size tokens directly without the need for additional styling.
For example:
This approach ensures a consistent and readable typography system.