Whitespace, text readability, and online typography

Hey all, bit of a geeky brain dump here. If you don’t want to want to read my (mostly uninformed) ramblings about Web design and text formatting, feel free to skip over this post. 🙂 Still here? Cool! So I’ve been working on my online ethnography for Prof. Macek’s New Media class, and I have also spent some time during the past week designing a basic layout for my “official” school Web site on NCC’s hosting space. Aside from showing me how much I’d forgotten about the quirkiness of CSS (and the horror of Internet Explorer), this also reminded me of just how great an effect seemingly tiny formatting changes can have on a site’s usability. In particular, I’m been thinking about the consequences of whitespace in and around online text. In a class discussion about reading and comprehension of electronic prose, I mentioned that I found one of my Web-based reading assignments ([these excerpts from Sven Birkerts’s Gutenberg Elegies][1]) particularly difficult to focus on. I claimed this had less to do with the length of the assignment and more to do with that page’s formatting. With no maximum body width defined, the text filled nearly the full horizontal space of my monitor, leading to obscenely long lines—many nearly 250 characters across. Moreover, the entire page is sorely lacking in [whitespace][2]: paragraphs butt up against the edge of the browser window with scarcely a margin in between, and the text’s tight [leading][3], left unchanged from the browser’s default, gives the work an uncomfortable, claustrophobic feel. Now, you might protest that at this point I’m just throwing around design jargon that I don’t really understand. Well, you’re completely right about that. As my online explorations in these past few days have made me acutely aware, I know next to nothing about typography. (This makes me a little sad, and I do plan to fix that some day, but right now I more pressing matters to focus on, like getting good grades this term.) That said, I don’t think I need to know very much about typography to know this: wide lines of tightly packed text, like those of the Birkerts excerpts, are ugly, and they’re exceedingly difficult to read. Contrast the formatting in the previous example with that of [this article on leading][4] and [this tutorial on elastic CSS layouts][5], both of which feature plenty of whitespace and interline spacing, as well as more conservative line lengths. The difference, in my opinion, is night and day. These two articles are much easier to read, and, perhaps just as importantly, they simply _look that much better_. Certainly there must be a trade-off here; these pages in some sense seem exceedingly wasteful—why, Tan’s post on elastic layouts fills only a quarter of my monitor’s width! Yet this “waste” should be, I think, not only permissible but desirable. What these two Web pages lose in terms of sheer information density, they more than regain in terms of ease of comprehension and visual appeal. To me these statements seem like common sense, but I hesitate to overgeneralize them. Instead, I’ll just point you to [“Reading Online Text: A Comparison of Four White Space Layouts”][6], a study performed in 2004 by researchers at Wichita State University. They offered participants electronic texts from four formatting categories: margins with optimal leading, margins with suboptimal leading, no margins with optimal leading, and no margins with suboptimal leading. The study found that while people read the marginless text more quickly than the margined text, comprehension was notably higher when people read text with margins. Additionally, while leading did not have a significant effect on reading time or comprehension, participants greatly preferred the texts which featured looser leading, claiming that the additional interline spacing lead to reduced eyestrain and higher satisfaction. This seems to match with time-honored recommendations from the world of print design. Users of the [LaTeX][7] document typesetting system, for instance, have long noted its default margin settings, which appear at first much larger than necessary, but which most users eventually agree lead to better looking, more readable pages. The wide margins allow LaTeX papers to hit the “sweet spot” for line length: [roughly 50-75 characters per line of copy][8]. Unfortunately, while these principles are well established in print media, they seem to be frequently disregarded on the Internet. Some of this, I think, stems from intrinsic limitations of the Web as a medium. Computer screens vary widely in resolution, and browser support for traditional text formatting features like hyphenation or justification is often poor, if not nonexistent. But the lack of attention to the most basic of formatting choices like line length and interline spacing makes things even worse than they need to be. It’s common knowledge that [people don’t read Web sites; they scan them][9]. As Web designers, we’re already at a disadvantage here. Let’s not make our content even _more_ difficult to understand by ignoring sensible guidelines on improving readability. Well, that’s what I’ve been thinking about for the past few days. Yeah, I guess I’m a bit of a nerd. I’m also a little bit of a hypocrite right now, as my current blog theme (WordPress’s default) fails on some of the points I mentioned above. Still, I do plan on redesigning this blog as soon as I find the time. I’ll do what I can to study [the principles of Web typography][10] and come up with something nicer looking and more pleasant to read. [1]: http://archives.obs-us.com/obs/english/books/nn/bdbirk.htm [2]: http://en.wikipedia.org/wiki/White_space_%28visual_arts%29 [3]: http://en.wikipedia.org/wiki/Leading [4]: http://layersmagazine.com/the-art-of-type-reading-between-the-lines.html [5]: http://jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css [6]: http://psychology.wichita.edu/surl/usabilitynews/62/whitespace.asp [7]: http://en.wikipedia.org/wiki/LaTeX [8]: http://baymard.com/blog/line-length-readability [9]: http://orderedlist.com/blog/articles/scannability-equals-profit/ [10]: http://webtypography.net/