Clarissa Peterson

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:

• The Elements of Typographic Style Applied to the Web – Richard Rutter
• Fluid Type – Trent Walton
• Responsive Web Typography: Building Experiences That Scale – Jason Cranford Teague
• Web Typography You Should Do Now – Richard Rutter
• Prototyping Responsive Typography – Viljami Salminen
• Responsive Web Design and Typography – Danny Calderst

I’m speaking this afternoon at the Snow*Mobile conference in Madison, Wisconsin, on Responsive Design in the Real World.

In conjunction with the conference, I was asked to write an article on responsive design for Technori:

Responsive Web Design: How to Make Websites That Look Great on Any Screen

As mobile devices, tablets, and monitors become available in more and more sizes, and as the use of mobile devices becomes even more prevalent, we need to make sure that websites are designed to display properly on all screen sizes.

Responsive design will allow you to make sure that everyone is able to access your website, no matter what type and size of device they are using.

I am very excited to announce that I’m writing a book on responsive web design. It’s going to be published by O’Reilly in mid-2013.

Responsive design is still relatively new, and it’s something we all need to be talking about. There are a few books out so far, including Ethan Marcotte’s seminal Responsive Web Design, but all those books are targeted towards developers and designers who are already very familiar with HTML and CSS.

But the process of making or maintaining a website involves many other roles: UX designers, content strategists, web managers, etc. Unfortunately there are not a lot of resources yet for all these other people who are involved in creating responsive sites, and who need information that is a bit less… daunting.

My book is going to explain how to build a responsive website, starting at the very beginning. It will explain how all the code works, piece by piece, in a way that’s straightforward and easy to understand. And it will incorporate standards, accessibility, and usability into each step of the process, because those are all integral to a successful website.

The focus will be on building small-screen first responsive sites from scratch, not on converting existing sites or creating sites from static, pixel-perfect comps. We need to stop thinking of responsive design as an add-on to web design, and instead think of it as simply a way to build websites.

If you’ve seen me speak lately, you know that I am incredibly excited about responsive design. This is a great time to be a web designer, because the way we make websites is changing, and definitely for the better. Responsive design lets us create websites that work on any of the incredible range of devices that are now available — and also on future devices that don’t even exist yet. That just blows my mind.

I’m thrilled to have this opportunity to share my knowledge of responsive design, and to be an O’Reilly author.

So you’re probably worried that you’ll forget all about my book by the time it comes out. Stop worrying, you can sign up for my email list and I’ll let you know when it’s available. Otherwise follow me on Twitter or keep an eye out here for updates.

One of the difficult things about designing websites is that we often don’t know how users are using our websites.

Our analytics can tell us what path someone took through the site, but not why they made choices about which links to click or what actions to take. Usability testing can give us more of the “why,” but we often don’t have resources to do much testing, or even any at all.

Analytics can also tell us what the user’s device is like — the size of the screen, the operating system — but we have no idea what’s happening beyond the screen, while users are experiencing the website. Is that 1280 pixel monitor sitting in an office cubicle in a noisy room, or on someone’s desk at home? Is the user pulling out her mobile phone as she’s walking down the street, late for a meeting? Or is she sitting on her sofa at home, comfortable, not in a hurry, and wanting to experience the entire web on that tiny screen?

In the UX world, we talk about this a lot, about not making assumptions, but not everybody seems to get it.

At a Meetup last night, I was talking to a developer from an agency who provides a CMS to their clients. He told me that for their product, separate mobile sites are better than one responsive site, because then they can make sure everyone using the CMS gets the correct experience for their device.

“iPad users are all tech-savvy,” he told me, “so the site for iPad users can be —” And I have a bad habit of interrupting people when I’m disturbed by what they’re telling me, so I did:

“Why do you think that?” I asked him. “What makes you think all iPad users are tech-savvy?”

“Well, only someone who is tech-savvy would even buy an iPad,” he answered. “If you’re not tech-savvy, you would just have a regular computer.”

I repeated my previous question. “Why do you think that?”

He looked at me like I’m crazy. “Because it’s true.”

Well. No, it’s not.

“My parents have an iPad,” I told him. “They are as far from tech-savvy as you can get.” Pretty much everyone has an iPad these days, it seems. I could name at least a couple dozen people I know personally who have iPads and who aren’t web/tech folks, and who certainly aren’t tech-savvy. That’s anecdotal, sure, but it does negate the “all.”

Here’s a little trick: Any time you’re using the word “all” when describing users, you’re almost definitely wrong.

We can certainly make generalizations from the information that’s available to us, and that’s okay, if we do it carefully. But it’s important to remember that there are always exceptions, and you can’t just pretend that those other users don’t exist.

Not all users of your website/app are tech-savvy. Perhaps most of them are, but does the interface make sense to everyone else?

Not all users who are viewing your site on a desktop computer have a fast internet connection. It’s likely most of them do, but how slow is your site going to be for someone who’s using dial-up? It’s certainly a low percentage of users, but there are still people in the United States who use dial-up either because of cost, or because they live in a rural area where broadband isn’t available.

Not all users who are viewing your website on a screen can see what you see. About 4% of people are colorblind. Does all the functionality of your website still make sense, or can someone who is colorblind not understand any of your infographics, charts, and graphics because the key information is labelled only using colors? (Not to mention the users who are have screen reader software, and can’t see your website at all.)

That said, it’s not always possible to accommodate everyone. The biggest issue is resources.

It may be cheaper in the short term to produce an app for iOS and Android, rather than a responsive web app that could be used on any device. If you are okay with leaving people out, then there is nothing wrong with making that choice as a business decision. But make it as a conscious choice, rather than just as an assumption that everybody is using iOS or Android. They’re not.

If you are able to get a better understanding of your users, it can have a big impact on design decisions. But if you don’t have the ability to learn more about your actual users, at least make the only assumption that is always correct: Not all users are the same.