Typography

Fluid type scale, font stacks, and typography utility classes powered by design tokens.

Type Scale

ZUI uses a fluid type scale generated with Utopia. Sizes interpolate between viewport widths for seamless responsive typography.

--step--4 The quick brown fox

--step--3 The quick brown fox

--step--2 The quick brown fox

--step--1 The quick brown fox

--step-0 The quick brown fox

--step-1 The quick brown fox

--step-2 The quick brown fox

--step-3 The quick brown fox

--step-4 The quick brown fox

--step-5 The quick brown fox

--step-6 The quick brown fox

/* With utility classes */
<p class="zui-text-2">Large text</p>
<p class="zui-text-base">Base text</p>
<p class="zui-text--1">Small text</p>

/* With custom properties */
.my-heading {
  font-size: var(--step-4);
}

Configure fonts in theme.css. ZUI provides robust fallback stacks.

--font-sans The quick brown fox jumps over the lazy dog

--font-serif The quick brown fox jumps over the lazy dog

--font-mono The quick brown fox jumps over the lazy dog

/* Override in theme.css */
:root {
  --custom-font-sans: Geist, Inter;
  --custom-font-serif: Times New Roman;
  --custom-font-mono: Geist Mono;
}

--font-weight-light Light (300)

--font-weight-regular Regular (400)

--font-weight-medium Medium (500)

--font-weight-bold Bold (700)

--line-height-xs

1.25 — Tight line height suited for headings and large display text where lines are short.

--line-height-sm

1.375 — Slightly tighter than default, good for UI labels and short blocks of text.

--line-height-md

1.5 — The default line height for body text. Provides comfortable reading for paragraphs.

--line-height-lg

1.625 — Generous spacing for improved readability in longer prose content.

--line-height-xl

2 — Double-spaced. Useful for emphasised text or legal/document content.

--letter-spacing-2xs Tighter tracking (-0.05em)

--letter-spacing-xs Slightly tight (0.025em)

--letter-spacing-sm Small caps style (0.05em)

--letter-spacing-md Medium tracking (0.075em)

--letter-spacing-lg Wide tracking (0.15em)