ZUI — Typography

Type Scale

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

--step--4The quick brown fox

--step--3The quick brown fox

--step--2The quick brown fox

--step--1The quick brown fox

--step-0The quick brown fox

--step-1The quick brown fox

--step-2The quick brown fox

--step-3The quick brown fox

--step-4The quick brown fox

--step-5The quick brown fox

--step-6The 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-bodyThe quick brown fox jumps over the lazy dog

--font-displayThe quick brown fox jumps over the lazy dog

--font-codeThe 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-sansThe quick brown fox jumps over the lazy dog

--font-stack-serifThe quick brown fox jumps over the lazy dog

--font-stack-monoThe 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-lightLight (300)

--font-weight-regularRegular (400)

--font-weight-mediumMedium (500)

--font-weight-boldBold (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-2xsTighter tracking (-0.05em)

--letter-spacing-xsSlightly tight (0.025em)

--letter-spacing-smSmall caps style (0.05em)

--letter-spacing-mdMedium tracking (0.075em)

--letter-spacing-lgWide tracking (0.15em)