Exploring Web Typography

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

• Did You Know?
• The Process
• Dynamic, Scalable Headlines
• The Future

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.

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);¹
• proper numerical ordinals (1^st, 2^nd, 3^rd, 4^th, etc.)

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 ( ) 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 TeX² engine in our web browsers and fine-grained CSS to control it.