Custom Property controlled fluid type sizing

— 3 minute read

In a responsive layout, something that can be difficult to solve gracefully is type sizing. It’s a conundrum that has been easier to solve with CSS preprocessors, such as Sass or even setups where JavaScript assists styles.

I’m a big fan of using the web platform, so I wanted to solve this with pure, vanilla CSS!

How it works permalink

Without getting too much into the weeds, you set a min size and a max size (with optional min and max screen sizes), and the calc-based formula works out a fluid measure, on the fly, based on those 2 locks and the window’s current width.

This means that you get the best of both worlds: type that scales with the viewport, and also some control so things don't get out of hand.

Pretty neat, right?

Code permalink

.fluid-type {
--fluid-type-min-size: 1;
--fluid-type-max-size: 2;
--fluid-type-min-screen: 20;
--fluid-type-max-screen: 88;

font-size: calc(
(var(--fluid-type-min-size) * 1rem) + (var(--fluid-type-max-size) - var(--fluid-type-min-size)) * (100vw - (var(--fluid-type-min-screen) * 1rem)) /
(var(--fluid-type-max-screen) - var(--fluid-type-min-screen))
);
}

Demo permalink

In this demo, I’ve laid out a very typical article with headings, paragraphs and a <blockquote>. Those elements are attached to the fluid type utility (.fluid-type), and the paragraphs are set with a global rem size.

This is deliberate because making everything fluid is pretty unnecessary—especially when there isn’t much a difference between the min an max lock sizes. The best use of this utility is certainly in larger elements such as headings.

In the CSS, you’ll see that each heading and the <blockquote> have --fluid-type-min-size and --fluid-type-max-size set to override the .fluid-type’s default scale. That’s the beauty of CSS Custom Properties: they cascade like everything else in CSS!

See the Pen Piccalilli CSS Pattern #1 — Custom Property Controlled Fluid Type by Andy Bell (@andybelldesign) on CodePen.

Wrapping up permalink

This little trick is super handy. I’ve never been happy setting font sizes at each breakpoint because there’s always a weird spot or two where the type looks whack, so this utility removes a lot of code and improves the UI, globally.

This does make me yearn for container queries even more than I already do, though. Being able to have a fluid type size based on a container, rather than the viewport would be perfect for design systems.

I’ll just keep waiting patiently while I custom style my scrollbars instead...

Hi 👋
I’m Andy, a freelance web designer

I currently have availability for short term design and front-end development projects.

Hire me