Typography
A responsive type scale with tokens and utility classes, set in Outfit.
Overview
Morpha UI is set in Outfit across every weight and size. The type scale is responsive: each step defines a value per breakpoint — mobile-first base, Tablet (≥768px), Desktop (≥1024px) and Desktop Large (≥1440px) — so headings scale up naturally on larger screens.
The scale covers headings (H1–H6), Body / Body Small, Caption, and Label /
Label Small.
Token Contract
Each step is a set of CSS variables and a matching utility class:
- Variables:
--type-h1-size,--type-h1-line-height,--type-h1-weight,--type-h1-letter-spacing(and the same pattern for every step). - Utility class:
.type-h1,.type-body,.type-caption,.type-label, … which applies all four properties at once.
The size and line-height variables are overridden inside responsive @media blocks, so a single
.type-h1 element fluidly adapts without any per-breakpoint classes in your markup.
Preview
Resize the window to see the scale adapt across breakpoints.
Heading 1 — The quick brown fox jumps over the lazy dog
Heading 2 — The quick brown fox jumps over the lazy dog
Heading 3 — The quick brown fox jumps over the lazy dog
Heading 4 — The quick brown fox jumps over the lazy dog
Heading 5 — The quick brown fox jumps over the lazy dog
Heading 6 — The quick brown fox jumps over the lazy dog
Body — The quick brown fox jumps over the lazy dog
Body Small — The quick brown fox jumps over the lazy dog
Caption — The quick brown fox jumps over the lazy dog
Label — The quick brown fox jumps over the lazy dog
Label Small — The quick brown fox jumps over the lazy dog
Usage
Apply a step with its utility class:
<h1 className="type-h1">Page title</h1>
<p className="type-body">Body copy in Outfit.</p>
<span className="type-label">LABEL</span>The same tokens ship in the Morpha theme, so the scale travels with the design system into any Tailwind v4 project. Install it with the CLI:
npx morpha-ui@latest add themepnpm dlx morpha-ui@latest add themebunx --bun morpha-ui@latest add theme