QR Code contains TinyURL of this article.Exploring Web Typography

“Words are, of course, the most powerful drug used by mankind.” Rudyard Kipling (1865–1936)

One question almost guaranteed to generate discussion amongst contemporary web-designers is this: just how important (or otherwise) is typography to modern web design? Opinions vary wildly, with at least one notable source arguing that web design is 95% typography!

Let’s clarify something at this point: typography is a multi-faceted discipline of which choosing typefaces is but a small part. I cringe when I hear designers describe how much effort they’ve invested in their typography when, what they really mean, is that they spent some time pairing typefaces for their page titles and copy. What I’m describing in this essay is more akin to traditional typesetting, the art of presenting a body of text in as legible and attractive a form as possible. Typography is about shaping written information.

With this website, I spent most of the “design” time working on the typography. I wanted my copy to be as well formed as I could set it, within the constraints of the web-browser.

Did You Know?

Dr. John E. Warnock

Between 1978–1982 Dr. John Warnock worked at Xerox PARC, in the Computer Sciences Laboratory, on improving the typographic quality of computer grayscale displays.

In 1982 he co-founded Adobe Systems with Dr. Charles M. Geshchke, to develop software that would integrate text and graphics whilst being device-independent. The result of their efforts is the now ubiquitous PostScript.

These are the typographical rules I’ve applied to the text on this website:

  • proper left and right-handed, ‘single’ and “double quotes”;
  • proper hyphens (-), en (–) and em-dashes (—);
  • proper ellipses (…);
  • proper symbols (©, ®, ™, etc.);
  • prevent single trailing words;
  • small-caps for acronyms and abbreviations;
  • non-lining numeric glyphs (0123456789);1
  • proper numerical ordinals (1st, 2nd, 3rd, 4th, etc.);
  • hanging punctuation (dependent on browser support).

The Process

I’m using a handy, server-side library called SmartyPants Typographer to handle the quote marks, dashes and ellipses.

The CMS then parses my copy with PHP’s internal XML processor, the DOMDocument class, which helps to ensure that all XML entities are properly encoded.

DOMDocument then wraps acronyms and abbreviations in the HTML <abbr> tag and provides an expansion, via the title attribute, of the first instance of each.

Similarly, we wrap digit groups in HTML <span> tags and give them a CSS class so that we can implement a non-lining font for them via our style-sheet.

Our last DOMDocument modification is the insertion of a non-breaking space (&nbsp;) between the last two words of each paragraph of text. This helps to prevent the single trailing word problem by ensuring that each block of text has at least two words on it’s final line.

Dynamic, Scalable Headlines

One small typographical trick I employed (and am particularly proud of) is dynamically scalable headlines.

Compare the headline on this page with this one. You should notice that the font size of the headline on this page is larger than the other. The CSS style-sheet controls the size of this page’s headline. The other headline, “On Performance & Content Management,” is too long to fit in the available width that this design has afforded it.

I have two options when dealing with longer titles: I can word-wrap them or I can have them rendered with a smaller font size. I didn’t like the default behaviour, word wrapping, as it just seemed to spoil the overall aesthetic of the site. That meant that I’d have to resize longer headlines to fit the width of their container.

I have used JavaScript to calculate and apply the transformation and the result is subtle enough that a casual reader probably wouldn’t notice. However, because there is a computational overhead in running the resizing algorithm, there is a small delay on page loads before the headlines appear. The browser has to wait for the headline font to download from Google and render, before it can measure, calculate and resize, thus exacerbating the delay. But the trade-off is small enough to justify the process and the result is better typography.

I’ve re-written this: the font size for each individual title is now calculated on the server and hard-coded in the page. This means that there is no longer a FOUC on page load. The browser renders the headlines quickly and does not rely on JavaScript. These small changes have addressed all of the shortcomings of the previous implementation.

The Future

While creating this website I realised that, despite the maturity digital typesetting has achieved, typography on the Web has a long, long way to go. There should be more typographical control in CSS. Browser developers should spend more time working on their text rendering systems too. We need improvements in kerning, justification, column handling, hyphenation, leading, line-breaking and common ligatures — in short, we need the TeX2 engine in our web browsers and fine-grained CSS to control it.

Updated: 20th April, 2014.

I am no longer using SmartyPants Typographer. I use Typogruby as a nanoc filter.

I am no longer using DOMDocument — a further result of my generating a static website locally with nanoc rather than running a server-based CMS.

I have discarded the dynamically scaled headline titles. These worked well on the desktop but were not so good on mobile as longer titles would often end up programmatically scaled to the point where they were indistinguishable from the body text.

  1. Firefox, or other Gecko-based browsers, will not display the non-lining numerical glyphs since the rendering engine does not support the unicode-range CSS property I am using to manage this. ↩︎

  2. http://en.wikipedia.org/wiki/TeX ↩︎