Replace a media-query font ladder with clamp()

Five media queries. One heading. All just to change its size.

Beginner to intermediateRead 5 minDoing: an hour7 steps

▶ Start

What you'll have at the end

A heading whose font size scales smoothly between a minimum and maximum, with zero font-size media queries left

Before you start

You need

A single heading whose font size is set by a base declaration plus several min-width rules, each one only changing that same property, and a browser you can read computed styles in.

Not covered

Building a full type scale across every heading level at once, or converting a ladder that changes more than font size.

Leans on

7 steps

Where to go next

Picking breakpoints your content needs instead of a device preset

If the two widths this recipe's formula uses came from a device preset rather than where your own layout actually breaks, use this to choose real ones first.

Checked 20 Aug 2026

Part of the Responsive Web Design cookbook