Fluid type and the zoom trap

One heading, three ways to size it. Change the window width and the zoom, and see whose text grows.

1280 pixels

100%

Loading…

The simulated window, shrunk to fit. Its viewport is 1280 CSS pixels wide.
The heading's size in the window's pixels, measured
MethodAt 100% zoom, 16px defaultNowGrowth
32px
4vw alone
clamp(1.5rem, 1rem + 2vw, 3rem)
Heading size against window width Solid lines at 100% zoom, dashed lines at the chosen zoom, for 32px, 4vw and the clamp. window width (pixels) heading size (window pixels)
Each line is labeled at its right end. Solid: 100% zoom with a 16px default. Dashed: the current zoom and default. Where the 4vw line is labeled "both", zoom did nothing.