We (finally) Have the Technology: Creating Beautiful Typography for the Web

Cover of Elements of Typographic Style

The Elements of Typographic Style, by Robert Bringhurst, is frequently referred to as the typographer’s bible. Originally published in 1992, it understandably focused on print media. Still, even its fourth and most recent edition — published in 2012 — continues to give short shrift to the topic of web typography. It was not long ago that display technology, along with the necessary cross-browser support to take advantage of it, was so primitive that typography geeks had little choice but to resign themselves to the web being ugly. However, following a grim decade during which Internet Explorer 8 ruled the world and it was nigh impossible to find a computer display that could rival the quality of the 2048×1536 CRTs that were readily available in 2003, we have finally reached an era in which browsers have matured toward sensible standards and Retina displays and AMOLED phones are commonplace. Web typography, for the first time in history, can be beautiful.

Bringhurst ends his terse nod toward the existence of computer screens with following conclusion:

In brief, good text faces for the screen are as a rule faces with low contrast, a large torso, open counters, sturdy terminals, and slab serifs or no serifs at all. Good on-screen paragraphs are ragged-right and short. Good on-screen headings are frequent and simple. Good textblock measures for the screen are fairly narrow — closer to 36 than to 66 characters per line.

While we wait for screens to improve, there is one other option, and it is a real one: typographic abdication: deliver the text but leave the choice of face and measure to the reader.

Bringhurst’s advice on font selection is obviously sensible. The very finest computer screens in use today are found on high-end smartphones and run at around 400 ppi. That is still only a fraction of anything that could be considered acceptable for professionally-printed media. Fonts like Bodoni or Computer Modern look stunning coming out of a good laser printer, but on screen those delicate modulations and narrow apertures don’t stand a chance.

This does not mean that web designers are condemned to Helvetic hell! Eben Sorkin, creator of the Merriweather typeface, touts it for its very large x-height, slightly condensed letterforms, mild diagonal stress, sturdy serifs and open forms. Steve Matheson likewise describes Droid Serif ’s slightly condensed letterforms… vertical stress, sturdy serifs and open forms. Both these faces are lovely and there are many more to choose from without gainsaying this consensus on what constitutes a readable screen font.

Even if a font is not particularly well-suited for screen use, increasing the point size is sufficient to cure many ills. Most type on the web is much smaller than it needs to be. Any desktop display manufactured since the mid ’90s can easily accomodate a single column of 20 pt (27 px) type at a comfortable textblock measure. When necessary, small browser windows can be accomodated through responsive web design; otherwise, why make your readers squint?

My original font choice for Indistinguishable from Random was Noto, a polyglot offspring of Droid. However, when I started getting serious about polishing my typography, Noto’s missing OpenType features, most importantly text figures and small caps, made it a non-starter. After perusing Google Fonts and finding nothing that fully met my requirements, I started looking at commercial typefaces and fell in love with Calluna. It’s easy to read on a wide variety of displays and a wide range of point sizes, and has just the right amount of character to walk the margin between striking and distracting. More importantly, its companion Sans face and range of weights permits heavy use of typographic inflection for technical writing without making the page look like a ransom note.

I think Bringhurst’s recommendation of ragged right for on-screen paragraphs is falling behind the times. Historically, justified text on the web has been a rarity due to lack of browser support for hyphenation. This is easily rectified by Hyphenator.‍js. Some, but not all browsers, now also have built-in hyphenation support.

Hyphenation issues aside, all major browsers have long carried basic support for text justification. Unfortunately, they vary in the quality of their algorithms. Chrome, for example, occasionally does strange things with lines that contain anchor tags or other in-line markup. The fact that HTML must be rendered by a wide variety of browsers on a wide variety of displays, and presented to the user without the opportunity for further intervention by the author, means that the justification of web text will never be as consistently good as that of text on a printed page after it has been tuned by a competent human. Nevertheless, I find that the annoyance of the occasional “pig bristle” does not nearly outweigh the readability benefit that justification confers to flowing paragraph text.

Bringhurst’s recommendation that on-screen headings be frequent and simple is, although often sound, overbroad. The frequency of headings should suit the needs of the text. Some text, like the kind which tends to dominate e-commerce sites, is meant to be skimmed. Other text, like a novel, or this post, is meant to be read, sequentially, from start to finish. The first sort of text demands frequent headings in order to assist the eye in quickly locating whichever information is sought. The second sort is less needy. Text-for-skimming perhaps occurs more frequently on screen than it does in print, but regardless, the need for headings is a function of the content of the text, not of the presentation. The screen bears no relevance.

Finally, as to the matter of textblock measures, I agree with Bringhurst’s advice in direction but not in magnitude. On-screen textblock measures should be short. This text, viewed on most desktop monitors, is about 60 characters wide. I would like to bring it down to about 54, and would do so if I were not constrained by the need to be able to present 80-column monospaced code blocks within the same margins and remain at a legible point size. 36 characters per line is extremely narrow for single-column body text, and setting justified text at that measure is difficult.

In a future installment, I’ll delve into some of the CSS tricks and technical nitty-gritty that beautiful web typography possible: using @font-face; manipulating kerning, leading, and letter spacing; controlling OpenType features and anti-aliasing; creating run-in headings; and working around some nasty browser bugs.