When I wrote my proposal for the 2013 CSS Dev Conference way back in April, I had trouble thinking of a good topic. During the past year, I’ve done talks on several different topics related to responsive design, but they were all fairly general, and I wanted to find something to talk about that the conference attendees wouldn’t have heard already.
In April, I had just finished writing a chapter on typography for the book I’ve been writing on responsive design. And a few weeks earlier, I had been at Richard Rutter’s talk, Web Typography You Should Do Now, at SXSW. So typography was on my mind, and a web search told me that there weren’t already a ton of responsive typography slide decks floating around.
So I had a topic for my proposal, and I was very excited that that my talk on Responsive Typography was accepted for CSS Dev Conference. It turned out to be a topic that a lot of people are interested in: it was voted one of the six “Best of CSS Dev Conference” sessions by attendees!
Note: If you missed CSS Dev Conference, I’ll be doing this presentation again at MoDevEast in McLean, VA, on December 12.
You can see the slides from my presentation below, and I added captions to each slide that cover most of what I talked about during the presentation. The main focus is on how to make the text on your website as easy to read as possible, at every viewport width, mostly by using media queries to adjust three qualities of the text: font size, line height, and line length. Keep reading below the slides for more details.
Also check out Ben Norris’s sketchnotes of my talk, for a quick summary.
The CSS Dev Conference is directed toward developers, not designers, and although typography is usually considered to be in the realm of designers, it’s actually easy to make your type more readable even if you don’t have any design sense at all. It’s all about numbers. There’s been all sorts of research to determine the most appropriate font sizes, line heights, and line lengths, so you just need to know what the generally accepted standards are, and use them to adjust the flow of text in your design.
For example, by using the browser’s default font-size of 100% for body text (i.e., chunks of text like paragraphs), you’ll ensure that this text is large enough to read for most of your users. If you make your text smaller than 100%, some people will have trouble reading it, especially those users who are older than 40 (the age at which most people start to have trouble with their vision at close distances). You don’t need to guess at an appropriate font size, and you don’t need to look at the type with a designer’s eye, because the browser tells you exactly where you need to start: 100%.
Appropriate line height helps users read more easily — if lines are too close together, it’s hard to focus on one line at a time. If they’re too far apart, it interferes with the reading continuity from one line to the next. The recommended starting point for your line-height is 1.4. The optimal number can vary a bit based on the typeface, font size, line length, and other factors, but if you don’t have that expert design eye, just go with 1.4, and it’ll look pretty good.
Line length — how many characters are on each line — is a bit more tricky, because in a responsive design, the width of your content will vary as the viewport size changes.
Again, there’s an accepted standard for this, and it’s 45-75 characters per line for comfortable reading. There’s actually a fairly easy way to make sure you stay within this range, which I show in detail in the slide deck. Just start at a small-screen viewport width, and make the viewport wider until the text is at the maximum number of characters per line. This is where you add a media query to adjust the margins or font size to keep your text within the optimal range of 45-75 characters per line.
Keep getting wider, and keep adding more media queries until you get to a point at which you feel like you can’t go any wider/bigger. This is where you use max-width to stop your design from getting any wider. There are definitely some super-wide screens out there, but your design doesn’t have to keep expanding to fill those huge screens.
When creating a responsive design in which I need to test line length, I’ve always just used a span and a little CSS to temporarily color the 45th to 75th characters of the first paragraph red, which makes it easy to see where that optimal range is. But Chris Coyier (of CSS-Tricks) happened to be at my talk last week, and it gave him the idea to create a bookmarklet that you can use to color the 45th to 75th characters red in any block element on any page.
Chris’s bookmarklet makes it incredibly easy to check your line length — and you can even check other people’s sites to see if their text is in the optimal range!
After all this talk of 45 to 75 characters, you might be surprised to find that the text on most websites is actually wider than 75 characters. That doesn’t mean they’re all wrong. These numbers I’ve been giving you are just general guidelines: good starting places that aren’t set in stone. Text that’s a bit wider than 75 characters isn’t suddenly unreadable, but readability will definitely decrease as the line length increases. Keep in mind that there are many different usability guidelines to take into consideration as you’re designing a website, and you have to figure out how to balance all of these usability factors and somehow make it work. For example, a slightly longer line length might be a compromise that decreases the amount of scrolling necessary on a long page.
Besides showing you the code you’ll need to adjust all these type qualities, my slide deck will demonstrate two real websites that use media queries to adjust font size, line height, and line length across viewport widths: one site that does it really well, and another that makes a lot of mistakes.
My slides also touch on hyphenation and column-count. There’s a lot more that goes into responsive typography, but that was all I could cover in 50 minutes.
If you want to delve further into responsive typography, check out:
