Fluid typography with CSS clamp | Piccalilli

A simple and informative example of how the new CSS clamp property can be used to create fluid layouts (in this case, specifically a fluid type system).

The key is in three CSS variables:

1. --fluid-type-min for the lower bound;
2. --fluid-type-target as the "ideal, fluid setting", using calc() to sidestep accessibility issues when zooming;
3. --fluid-type-max for the upper bound.

With that applied, you can target specific HTML elements and provide meaningful values using the rem unit, e.g:

For the <h1>, we increase the --fluid-type-target to a larger, 5vw. By increasing the viewport unit, we speed up the rate of growth, which will help to maintain its extra large size. To reduce the rate of growth and have less difference between your minimum and maximum sizes: reduce the size of --fluid-type-target.

Here's a snippet of Andy's code:

h1,
h2,
h3,
p {
  font-size: clamp(
    var(--fluid-type-min, 1rem),
    calc(1rem + var(--fluid-type-target, 3vw)),
    var(--fluid-type-max, 1.3rem)
  );
}

For all three custom properties, we are setting the default value as the second parameter.

It’s really important to test that your text gets large enough when you zoom in and small enough when you zoom out—it should be very obviously larger or smaller.