| name | typography |
| description | Apply professional typography principles to create readable, hierarchical, and aesthetically refined interfaces. Use when setting type scales, choosing fonts, adjusting spacing, designing text-heavy layouts, or when the user asks about readability, font pairing, line height, measure, or typographic hierarchy. |
Typography
Professional typography for user interfaces.
Output Contract
For type system recommendations:
## Type System
### Scale
- Base: [size, e.g., 16px]
- Ratio: [e.g., Minor Third 1.200]
- Rationale: [why this ratio]
### Hierarchy
| Level | Size | Weight | Line Height | Letter Spacing | Use |
|-------|------|--------|-------------|----------------|-----|
| Display | ... | ... | ... | ... | Hero, marketing |
| H1 | ... | ... | ... | ... | Page titles |
| H2 | ... | ... | ... | ... | Section heads |
| Body | ... | ... | ... | ... | Paragraphs |
| Small | ... | ... | ... | ... | Captions, labels |
### Fonts
- Primary: [font] - [rationale]
- Secondary: [font, if applicable]
- Mono: [font, if applicable]
### Implementation
```css
/* Ready-to-use CSS variables */
For typography audits:
```markdown
## Typography Audit
### Issues
| Element | Problem | Recommendation |
|---------|---------|----------------|
| ... | ... | ... |
### Quick Wins
- [Immediate improvement 1]
- [Immediate improvement 2]
Core Principles
Hierarchy & Structure
- Establish clear visual hierarchy through size, weight, and spacing
- Limit to 3-4 distinct heading levels in practice
- Use weight contrast (not just size) to differentiate levels
- Maintain consistent hierarchy patterns across the application
Readability First
- Optimize for scanning: users read in F-patterns
- Left-align body text (centered only for short, formal text)
- Ensure sufficient contrast (4.5:1 minimum, 7:1 preferred)
- Test with real content, not lorem ipsum
Restraint & Consistency
- Use 1-2 font families maximum (one serif, one sans-serif if pairing)
- Establish a type scale and stick to it
- Avoid decorative fonts for functional UI text
- Let whitespace do the work; resist the urge to fill
Type Scales
Modular Scales
Common ratios for harmonious sizing:
- Minor Second (1.067): Subtle, conservative
- Major Second (1.125): Gentle, professional
- Minor Third (1.200): Balanced, versatile
- Major Third (1.250): Bold, impactful
- Perfect Fourth (1.333): Strong hierarchy
- Golden Ratio (1.618): Dramatic, editorial
Practical Scale (Minor Third, base 16px)
text-xs: 12px (0.75rem)
text-sm: 14px (0.875rem)
text-base: 16px (1rem)
text-lg: 18px (1.125rem)
text-xl: 20px (1.25rem)
text-2xl: 24px (1.5rem)
text-3xl: 30px (1.875rem)
text-4xl: 36px (2.25rem)
text-5xl: 48px (3rem)
When to Deviate
- Marketing/hero sections can use larger jumps
- Dense data interfaces may need tighter scales
- Mobile often requires slightly larger base sizes
Measure (Line Length)
Optimal Ranges
- Body text: 45-75 characters (66 ideal)
- Short-form: 40-60 characters
- Wide layouts: Use columns or max-width constraints
- Mobile: Full width is acceptable due to narrow viewport
Implementation
max-w-prose
max-w-2xl
max-w-xl
Multi-Column Considerations
- Narrower columns = shorter measure acceptable
- Gutters should be at least 20px (1.25rem)
- Avoid orphaned words at column breaks
Line Height (Leading)
Guidelines by Context
- Body text: 1.5-1.7 (generous for readability)
- Headings: 1.1-1.3 (tighter, especially large sizes)
- UI labels: 1.2-1.4 (compact but legible)
- Buttons: 1.0-1.25 (single line, tight)
Adjustments
- Increase line height for wider measure
- Decrease for larger type sizes
- Consider the x-height of the typeface
- Dark mode may benefit from slightly more leading
Letter Spacing (Tracking)
General Rules
- Body text: Default (0) or very slight increase
- All caps: Always add positive tracking (+0.05em to +0.1em)
- Large headings: Slight negative tracking (-0.01em to -0.02em)
- Small text: Slight positive tracking for legibility
Tailwind Classes
tracking-tighter: -0.05em
tracking-tight: -0.025em
tracking-normal: 0
tracking-wide: 0.025em
tracking-wider: 0.05em
tracking-widest: 0.1em
All-Caps Text
- Always use
uppercase tracking-wide or tracking-wider
- Keep short (1-3 words ideal)
- Common for labels, category tags, eyebrow text
Font Selection
System Font Stacks
Performant and native-feeling:
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
font-family: ui-serif, Georgia, Cambria, "Times New Roman", serif;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
Web Font Considerations
- Limit to 2-3 weights per family (400, 500/600, 700)
- Use
font-display: swap for performance
- Variable fonts reduce file size for multiple weights
- Self-host for privacy and reliability
Pairing Principles
- Pair by contrast (serif + sans-serif)
- Match x-height for visual harmony
- Use one font for headings, one for body
- Ensure both have needed weights/styles
Safe Recommendations
- Sans-serif: Inter, Source Sans Pro, Open Sans, Work Sans
- Serif: Source Serif Pro, Lora, Merriweather, Literata
- Monospace: JetBrains Mono, Fira Code, Source Code Pro
Paragraph Spacing
Between Paragraphs
- Use margin-bottom equal to line-height or slightly more
- Typically 1em to 1.5em between paragraphs
- First paragraph after heading: reduced or no top margin
Between Sections
- 2-3x paragraph spacing between major sections
- Use consistent spacing tokens from design system
- Consider visual grouping via proximity
Typographic Details
Quotation Marks
- Use curly quotes (" " ' ') not straight quotes (" ')
- Proper apostrophes: it's, don't, '90s
- Consider the locale (French guillemets, German quotes)
Dashes
- Hyphen (-): Word breaks, compound words
- En dash (–): Ranges (2020–2024), relationships (New York–London)
- Em dash (—): Parenthetical statements, emphasis
Numbers
- Use tabular (monospace) figures in tables for alignment
- Use proportional figures in body text
- Consider old-style figures for editorial content
Ellipsis
- Use proper ellipsis character (…) not three periods
- Add thin space before/after in formal typography
Responsive Typography
Fluid Type
Scale font sizes smoothly between breakpoints:
font-size: clamp(1rem, 0.5rem + 1.5vw, 1.5rem);
Breakpoint Adjustments
- Increase base size slightly on mobile (17-18px)
- Reduce heading scale on mobile
- Increase line height for small screens
- Reduce measure on tablets (prose can feel too wide)
Touch Targets
- Minimum 44x44px for tappable text elements
- Generous padding around links in body text
- Avoid text-only targets without visual indication
Dark Mode Typography
Adjustments
- Reduce font weight slightly (medium instead of semibold)
- Increase letter spacing marginally
- Consider warmer white (#f5f5f5) over pure white (#fff)
- Increase line height by ~0.1 for perceived lightness
Contrast Considerations
- Pure white on pure black is harsh; soften both
- Aim for 10:1 to 15:1 contrast in dark mode
- Test with actual users; perceived contrast differs
Accessibility
Font Size Minimums
- Body text: 16px minimum (don't go below)
- Secondary text: 14px minimum, 12px absolute floor
- Legal/caption: 12px with increased tracking
User Preferences
- Respect
font-size from browser settings
- Use relative units (rem) not fixed (px) for text
- Provide text scaling options for dense UIs
Dyslexia Considerations
- Avoid justified text
- Prefer sans-serif with distinct letterforms
- Generous line height and paragraph spacing
- OpenDyslexic as optional font choice
Common Mistakes
Avoid
- All-caps body text or long headings
- Centered body paragraphs
- Line length over 80 characters
- Insufficient contrast for "aesthetic" reasons
- Mixing too many font families
- Decorative fonts for UI text
- Justified text on the web (causes rivers)
- Tiny gray text on white backgrounds
Watch For
- Orphans and widows in prominent text
- Inconsistent heading hierarchy
- Missing font fallbacks
- Layout shift from web font loading
- Underlined text that isn't a link
