fluid-typography-system

name	fluid-typography-system
description	Use when designing responsive typography. Fluid type (calc + viewport units) scales smoothly between breakpoints.

Fluid Typography System

Fluid typography uses clamp(min, fluid, max) to scale type smoothly. Eliminates step-function breakpoint jumps.

CSS fluid type pattern

h1 {
  font-size: clamp(2.5rem, 5vw + 1rem, 5rem);
}
h2 {
  font-size: clamp(1.875rem, 3.5vw + 0.5rem, 3.5rem);
}
p {
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
}

clamp(min, fluid, max): 'fluid' scales with viewport; min and max set bounds.

Scale ratios

Common scale ratios:

• Minor third (1.2): subtle hierarchy
• Major third (1.25): balanced hierarchy
• Perfect fourth (1.333): bold hierarchy (recommended for editorial)
• Golden ratio (1.618): dramatic hierarchy (display brands)

The scale ratio applied across h1-h6 + body creates consistent rhythm.

Mobile considerations

Body text minimum: 16px (1rem) for legibility. Display heading minimum: 32px (2rem) for impact. Caption minimum: 14px (0.875rem).

Fluid type lets you scale up from these floors as viewport grows.

Where this fits in the X3 empire

Used in CardPrepAI responsive typography across all marketing pages.