Fluid typography with viewport units

a post on Development

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 vh.

body {
  font-size: 1.4vw;
  line-height: 1.6;
}

For line-height, I prefer a unit-less value, to keep leading related to the font-size.

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 font-size; an 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.

body {
  font-size: 1.4vw;
  line-height: 1.6;
}

h2 {
  font-size: 1.5em;
  margin: 1em 0;
}

h3 {
  margin-top: 0.5em;
}

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.

body {
  font-size: 1.4vw;
  line-height: 1.6;
}

@media only screen and (max-width: 700px) {
  font-size: 14px;
}

I used pixels here to demonstrate the concept. Now, to respect our users’ default font size settings, we should use em or 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 calc().

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:

body {
  font-size: calc(14px + 1vw);
}

Note: this method adds more size to your base, so you will need to adjust the vw size down.

To support our user’s set font size, we can change our minimum to em or rem units. 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.

body {
  font-size: 1.2em; // for IE 8 and below			
  font-size: calc(0.85em + 1vw);
}

Note: again, since you are adding two font-size values, you may need to tweak the sizes. I find 0.85em works well, but this will vary from font to font.

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.

body {
  font-size: 1.2em; // for IE 8 and below			
  font-size: calc(0.85em + 1vw);
}

@media only screen and (min-width: 1500px) {
  font-size: 2em;
}

min- and max-font-size are making their way into the CSS spec, but to make this all a bit easier, right now, I’ve built a JavaScript library that allows you to set a min- and max-font-size in your CSS.

Fluid type in action

Fluid type in action. Scalable type in pure CSS, with minimal use of media-queries.

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.

By using 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 font-size. Using vws or ems for layout (margin, width, and 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.

bahçeşehir escort beylikdüzü escort 1xbet casino siteleri betpas 1xbet зеркало bahis siteleri bahis siteleri bursa escort ilan canlı bahis siteleri bloons tower defense 5 unblocked Yerden Isıtma Sistemleri getn on top Run 3 Unblocked scribble io unblocked zombs royale unblocked Among Us Online happy wheels unblocked io games