Typography
A structured type system designed for clarity and AI-assisted development.
How It Works
Typography uses Tailwind's built-in utilities. We define three usage contexts: Title (headings, heroes), Body (paragraphs, content), and UI (buttons, labels, navigation).
Same font family (Inter) → different sizes/weights per context → AI uses standard Tailwind classes.
Font Contexts
Three usage patterns with distinct styling conventions.
Sample Text
- Weight:
- Semibold (600)
- Sizes:
- text-lg → text-6xl
- Tracking:
- tracking-tight (large) / normal (small)
Page headings, hero text, section titles
Sample Text
- Weight:
- Regular (400)
- Sizes:
- text-sm, text-base
- Tracking:
- normal
Paragraphs, descriptions, long-form content
Sample Text
- Weight:
- Medium (500)
- Sizes:
- text-xs, text-sm
- Tracking:
- normal / tracking-wide (all caps)
Buttons, labels, nav items, form elements
Font Family
One primary font (Inter) with a mono variant for code.
The quick brown fox jumps over the lazy dog
font-sansDefault for all text. Used for titles, body, and UI.
const value = 42;
font-monoCode blocks, inline code, technical content.
Titles
Heading hierarchy from hero sections to small labels.
text-6xltext-5xltext-4xltext-3xltext-2xltext-xlAll titles use font-semibold (600). Large titles (3xl+) add tracking-tight for visual density.
Text Sizes
Body text and paragraph sizes for content.
text-2xltext-xltext-lgtext-basetext-smtext-xsText sizes follow Tailwind defaults. Most body copy uses text-sm or text-base.
Font Weights
Weight scale from thin to black. Common weights highlighted.
font-normalfont-mediumfont-semiboldfont-boldWe use three weights: Regular for body text, Medium for UI elements, Semibold for titles. Bold is available but rarely needed.
Line Height
Leading options for different content types.
leading-none1 — Single-line titlesThe quick brown fox jumps.
leading-tight1.25 — Headlines, cardsThe quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
leading-snug1.375 — UI text, short copyThe quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
leading-normal1.5 — Body text (default)The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
leading-relaxed1.625 — Long-form contentThe quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
leading-loose2 — Extra readable, accessibilityThe quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
Letter Spacing
Tracking options for visual refinement.
tracking-tighter(-0.05em)tracking-tight(-0.025em)tracking-normal(0)tracking-wide(0.025em)tracking-wider(0.05em)tracking-widest(0.1em)Text Colors
Semantic text colors from the color system.
text-foregroundPrimary text, headingstext-muted-foregroundSecondary text, descriptionstext-primaryLinks, emphasistext-destructiveError messagestext-success-700Success messagestext-warning-700Warning messagesProse Defaults
Standard text treatments for rich content.
Normal paragraph text with default styling.
Strong text uses font-semibold (600).
Emphasis text uses italic styling.
Hyperlinks use the primary color with underline on hover.
Blockquotes are indented with a left border.
Inline code uses mono font with a muted background.
Conventions
Common Patterns
- Page titles:
text-3xl font-semibold tracking-tight - Section headings:
text-xl font-medium - Card titles:
font-medium - Body text:
text-smortext-base - Muted text:
text-muted-foreground
AI-Friendly Naming
We use Tailwind's standard utility classes. AI models trained on Tailwind will naturally use correct class names.
text-sm— not "small-text"font-semibold— not "bold" or "600"tracking-tight— not "letter-spacing"leading-relaxed— not "line-height"
Implementation
Variations
Common typography patterns for UI components.
Form labels, navigation
text-sm font-mediumMetadata, timestamps
text-xs text-muted-foregroundCategory tags, sections
text-xs font-medium uppercase tracking-wide text-muted-foreground