Typography Reference
Self-contained pattern catalog. One element per block. No cross-references, no kitchen-sink demo.
2026 · reference · vertical rhythm
Rhythm scale
Four tokens. Doubling ratio. Concentric — every container uses a larger token than its children.
space-y-2 · tight pair (heading + descriptor)
space-y-6 · intra-section (paragraph to paragraph)
space-y-12 · inter-subsection
space-y-20 · major section break
Headings
text-5xl font-bold tracking-default leading-defaulttext-balance · use as <h1>
Section eyebrow
text-xs font-semibold tracking-widest uppercase text-muted · use as <h2>
In-prose subheading
text-xl font-semibold tracking-tight · use as <h3>
Sub-subheading
text-base font-semibold · use as <h4> (rare)
One <h1>per page. Don't skip levels. If you reach for <h4>, your section may be too long.
Body prose
Body paragraphs need no classes. They inherit size and line-height from the document. Keep prose left-aligned; never justify.
The space between these two paragraphs is space-y-6 on the parent — the intra-section token.
default body — no classes needed
Muted text supports the main content. Never use it for primary reading.
text-muted — for secondary copy (captions, dates, helpers)
Inline elements
Never force-push to main.
<strong> font-bold · semantic importance
The meaning shifts with emphasis.
<em> italic · semantic stress
Run pnpm dev to start the server.
<code> font-mono text-sm bg-surface px-1.5 py-0.5 rounded · inline code
Press ⌘ + K to open command palette.
<kbd> font-mono text-sm border border-foreground/20 bg-surface px-1.5 py-0.5 rounded · key
See the project page for details.
link: text-foreground hover:text-accent decoration-muted underline decoration-dotted underline-offset-4
Lists
- First item.
- Long items wrap cleanly under the first line of content because we use
list-outside, notlist-inside. - Third item.
<ul> list-disc list-outside pl-4 marker:text-muted space-y-2
- Read the docs.
- Write the code.
- Ship it.
<ol> list-decimal list-outside pl-4 marker:text-muted space-y-2
- Top-level item.
- Nested item.
- Another nested item.
- Top-level sibling.
nested — child list inherits the same pattern
Use <ul> when order is irrelevant, <ol>when it matters. Don't pick the element by the marker glyph.
Definition list
- Stack
- Next.js 16, Tailwind v4, MDX
- Hosting
- Vercel
- Status
- Active
<dl> grid grid-cols-[max-content_1fr] gap-x-6 gap-y-2 · term + definition pairs
Underused element. Perfect for project metadata, FAQs, glossaries — anything that's a key/value pair.
Block quote
“Premature optimization is the root of all evil.”
<blockquote> border-l-2 border-accent pl-4 italic + <footer><cite>
Attribution goes in <footer> with <cite> for the source name. Roman, not italic.
Code block
function greet(name: string) {
return `Hello, ${name}!`;
}<pre><code> bg-surface p-4 rounded font-mono text-sm overflow-x-auto
pnpm install
pnpm devwith caption — wrap in <figure> + <figcaption>
Callouts
note: bg-surface border-l-2 border-foreground/30 px-4 py-3 rounded-r
tip: bg-surface border-l-2 border-accent px-4 py-3 rounded-r
warning: bg-accent/10 border-l-4 border-accent px-4 py-3 rounded-r
Color alone isn't accessible — always include a label. Use role="alert" for warnings so screen readers announce them.
Figure with caption
<figure> space-y-2 · image + <figcaption> in mono muted
Table
| Token | Value | Use |
|---|---|---|
| space-y-2 | 8px | tight pair |
| space-y-6 | 24px | intra-section |
| space-y-12 | 48px | inter-subsection |
| space-y-20 | 80px | section break |
<table> w-full text-sm with <thead> + border-b row dividers
Always include <thead>. Screen readers use it to announce column context for every cell.
Horizontal rule
Content before the rule.
Content after the rule.
<hr> border-foreground/15 my-12 · topic shift when h2 doesn't fit