AIR Stack

Appearance

Typography ​

The typography utilities provide a complete implementation of the Material Design 3 type scale. It standardizes sizes, weights, letter spacings (tracking), and line heights across your entire application.

Theme Variables ​

All typography sizes scale proportionally based on a root variable. You can globally scale your app's typography by overriding --font-base.

css
:root {
  --font-base: 1rem; /* Adjusting this scales all typography relatively */
}

The library exposes over 60 granular variables covering every aspect of the type scale (e.g., --font-body-large-size, --font-title-medium-weight). However, you should rarely need to interact with these directly; instead, use the provided utility classes.

Composed Utilities ​

Apply these utility classes to any text element to instantly format it according to the Material Design specs.

html
<!-- Display: For the largest text on the screen -->
<h1 class="text-display-large">Display Large</h1>

<!-- Headline: For prominent headings -->
<h2 class="text-headline-medium">Headline Medium</h2>

<!-- Title: For medium emphasis text, like card titles -->
<h3 class="text-title-small">Title Small</h3>

<!-- Body: For standard reading text -->
<p class="text-body-large">This is the default body large text used for long-form reading.</p>

<!-- Label: For very small, structural text like button labels or captions -->
<span class="text-label-medium">Label Medium</span>

Expressive Typography (Emphasized) ​

The library also includes the "Expressive" emphasized typography variants. These variants retain the exact dimensions (size, line-height, letter-spacing) of their base classes but bump the font weight slightly (e.g., from 400 to 500, or 500 to 600) to draw attention without disrupting the layout.

html
<p class="text-body-large">
  This is normal text, but <span class="text-body-large-emphasized">this text is emphasized</span>.
</p>

To use an emphasized variant, append -emphasized to any standard typography utility class.