Skip to content
Design Notes

Fluid Type with CSS clamp()

Theo Marsh
1 min read
308
Last updated
Cover photo for “Fluid Type with CSS clamp()”

We used to ship five breakpoints for heading sizes. Now we ship one declaration and a comment explaining the maths.

Feedback lands better when it describes the effect rather than the fix. “I lost track here” is more useful than “move this paragraph”.

Reading work aloud is the cheapest editing tool there is. Your ear catches rhythm problems that your eye skips over, especially in long sentences.

fluid-type.css
:root {
  --step-0: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  --step-3: clamp(1.75rem, 1.2rem + 2.5vw, 3.25rem);
}

body { font-size: var(--step-0); }
h1   { font-size: var(--step-3); line-height: 1.05; }

The first version of anything is a question, not an answer. Treating it that way makes feedback easier to give and much easier to hear.

Constraints are underrated. A fixed word count, a single typeface, or a two-colour palette forces decisions that an open brief lets you postpone forever.

Reading work aloud is the cheapest editing tool there is. Your ear catches rhythm problems that your eye skips over, especially in long sentences.

0
Continue reading

Related posts

All posts
Conversation

Comments · 0

Posting as guest · Sign in