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:

export const typography = {
  size: {
    tiny: '0.533rem',
    small: '0.711rem',
    base: '1rem',
    h6: '1.125rem',
    h5: '1.5rem',
    h4: '2.25rem',
    h3: '3.375rem',
    h2: '5.062rem',
    h1: '7.594rem',
    eyebrow: '0.583rem'
  }
};

Font Sizes

Name	Description	Value	Example
tiny	Smallest size for subtle or legal text.	0.533rem	Aa
eyebrow	Decorative text for overlines or tags.	0.583rem	Aa
small	Slightly larger text for captions.	0.711rem	Aa
base	Standard body text size.	1rem	Aa
h6	Smallest heading size.	1.125rem	Aa
h5	Slightly larger heading for subsections.	1.5rem	Aa
h4	Medium headings for section titles.	2.25rem	Aa
h3	Large headings for standout content.	3.375rem	Aa
h2	Extra-large headings for important areas.	5.062rem	Aa
h1	Largest size for main titles.	7.594rem	Aa

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:

<div class="font:h1:sans text:red+1:blog">Welcome to Elevate</div>
<p class="font:base:loose text:indigo">This is the body text styled with the base size.</p>
<div class="font:tiny text:grey">Disclaimer: Tiny text for subtle information.</div>

This approach ensures a consistent and readable typography system.