ZUI — Typography

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

Usage

/* 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);
}

Fonts

Configure fonts in theme.css. ZUI provides robust fallback stacks for sans-serif, serif, and monospace.

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

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

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

/* Override in theme.css */
:root {
  --font-body: 'Inter', var(--font-stack-sans);
  --font-display: 'Playfair Display', var(--font-stack-serif);
  --font-code: 'JetBrains Mono', var(--font-stack-mono);
}

--font-display defaults to var(--font-body), so setting --font-body alone changes both. Override --font-display separately to use a different typeface for headings.

Font Stacks

ZUI ships built-in fallback stacks for each generic family. These are used as the base for --font-body, --font-display, and --font-code, and can be referenced directly in your own CSS.

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

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

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

--font-stack-sans:  system-ui, sans-serif;
--font-stack-serif: Charter, 'Bitstream Charter', 'Sitka Text', Georgia, Cambria, serif;
--font-stack-mono:  ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;

Font Weights

--font-weight-light Light (300)

--font-weight-regular Regular (400)

--font-weight-medium Medium (500)

--font-weight-bold Bold (700)

Line Heights

--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

--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)