Everyday Type

Everyday Type

Reading Experiences on the Web, Part 1

May 5, 2011

A few years ago, I decided that I was going to get rid of 80% of my books.

I got rid of all the literature (too easy to find at a library), most of my college textbooks (too easy to Google the facts), and many of my art books (too large and bulky). I write this with an odd mixture of nostalgia and vindication; on the one hand, selling or giving away all of my literature broke my heart. On the other, I started ridding myself of my books when I bought the first Kindle, hoping desperately it would be to books what the iPod had been to music. Ultimately, I wanted to have the experience of reading without the physical objects and the clutter.

My wife chides me for this, and we’ve collected a number of books since getting married. But I still find myself longing for good reading experiences on the screen. In find them hard to come by, as web design has only recently began to turn from the trend of busy-ness over cleanliness.

Reading for Pleasure

At this point, at least 90% of the words I read in a day on a screen. Between my phone and my computer, my reading is done almost exclusively on a device. Most of the books I’ve read lately have been in ePub format, and I’ve taken my phone or laptop to the coffee shop to read.

But my preference to read on the screen has little to do with how comfortable it is or how much I enjoy it. Truth be told, I often prefer the visceral experience of reading a book. But I can’t stand having that many things.

The debate about eBooks vs. paperbacks is well-worn territory, and I won’t bore you by chiming in far too late on the debate.

What I want to stress, however, is that a few thinkers and designers are currently at the vanguard of web typography. These men and women are wedding the comfortability and harmony of books with the convenience, ease, and searchability of screen text.

Let’s take a look at the sites that make me hopeful about web and screen typography: the sites that have already begun to reconsider web type in the service of promoting a more enjoyable way to read. This will be the first post in a series about wonderful reading experiences on the web.

Web Type Renaissance

A Working Library

A Working Library Screenshot

A Working Library: All of the elements of perfect typography

Mandy Brown has long been an advocate of the reading experience. Her blog, A Working Library, explores the dialectic between reader and writer—she is both—and its implications for design, publishing, and typography. A Working Library is a veritable study in balance between design, content, tone, and style. There is a certain gestalt to Mandy’s work, and you can appreciate the effect of the craft on her aesthetics and presentation. Finally, her typography, including measure, leading, vertical rhythm, active white space, and typographic color, is unparalleled on the web today. The icing on the cake? She indents her paragraphs as a nod to the experience of reading print material.

Stories & Novels

Stories and Novels

Stories & Novels: It reads like a book!

Franz Jørgen Neumann is a published print author that has brought his work to the web with remarkable presentation. The amazing thing about this site, besides the wonderful typographic style, is the thought that went into the user experience.

Stories and Novels screenshot

An uncluttered interface, automatic bookmarking, and unobtrusive text resizing.

After my first experience reading these stories, I thought about emailing Neumann to suggest a feature. My idea was that, after the user closed the browser, the site would remember your place in the content upon his or her return. I was so sure that this was a great idea, but luckily, I tried it before arrogantly emailing the author. Turns out, he’d already thought of it, as well as resizing type with an unobtrusive menu. With these features, Stories & Novels is everything you could want in a browser reading experience.

Readability

Readability screenshot

A Readability version of a recent A List Apart article by Tim Brown

I hope we’re far enough away from the controversy around Readability’s new subscription model for us to think only about the design of the reading experience. As this screenshot of a recent (and excellent) article by Tim Brown on the modular scale demonstrates, the Readability bookmarklet removes the clutter and distraction of sidebars, ads, and other nonsense, and provides clean, harmonious typography in their place.

This can help to emphasize the quality of the text you’re reading. I tend to use the Readability add-on when I’m reading a longer article that I’m finding myself absorbed in. It’s my way of treating myself to the best possible circumstances to read in if I’m going to do it on the screen. It’s just like springing for a latté when I only had the intention of treating myself to an Americano. It feels clean, refined, and luxurious.

This sense of sophistication is reflected in their brand. Their logo is a comfortable-looking, yet stylish chair. Their whole aesthetic, both in their brand and the user experience of their product, suggests a focus on elegance and relaxation. And Readability’s attention to these details and the feeling they’re attempting to evoke in their users is evident in their product.

Information Architects

Information Architects

Information Architects: Large, readable type

I’ve followed the work of Oliver Reichenstein since I began making websites. Information Architects has long been a resource for forward-thinking ideas on the display of information. I often harken back to Oliver’s seminal article The 100% Easy-to-Read Standard, which famously argued that type on the web should be larger.

It’s incredible to me what can be done with two colors (red and two shades of black) of Georgia on a white background. iA is an absolute model of spare, minimal typography that contributes to easy, comfortable reading. This influence pervades into Writer, iA’s distraction-free writing environment, which features a full-screen, minimal interface for clarity. As a sidenote, it’s not just a coincidence that informationarchitects.jp looks absolutely stunning on an iPhone. Reichenstein and company are all about interface, clarity, and using design in the service of content.

Final Thoughts

I’m fully aware of my typographic biases as I write this. These four examples use large, nearly black type, white backgrounds, few, if any accent colors, and generous leading. My own penchant for minimalism aside, I truly find these sites to be the most beautiful, relaxing, and enjoyable reading you can do on a screen. We would do well to note and emulate their typographic techniques and apply them to our own thoughts and work. Eventually, we can move toward making the web a more peaceful and enjoyable place to read.