That Fluid Type Stuff Again

Avatar of Chris Coyier
Chris Coyier on (Updated on )

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!

There have been a couple of articles lately regarding fluid type.

Matt Smith (calling it “flexible type”):

My preferred approach for more flexible type is to calculate the font size based on the viewport height and width using the :root selector

Richard Rutter (calling it “Responsive Display Text”):

In one fell swoop you can set the size of a display heading to be proportional to the screen or browser width, rather than choosing from a scale in a series of media queries.

Both are all about leveraging viewport units to size type that doesn’t jump from size to size at breakpoints, but gracefully scales.

I’d highly recommend checking out Mike Riethmuller’s Fluid type though, which is nearly just as simple but allows for setting minimum and maximum sizes, which feels like the way to go for me.

I moved to fluid type on CodePen blogs recently and I love it. Notice we also stole Mike’s fluid modular scale as well. As in, on large screens, the size difference between h1-h6 is more dramatic, while on small screens that scales back, all fluidly.

A “CSS lock” is how Tim Brown calls those minimums and maximums, and he demonstrates it can be useful for line-height as well as font-size.

It’s worth looking at our more recent post Simplified Fluid Typography for practical, clamped, viewport-based type sizing.