Skip to content
GreenSnippets

Fluid typography with clamp()

Scale font size smoothly between a minimum and maximum as the viewport grows, with no media queries.

CSS
:root {
  --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.1rem + 0.75vw, 1.75rem);
  --step-2: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
}

body { font-size: var(--step-0); line-height: 1.6; }
h2 { font-size: var(--step-1); }
h1 { font-size: var(--step-2); line-height: 1.15; }

Example / expected output

Output
/* h1 grows from 24px on phones to 40px on wide screens. */

How it works

clamp(min, preferred, max) keeps the value within bounds. The preferred value mixes a rem base with a viewport unit, so text grows with the screen but never gets tiny or huge. Including a rem part keeps the text zoomable for users who change their browser font size.

This snippet has been reviewed but was not executed by an automated test. Test it in your own environment before relying on it.

Related snippets