Type scale tokens
Font size tokens on a Major Third (1.25×) ratio plus fluid heading tokens using clamp() — consistent type hierarchy without a single breakpoint.
Quick implementation
:root {
/* Fixed scale — Major Third ratio (×1.25) */
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.875rem; /* 14px */
--text-base: 1rem; /* 16px */
--text-lg: 1.125rem; /* 18px */
--text-xl: 1.25rem; /* 20px */
--text-2xl: 1.5rem; /* 24px */
--text-3xl: 1.875rem; /* 30px */
--text-4xl: 2.25rem; /* 36px */
--text-5xl: 3rem; /* 48px */
--text-6xl: 3.75rem; /* 60px */
/* Fluid headings — scale between viewport widths
without any @media breakpoints */
--heading-1: clamp(var(--text-3xl), 5vw, var(--text-5xl));
--heading-2: clamp(var(--text-2xl), 4vw, var(--text-4xl));
--heading-3: clamp(var(--text-xl), 3vw, var(--text-3xl));
}
/* Usage */
h1 { font-size: var(--heading-1); }
h2 { font-size: var(--heading-2); }
h3 { font-size: var(--heading-3); }
p { font-size: var(--text-base); }Prompt this to your LLM
Includes role, constraints, framework variants, and edge cases.
You are a senior frontend engineer building a CSS type scale
for a design system.
Goal: Generate a type scale as CSS custom properties using a
Major Third ratio (1.25×), from --text-xs (12px) to --text-6xl
(60px). Add fluid heading tokens using clamp() that scale between
a minimum and maximum size without @media breakpoints.
Constraints:
- Use rem values, not px.
- Include px equivalents as inline comments.
- Fluid headings must use the fixed scale tokens as clamp() bounds
(e.g. clamp(var(--text-3xl), 5vw, var(--text-5xl))).
- Add semantic aliases: --body-sm, --body, --body-lg, --label,
--caption mapped to the appropriate scale steps.
- Include recommended line-height values for each category:
headings (1.1-1.3), body (1.5-1.7), captions (1.4).
Framework variant: Show how to use these tokens in Tailwind's
fontSize theme extension, mapping token names to [size, lineHeight]
tuples.
Return only the CSS and Tailwind config.Fixed tokens vs fluid headings
Body text and UI labels use fixed sizes — var(--text-base) is always 16px. Readable paragraph text doesn't need to scale with the viewport; it just needs to be large enough on all screens. Headings are different: a 48px h1 looks great on desktop but overwhelming on a 320px phone. clamp(var(--text-3xl), 5vw, var(--text-5xl)) gives the heading a sensible minimum, scales smoothly with the viewport, and caps at a maximum — no breakpoints.
Why 1.25 (Major Third) over other ratios
The golden ratio (1.618) creates too large a gap between steps for UI — the jump from 16px to 26px to 42px feels abrupt in dense interfaces. The Perfect Fourth (1.333) is popular for editorial content. The Major Third (1.25) is the sweet spot for product UIs: steps are distinct enough to create a clear hierarchy but close enough to use several steps within a single component without the scale feeling extreme. It also maps well to common design tool defaults (Figma's preset type scale uses similar values).