I wrote an article on responsive typography for .net magazine a few months back, and it’s just now available online: Make your type look good on any device.

Typography can often seem like the easiest part of designing a web page – after all, how hard is it to put words on a page?

But on responsive websites you are challenged with using media queries to make sure the type looks good and is easy to read, no matter the size of the user’s screen.

Your typography choices should help the website get its message across, not get in the way of the message. In this tutorial, I’ll explain how to ensure your type works effectively on devices of all shapes and sizes.

There’s also a sidebar which was published online separately: How fonts affect your website’s performance

It seems I haven’t posted in quite a while — I can barely believe it’s been a whole year since my book, Learning Responsive Web Design: A Beginner’s Guide, was released.

Las Vegas skyline

My first visit to Las Vegas

And it’s been a busy year. In the past 12 months I’ve given talks at conferences or meetups in: Ottawa, ON; Zurich, Switzerland; Washington, DC (3 events); Charlotte, NC; Chevy Chase, MD; Brussels, Belgium; Chicago (3 separate visits!); Montreal (3 events); Toronto; Albany, NY; New York City; Las Vegas; and Amsterdam.

Writing a book certainly opens the door to a lot of adventures.

But a new adventure is quickly approaching. My husband A.J. Kandy and I are moving from Montreal to Calgary next month. A.J. recently started a new job at SMART Technologies, which is based there.

So that means I’m looking for a new job in Calgary, or possibly remote. We don’t know very many people there yet, so if you happen to know any people who work at awesome companies in Calgary that might be hiring, please send them my way.

My Responsive Color title slide on the screen behind a stage

About to get on stage at CSS Day

Actually, we’ve never even visited Calgary before! We’re pretty excited, as it seems like there are a lot of fun things to do there. I do a lot of hiking and camping, so I’m looking forward to living right next to the Rocky Mountains. Although, I’ve never done any hiking in an area where there are grizzly bears, so I’m a little bit terrified about that.

Meanwhile, in the midst of getting ready to move across the country, I’m leaving on Saturday for a two-week trip to the West Coast, where I’ll be speaking at CascadiaFest in Blaine, WA, Mobile+Web DevCon in San Francisco, and meetups in Vancouver and Seattle. Additionally, I’m giving an online talk for the CSS Summit next week.

When I get back home, there’ll be just enough time to pack before the moving truck shows up at the end of July. Although A.J. has lived in Montreal his whole life, I’ve only been living here for two years, so I haven’t seen all of it yet. We’re trying to fit in a few last bits of sightseeing before we leave, like the Orange Julep, Parc Omega, and the Game On exhibit at the Montreal Science Center.

A large deer with his nose right up against a slightly-open car window.

Getting friendly with the animals at Parc Omega. Yes, you’re allowed to feed them from your car window.

Luckily the Calgary Farmers’ Market has a shop called A Taste of Quebec, so we don’t have to miss all our favorite Québécois foods after we leave Montreal.

Although I’ve lived in several different cities, A.J. and I have been in Montreal since we first got together, so it will be strange to live somewhere new together. We’ve only been married two years, so we’re still figuring each other out. Moving is going to be a big challenge, but we’re trying hard not to drive each other crazy.

We don’t even have a place to live in Calgary yet. A.J. and I are going to stay in an Airbnb for a couple weeks while we look for an apartment. We’re looking forward to when we finally get moved into our new home and can relax a bit — at least until it’s time for more adventures.

Book release day is finally here! My book, Learning Responsive Web Design: A Beginner’s Guide, is now available in both print and digital.

Deliver an optimal user experience to all devices — including tablets, smartphones, feature phones, laptops, and large screens — by learning the basics of responsive web design. In this hands-on guide, UX designer Clarissa Peterson explains how responsive web design works, and takes you through a responsive workflow from project kickoff to site launch.

Visit the book’s website to learn more and view the table of contents, or visit the O’Reilly book page to download a “Free Sampler” of the first chapter.

You can purchase Learning Responsive Web Design from these and other fine retailers.

And if you want to learn even more about responsive design, check out one of these conferences I’m speaking at in the next few months. I’ll be in Chicago (3 times); Washington, DC; Charlotte, NC; and Brussels, Belgium (first time speaking in Europe!).

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: