This tool is part of these guided projects. Each project provides step-by-step instructions with checklists and all the tools you need in one place.
Tools you might need next
Calculate typographic modular scale ratios and font sizes. Build harmonious type hierarchies with musical ratios for headings, body text, and captions.
Calculate golden ratio proportions and phi-based dimensions. Apply 1.618 spacing, layout segments, and typography sizes for balanced visual composition.
Generate icon grid and alignment guides for pixel-perfect icon design. Preview square, circle, and keyline grids for consistent app and UI icon systems.
Fluid typography scales font-size smoothly between a minimum and maximum viewport width using CSS clamp(). This eliminates discrete breakpoint jumps.
font-size: clamp(min, preferred, max); preferred = min + (max - min) × (100vw - minVW) / (maxVW - minVW)The preferred value uses vw units for smooth scaling. A typical formula: preferred = minSize + slope × viewport; where slope = (maxSize - minSize) / (maxVP - minVP).
Updated: July 2026
Create a fluid heading that is 24px on mobile (375px) and 48px on desktop (1440px).
→ font-size: clamp(1.5rem, 0.93rem + 2.25vw, 3rem)
Subtle fluid scaling for body text that grows slightly on larger screens.
→ font-size: clamp(1rem, 0.93rem + 0.38vw, 1.25rem)
Pure vw sizing has no minimum or maximum. Text becomes unreadable on very small screens and oversized on ultra-wide monitors. Always wrap in clamp() or set min/max boundaries.
Use rem for the min and max values to respect user font-size preferences (accessibility). Only the viewport portion should use vw. Users who increase browser font size need this to work.
Calculate fluid clamp() font sizes that scale with viewport width. Generate CSS clamp formulas for accessible, responsive typography across breakpoints. It applies the fluid typography with clamp() (font-size: clamp(min, preferred, max); preferred = min + (max - min) × (100vw - minVW) / (maxVW - minVW)). For example: heading that scales 24px to 48px — Create a fluid heading that is 24px on mobile (375px) and 48px on desktop (1440px).