This article explains an experimental approach to ensuring consistent line-length and font-size for the readability of text on Web pages. This is the first time I’ve posted an article related to Web development, but I hope it to be the first of many.
Though there have been a number of articles proving the usefulness of flexible and elastic layouts in Web design, too many sites still use fixed or fluid layout. I say “too many” because the key problem both fixed and fluid hold for users lies with readability. Usability studies have shown that most users find a line length of 40 - 60 characters to be easiest to consume (though at least one report ranges from 35 - 95 and another a more modest 40 - 80, depending on the font used). This falls in line with print typography guidelines that recommend anywhere from 11-15 words per line. As you can see, there’s no final word on line-length readability, except that it falls somewhere on either side of 50 characters per line (cpl), or 13 words per line (wpl).
Presuming, then, that a Web designer wants to present reading text at around 50cpl, flexible or elastic layouts come in handy, as they measure the width of text column(s) in em space. One can set the width of the column to, say, 45em, depending on the font, and end up with a rough average of 13 words per line. The added benefit is as the user increases or decreases her font size for readability, the width of the text column increases proportionally.
Fixed width designs are often measured in pixels, and a user increasing the font size does not increase the width of the line, resulting in too few cpl. Neither do fluid designs, which are measured in %–these often result in too many cpl. And for most users with ultra-high resolution screens, fonts are often too small and require resizing.
A few years back I tackled this problem from a different angle. I thought, wouldn’t it be great if, rather than changing the size of my window and/or the size of my font for optimal readability, the font size changed automatically proportional to the size of my window? So if I had a high-res screen with my browser maximized, the font would be larger. If I had a low-res screen, the font would be smaller. In either case, the proportion would equal Your Favorite Line Length.
There is no % unit of measurement for font-size in CSS, so I had to turn to JavaScript to calculate my font’s size based on the DOM window size. A few years back, our Web developer Brandon Groff worked with me to write the JavaScript that would do this, and the effect was most elegant: here’s a quite plain example.
A few notes:
- JavaScript recalculates the desired font-size based on the window size and reloads the page on resize
- The font’s proportional size is based on a JavaScript variable that can be static or adjustable
- Changing the value in the text input before resizing alters the font-size’s proportion. A “1″ roughly equates to 100% of the body’s width.
- At least one known bug: if the user increases or decreases the font size through their browser, the script it breaks.
- This JavaScript is a bit old, and I hope to evaluate it line by line for currency and efficiency.
