Text width

Every wonder why the text width of email is set to 72 characters? I have. But I did not think of it in the context of the web… until now.

Mika Raento started the ball rolling by suggesting I should be setting a maximum width to my text like his symbian page, so a line doesn’t go too wide and becomes unreadable.

When I resized my blog or say Ian’s for a bigger screen (i.e. zoomed out), I imagined the text was scaling for the larger screen size. The fact that lines were getting longer, meant that the text was taking full advantage (i.e. scaling) for the larger screen size.

The register posts also get longer lines when zooming out.

Although the lines are scaling UP to the larger screensize, it is not helping accessibility.
Why? Because this line length style guide tells that “normal reading distances the eye’s span of acute focus is only about three inches wide”. Wide lines (roughly over 60 characters) get difficult to read, less usable and hence less accessible.

Mika again pointed out to me that optimal line width depends on:

Ok, what does this mean for mobiles? I think this is good news. If we read within three inches, and the mobile screen is typically one inch square (128×128), then there is no need to panic.

For desktops with bigger screens (17+ inches now?) it has of course had an impact. That’s why banner sizes are 468 pixels wide and many sites operate complex tables emulating magazine columns. This now affects mobiles. How do you scale a two column (at least 6 inches) desktop designed webpage to a screen sized the third of a three inch column of a mobile?

So how can we solve this problem?

  1. Re-adaption (guess and pray).
  2. Let the author worry about it. (let him do a bunch of different style sheets for media types or just one style sheet for one device and forget the rest)
  3. Let the device user agent worry about it

I am in favour of 3… better UAs to solve this problem. Let the UA agent in co-operation with device vendor take responsibility for making the page readable and usable. The more pressure you put on authors to scale their text properly for devices they’ve never seen is unreasonable. Authors should be just writing content. Just think how good it would have been if browsers (or some other application) could help you navigate instead of crappy author’s menu struggling to fill in the void with inconsistent results.

UAs can solve the font size problem. The vendor is in the best position to determine whether a “120% is not as legible as the same font at 112% on a particular device.” One down. As for reading distance, I think it’s probably more of a text flow problem. It’s not an easy problem to solve but UAs are best positioned to do so.

Found any of my content interesting or useful?