EJS logo

Advanced web typography: Responsive web typography

Article illustration for Advanced web typography: Responsive web typography

Responsive Web Design is not merely concerned with layout — done properly, there are a number of considerations one should take into account with typography. After all, the web is 99% typography, right?

Responsive body type

For me, my principle concern around web type in a responsive world is all about measure. After all, when you have viewports that can grow (or shrink) indefinitely, the length of a line can very quickly become uncomfortably long (or short). If I have one major criticism of early-adopting responsive sites, it’s that many of them didn’t take this into consideration, and although the situation is improving, it’s a mistake a I still see a lot of people make.

Robert Bringhurst suggests that the optimum measure is around 45 to 75 characters per line. I agree that this is a good indicator, although like most things in design, I prefer to just do it by feel: it soon becomes obvious if something doesn’t feel right. Whenever I have a line of type that starts to feel like it’s getting uncomfortably long as my viewport grows wider, I throw in a media query to remedy the situation.

For the last year or two, my approach to media queries (with particular reference to measure) has been to:

  • increase the font size, or
  • decrease the padding on the containing element, or
  • do both.

You can see this in effect on this very site. Here’s a simplified version of the CSS that controls this part of the design:

@media screen and (min-width:1200px) {
    body { font-size:110%; } /* Increase the font size */
}
@media screen and (min-width:1400px) {
    html { padding:0 15%; } /* Reduce the container width */
}
@media screen and (min-width:1600px) {
    body { font-size:125%; } /* Increase the font size */
}
@media screen and (min-width:1800px) {
    html { padding:0 20%; } /* Reduce the container width */
}

Of course, I’ll admit that this is much easier to do on simpler sites like blogs, but the principle is the same no matter how complex the design: as your overall space grows, adapt your measure by tweaking the font size and the element’s width.

Trent Walton has a great technique for keeping your eye on an optimum measure that’s especially handy if you prefer hard facts over the ‘feel’ approach: simply place an asterisk at character 45 and character 75, and add in a new breakpoint every time the two asterisks appear on the same line. Sorted!

Trent Walton’s site
Trent Walton’s asterisk technique

It’s worth noting that you could just put in a max-width declaration once you’ve got a measure you feel is optimal for large screens, but personally I feel like max-width flies in the face of RWD: because we don’t know the size of future viewports, we should let things be as open as possible. I admit, though, that this can end up with gigantic text on large monitors (as an experiment, I took this to its logical conclusion with my recent CSS Zen Garden theme), so use your own discretion. Oh, and as an interesting side note in case you live in a cave and missed this last year, Marko Dugonjić conducted an interesting experiment with font size in relation to the user’s proximity to the screen. His talk from last year’s Kerning conference is well worth a watch.

And, if you haven’t done so already, take a look at   using viewport units for viewport-sized typography. This is an interesting development, although I’ll admit that I haven’t yet looked into it that deeply.

Responsive display type

When dealing with display type, we often want deeper control over our headings, and that’s where Fittext.js comes in. Just like when I mentioned Lettering.js in yesterday’s post on kerning, I don’t think (yet another of) Dave’s awesome plugins needs much explanation, since it’s been around a while now, but in short it forces your type to perform more like an image; specifically, an image set to 100% of the container’s width. You can see it in action on my site in all of my ’Tomorrow’s Web Type Today’ series of blog posts ( 1, 2, 3, 4).

If we’re to take our typography to the next level, though, we need to focus on the details, not just the big-picture stuff that’s easier to spot like measure and image-like display type.

Something that’s often overlooked is that changes to font size or container width should also result in changes to leading (or line-height in CSS). I’ve seen so many sites (my own included, I should add) that exhibit unpleasant gaps between lines when viewed at certain sizes. The same can be said of margin or padding values between paragraphs, or lists, or headings. To achieve a more balanced line-height value, there are some very clever maths you can do to make sure your values are directly proportional to your font size. Or you can just do it by feel, which is the method I prefer. If it doesn’t look right, change the number a bit!

Let’s not forget that we work in an inherently flexible medium; there are no hard and fast rules here. Responsive Web Typography is all about treating type with the respect it deserves in a variety of contexts, over which you don’t have finite control.