Fluid Type on Blogs

October 31, 2016

Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.

It makes good sense that font-size changes depending on the screen. 24px type might look great on a very big screen, but be impractical on a 360px wide screen when even at 100% width you can only fit 3-5 words per line. Adjusting down to something like 16px might retain the same feel and still be nicely readable.

A common way to do that is to pick some breakpoints and adjust the font-size accordingly. Perhaps at the :root, like:

If all the other font-sizes used throughout the site are relative (like %, rem, or em), these adjustments might work great. Perhaps you get even more fine-grained than that and also adjust things in smaller containers.

But this is all a bit like adaptive layout, isn't it?

The kind of layout where at certain breakpoints things kinda snap into place? And at the sizes that don't match those exactly, there are essentially "black bars" that fill the space.

It became more popular to "go fully responsive" with layouts, where widths were largely in percentages, so that you get to use as much room is available at any given screen size. To a point, anyway.

You can also "go fully responsive" with typography, in a sense. There are a number of Pens by Mike Riethmuller that tackle things like fluid type size, fluid modular scale, and even fluid vertical rhythm.