letters

The craft of typography may have been stripped from initial the iterations of the web, but new technologies and brave explorations in web typography have lead to rapid development in the field.

The State of Web Typography

We are still neck deep in the days of horrible web typography. 80% of the websites I visit have type sizes way to small for an enjoyable reading experience, a non-existent vertical rhythm, and a general display of ignorance for the age old rules of typography. Until recently, I was also to blame for this mass rejection of enjoyable reading experiences (I’ve yet to redesign my own site with these considerations). Because of this, services emerged like Readability, Pocket, Instapaper, and Safari’s Reader Tool, that will actually strip a website clean of web-junk and typeset all of the content on a new page. So, I forgive you if you’ve added this article to your reading list.

The Elements of Typography

Enter Robert Bringhurst’s The Elements of Typographic Style, aka “the Bible of Typography”. I came upon this book while reading about the redesign of the 37 Signals blog Signals vs. Noise. Bringhurst, an expert typographer of the old school, dives into the details of the craft and provides practical advise that can be applied to the web. I was amazed on how a text that is so rooted in the technicalities of typography could have so much color to its and words. Not only is this book incredibly useful, but it is bound to help any designer grow and learn to see the beauty of type.

“A book is a flexible mirror of the mind and the body. Its overall size and proportions, the color and texture of the paper, adhesive and ink, all blend with the size and form and placement of the type to a reveal a little about the world in which it was made.”

–Robert Bringhurst

4 Things I’ve Learned

Vertical Rhythm

Sure, web pages are not static, and the baseline is somewhat difficult to maintain on all devices, but vertical rhythm must still be considered. Since my design process still involves graphic mockups, why not design to a baseline? The line height is the distance from one baseline to the next and the overall baseline is usually set to body copy. This sets the unit of measurement for the page and acts as the metronome for your compositions.

Hyphenation

Along with CSS3 has come the ability to hyphenate paragraphs. Hyphenation is not an excess, but has a specific function and should be applied when appropriate. For example, the word-spacing on justified paragraphs can be balanced through hyphenation.

Ideal Max. Character Length

I have been trying to avoid laying out full-width templates. Since most clients won’t be working with a developer, a full-width page can be a daunting experience, and usually leads to long lines of stringy, spaghetti text. Bringhurst recommends a measure of 45-75 characters per line. When applied, as say a max <p> width of 660px , the readability of the page increases significantly.

The Law Office of Ihsan Dogramaci

Website of Ihsan Dogramaci

Sticking to the Rules

Of course, talking about rules is all fun in games until it comes to the difficulty of applying them. So you’ve just finished you graphic mockups and have to oversee the development of your site. And since you are the only one in the room who is excited about hyphenating paragraphs, you now have to argue for implementing the extra code. That is why I was excited to work on a site for Ihsan Dogramaci. He was looking for a very simple, minimal site for his newly opened law office, and I saw it as the perfect opportunity to really focus on the typography. The feature area of the site is one word set large and crisp in Minion Pro. I tried to incorporate some different layouts with the the blocks of text, as well as setting ideal measure and line height. Hyphenation is used to keep the right rag balanced, and all elements were spaced using the baseline. Altogether the result is a site that I am really proud of, typographically.

Conclusion

Typography on the web has come along way over the past few years. From web fonts to CSS3, we have been enabled as designers and developers to reemerge from our typographical amnesia. My friend once told me that “the rules of typography did not apply to the web”, and for a while, she was right. Of course, there are always the limitations of the web to consider, but with a few minor tweaks to your code, you can bring beauty to the page.

What do you think of the overall reading experience on the web? What techniques do you use to create readable experiences?