Text Readability In Responsive Design

Over on Reddit, I shared a link to a previous blog post I’d written about Food Cartopia. I received great feedback and emails on this. One reply was about it being hard to read the post, since I had the width of the content area so wide. I agreed. Just didn’t think about it before they brought it up.

Here is how it looked originally:

Responsive Layout Wide

Really it’s as simple as adjusting the content area’s width to a smaller percentage, but before I did that I wanted to do some research into what other people, who are way smarter than me, were doing with their own content.

After a few searches I came across what I’m looking for. This article on Webdesign.tutsplus mentions that it’s called “Measure”. The Measure is the width of a line of text. They go on to say,

“If a line of type is too long it’s a tedious read and a stretch for the reader’s eye to return to the left edge of the text block for the next line.”

Searching for Measure on Wikipedia tells me that the ideal Measure for text content is around 65 characters.

Ok. Well how do we get the ideal Measure all the time, at whatever width the site is being viewed at?

Right away, the first search result that came back for “Measure Responsive Design” was this fantastic Smashing Magazine article by Vasilis van Gemert. Basically, what he explains is that we need to increase and decrease font size as browser widths change. Change the sizes so that we stay within the 45-80 character range for each line of text. Makes sense!

So when I first adjusted the article’s paragraph width, I got this:

Responsive Article Wrong

Yuck. It was around the ideal amount of characters per line though. How can this be right?! I spaced for a second. Font size.

We can still have our wonderful widescreen content areas, but we just have to remember to adjust font sizes accordingly!

I’m not going to lie. I really just had to experiment with my article’s paragraph width. I started with a width of 33em, and then worked my way up to about 38em, with a font size of 2.5em for widescreen monitors. I should note though, that in order to get the amount of characters into the “ideal range” on small layouts, it would require me to drop the font size down pretty small. Right now, I’m not comfortable doing that. My smallest layout size is way under 45 characters because of this. What you decide on will come down to your design and fonts you’re using. I hope you guys found this useful!

If you’re reading this on the individual post’s page, you’ll see the improvements in place, but just in case you’d like to compare the after shot with the before shot that’s up above:

Correct Responsive design text

Related:

Chris Coyier over on CSS-Tricks wrote an interesting post about new, upcoming CSS3 properties for this sort of thing.

Although very old, this Stackoverflow thread about fluid design is still quite a good read. Funny to see all the talk on this, before responsive design really became more of the norm.

Something else that I thought was very interesting was the screen shot below. A link I shared on Google+ about responsive web design is on the first page of search results. I think it’s pretty obvious the weight that Google is giving to our G+ account content.

responsive design search results

2013-11-16T06:15:03+00:00