Skip to content

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',
heading6: '1.125rem',
heading5: '1.5rem',
heading4: '2.25rem',
heading3: '3.375rem',
heading2: '5.062rem',
heading1: '7.594rem',
eyebrow: '0.583rem'
}
};

Font Sizes

NameValueDescription
tiny0.533remSmallest size for subtle or legal text.
small0.711remSlightly larger text for captions.
base1remStandard body text size.
heading61.125remSmallest heading size.
heading51.5remSlightly larger heading for subsections.
heading33.375remLarge headings for standout content.
heading25.062remExtra-large headings for important areas.
heading17.594remLargest size for main titles.
eyebrow0.583remDecorative text for overlines or tags.

Simplified, Hierarchical Text Styling

The font sizes in Elevate help create:

  1. Clear Text Hierarchy: Sizes are designed to visually guide the reader.
  2. Readability: Well-balanced text scales ensure optimal legibility across devices.
  3. Clean Markup: Developers can use size tokens directly without the need for additional styling.

For example:

<div class="text:heading1">Welcome to Elevate</div>
<p class="text:base">This is the body text styled with the base size.</p>
<div class="text:tiny">Disclaimer: Tiny text for subtle information.</div>

This approach ensures a consistent and readable typography system.