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:

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.