Typography Scale
Consistent type hierarchy using Vanilla Breeze tokens. Includes headings, body text variants, prose containers, and text utilities.
Overview
This typography system covers:
- Headings - h1 through h6 with balanced wrapping
- Body variants - Lead, subtitle, small, caption
- Prose container - Optimal reading experience for long-form content
- Code typography - Inline code, pre blocks, and kbd
- Links and quotes - Styled inline elements
- Display text - Hero and marketing sizes
Live Demo
See the type scale in action:
Base Typography
Base setup
body { font-family: var(--font-sans); font-size: var(--font-size-md); line-height: var(--line-height-normal); color: var(--color-text);}Headings
Heading styles
h1, h2, h3, h4, h5, h6 { font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); color: var(--color-text); text-wrap: balance;} h1 { font-size: var(--font-size-4xl); letter-spacing: var(--letter-spacing-tight);} h2 { font-size: var(--font-size-3xl); letter-spacing: var(--letter-spacing-tight);} h3 { font-size: var(--font-size-2xl); }h4 { font-size: var(--font-size-xl); }h5 { font-size: var(--font-size-lg); } h6 { font-size: var(--font-size-md); font-weight: var(--font-weight-bold);}Body Text Variants
Body variants
.lead { font-size: var(--font-size-xl); line-height: var(--line-height-relaxed); color: var(--color-text-muted);} .subtitle { font-size: var(--font-size-lg); color: var(--color-text-muted);} small, .small { font-size: var(--font-size-sm);} .caption { font-size: var(--font-size-xs); color: var(--color-text-muted);}Prose Container
Optimal reading experience for long-form content with proper spacing:
Prose styles
.prose { max-width: var(--measure-normal); /* 65ch */ font-size: var(--font-size-md); line-height: var(--line-height-relaxed);} .prose > * + * { margin-block-start: var(--size-m);} .prose h2 { margin-block-start: var(--size-2xl);} .prose h3 { margin-block-start: var(--size-xl);} /* Reduced gap after headings */.prose h2 + *,.prose h3 + *,.prose h4 + * { margin-block-start: var(--size-s);} /* Lists */.prose ul,.prose ol { padding-inline-start: var(--size-l);} .prose li + li { margin-block-start: var(--size-xs);}Code Typography
Code styles
code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.9em;} code { padding: var(--size-3xs) var(--size-2xs); background: var(--color-surface-raised); border-radius: var(--radius-s);} pre { padding: var(--size-m); background: var(--color-surface-sunken); border-radius: var(--radius-m); overflow-x: auto;} pre code { padding: 0; background: none;} kbd { padding: var(--size-3xs) var(--size-xs); background: var(--color-surface); border: var(--border-width-thin) solid var(--color-border); border-radius: var(--radius-s); box-shadow: 0 2px 0 var(--color-border);}Links
Link styles
a { color: var(--color-primary); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; transition: color var(--duration-fast) var(--ease-out);} a:hover { color: var(--color-primary-hover);} /* Remove underline for nav links */nav a { text-decoration: none;}Blockquotes
Blockquote styles
blockquote { padding-inline-start: var(--size-l); border-inline-start: 4px solid var(--color-primary); font-style: italic; color: var(--color-text-muted);} blockquote cite { display: block; margin-block-start: var(--size-s); font-size: var(--font-size-sm); font-style: normal;}Display Text
Large text for hero sections and marketing pages:
Display text
.display-xl { font-size: var(--font-size-5xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-none); letter-spacing: var(--letter-spacing-tight);} .display-lg { font-size: var(--font-size-4xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-tight);}Text Utilities
Text utilities
.text-center { text-align: center; }.text-right { text-align: right; }.text-balance { text-wrap: balance; }.text-pretty { text-wrap: pretty; } .uppercase { text-transform: uppercase; letter-spacing: var(--letter-spacing-wide);} .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;} .line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;}Related
Tokens Starter
Typography tokens and font stacks
layout-text Element
Prose-like text container element
All Tokens
Complete token reference