24/06/2015 · Dallas, TX · With the wide-spread adoption of viewport units in browsers, we can finally achieve what I call fluid typography. By this, I mean type that inherently fits in its surroundings, not by reflowing, but by resizing, keeping size relationships, line-heights, and copy-fitting in tact. This shift means less caveats in our designs, and in our markup. Less work, for better output, resulting in more project time to worry about things like performance budgets.
A fluid type method
To begin with, set the
font-size on your
body to between one to two
vw. The value will change with different fonts, but I usually start somewhere in this range. Also, for no good reason, I prefer using
vw as opposed to
Now, typography is really just a set of rules defining relationships. This is bolder than that. This text is twice the size of that text. An
h2 might be fifty-percent larger than the base
h3 might need half-of-a-line of empty space above it. For setting size, margin, and padding relationships, our old friend the
em still works as it always has.
Again, different fonts will have different proportions, so adjust your values to taste.
Fluid, with limits
If left untouched at this point, your type could get too small or too big on certain viewports. This is where a judicious application of media-queries will help. We need to establish a minimum
font-size and a maximum
font-size for our elements, while still respecting our users’ default font size settings.
For example, to set a minimum
font-size, we can choose the smallest
font-size that we would allow our users to try to read. This depends on the font, but my minimum
font-size value tends to be around
14px. Now, find at what viewport width your type hits that size, and write a media-query to keep your type at that size.
I used pixels here to demonstrate the concept. Now, to respect our users’ default font size settings, we should use
rem for our minimum, but finding the viewport size at which our type shrinks below an
em value can be tough. It’s easier if we ditch the media-query and use
Mike Riethmuller wrote about viewport-based typography earlier this year, and his method for setting minimum font-sizes eliminates the need for media-queries: simply add the viewport unit size to your minimum size using
calc(). Our earlier example would then become:
To support our user’s set font size, we can change our minimum to
Calc() and viewport units have almost identical support, so where one works, the other should as well. If you need to support IE8 or earlier, add a fallback font-size before the viewport unit rule.
Setting a maximum
Our type can get too big to read, as well. Riethmuller has a
calc() method for maximum sizes, too, but I find it easier to estimate this based on feel. For example, I feel that anything more than double our base font size is large enough. After a bit of unscientific work in the inspector, I can write a media-query to limit the maximum size.
max-font-size in your CSS.
Fundamentally more sound
Working this way has really opened up possibilities in my web typography. To begin with, I find I need to adjust my type far less. Once my limits are set, there is very little left to tweak. This leaves time to police other typographic fundamentals.
vws, the type now scales to fit the viewport, rather than reflowing. That means I know exactly where words will land and how many characters the line-width will be, on all viewports. I can now, with confidence, break lines before prepositions, shape the right-rag of left-justified type, and eliminate widows from my paragraphs. Or, I can let a tool like type.js take care of it for me.
Also, this setup –
vws for the base size;
ems for relational sizing – nicely ties together the proportions of type, layout, and viewport. The base
font-size is related to the viewport, and each type element is related to the base
ems for layout (
padding), furthers this connectedness.
In the wild
I have been working with this method on my last few projects. You can see fluid typography in action here on my website (go ahead, resize!), on the Gridset Responsive Report 2014, and on the type.js site.
If you give it a try on your next project, let me know on Twitter (@nathan_ford). I’d like to see what you come up with.