Making an Old Text New Again

August 16, 2016 Written by Jocelyn Kearl

As website content trends toward quality over quantity, more often than not we find ourselves helping clients choose their words wisely and sparingly. But what happens when a client comes to us with dozens of chapters and thousands of words?

The University Press of Colorado wanted to publish Hayden’s Landscape Revisited online. Unlike most sites, readers would need to spend hours online with Thomas Huber’s book. We immediately had to shift our focus to one key area: readability.

An online book sounded simple enough. After all, I’d spent years designing newspapers and magazines for print. But readability on the web is much more nuanced — different screen sizes, laptops, tablets, phones, and even the backlight from the computer as opposed to the printed page had to be considered.

We brushed up by reading some web readability studies, which focused on narrower column widths and more space between lines and larger type than you might see in print.

Reability figure 1 mockup

The best model came via sites where readability is crucial to online success. The New York Times does this better than anyone, while Wired Magazine pushes the design envelope a bit further. We leaned on these two and a few others for type and layout inspiration.

There was no need to dazzle readers with typography. Instead, we opted for tried and true Georgia, a classic, readable serif, as our main type throughout.

Reability figure 2 mockup

From there, we implemented clear tabs for the chapters, inset the historical drawings and photos, created a clear typographic hierarchy, and finally designed the web equivalent of a book cover for the homepage.

Moving forward, the readability research for this book project is paying dividends for our more traditional web work as well. Using these same principles, we are designing better copy-heavy subpages, improving our mobile viewing and paying closer attention to the relationship between typography and readability.

It's publicly available, you can check out the website and read it here.