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.

Explore Other Notes

Newer

Why I'm losing faith in UX

A sobering look into the history of the UX industry. I think the outlined three "phases of UX" seem pretty on point from my own experience: from idealistic, trusted advisor; to oft-ignored and […]

Older

Atkinson Hyperlegible

A font designed to make text as legible as possible. Particularly impressive attention to making sure letterforms are still distinctive even when extremely blurred. Best of all: it's completely free […]
  • 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 [&#8230;]
  • Murray Adcock.
Journal permalink

Made By Me, But Made Possible By:

CMS:

Build: Gatsby

Deployment: GitHub

Hosting: Netlify

Connect With Me:

Twitter Twitter

Instagram Instragram

500px 500px

GitHub GitHub

Keep Up To Date:

All Posts RSS feed.

Articles RSS feed.

Journal RSS feed.

Notes RSS feed.