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
body {
font-family: var(--font-sans);
font-size: var(--font-size-md);
line-height: var(--line-height-normal);
color: var(--color-text);
}
Headings
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
.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 {
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, 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
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 {
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-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-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;
}