typography

For type system recommendations:

```markdown

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

Issues

| Element | Problem | Recommendation |

|---------|---------|----------------|

| ... | ... | ... |

Quick Wins

• [Immediate improvement 1]
• [Immediate improvement 2]

```

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

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

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

```css

/ Tailwind equivalents /

max-w-prose / ~65ch /

max-w-2xl / 672px, good for articles /

max-w-xl / 576px, compact content /

```

Multi-Column Considerations

• Narrower columns = shorter measure acceptable
• Gutters should be at least 20px (1.25rem)
• Avoid orphaned words at column breaks

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

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

System Font Stacks

Performant and native-feeling:

```css

/ Sans-serif (modern) /

font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";

/ Serif /

font-family: ui-serif, Georgia, Cambria, "Times New Roman", serif;

/ Monospace /

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

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

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

Fluid Type

Scale font sizes smoothly between breakpoints:

```css

/ clamp(min, preferred, max) /

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

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

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

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