Fluid Typography & Clamp Calculator

Fluid Typography & CSS clamp() — Complete Guide

Fluid typography scales smoothly between a minimum and maximum size as the viewport changes. A single clamp() declaration replaces multiple breakpoint-based overrides and produces perfectly proportional text at every viewport width in between.

The CSS function clamp(min, preferred, max) picks the middle value when it falls in range, clamping to the extremes otherwise. The preferred value is a vw-based linear expression calculated from your exact breakpoints.

How the Math Works

Given a min font size at a min viewport and a max font size at a max viewport, the tool interpolates linearly. The slope is (maxSize − minSize) / (maxVp − minVp). The intercept is minSize − slope × minVp. The preferred clamp expression becomes slope × 100vw + intercept.

For example, scaling from 16px at 320px to 24px at 1280px: slope = 8/960 ≈ 0.00833, intercept ≈ 13.33px. Result: clamp(1rem, 0.833vw + 13.33px, 1.5rem).

When to Use clamp() vs Media Queries

clamp() handles continuous fluid scaling — font sizes, padding, gap, container widths. Media queries handle discrete layout shifts — column changes, component swaps, feature toggles. The two complement each other: use clamp() for smooth property scaling within a layout phase, and media queries to switch between layout phases.

Modular Type Scales Explained

A modular scale uses a fixed ratio between every step. Minor Third (1.2) is compact and readable for dense UIs. Perfect Fourth (1.333) creates clear hierarchy for editorial layouts. Golden Ratio (1.618) produces dramatic jumps — striking for hero sections but demanding careful use in dense content.

Frequently Asked Questions