“Web Design is 95% Typography” they say… and I tend to agree. This post looks at how improved my site’s typography using a Node.js module and closes with a remark on CSS hyphenation.
Like Steve Losh, the underlying goal of my site (in terms of design) is minimalism. I use little-to-no images, a large font and a narrow measure. This text-centric “text as a user interface” approach is intended to make my site a pleasure to read without tools like Readability.
Behind the curtains, all content of this site is written in Markdown and parsed as HTML using marked. Whilst marked is a fantastic parser, it (currently) does not support any typographical-enhancing extensions, such as those provided by SmartyPants. Enter typogr.js.
typogr.js is a small Node library with the aim to do one thing and to do it well: apply transformations on plain text to yield typographically-improved HTML. It can apply a raft of typographical filters besides those provided by SmartyPants. See its API for more details.
After a few patches, I use typogr.js throughout this
site. Besides smart quotes and correct use of en- and em-dashes,
ordinals are styled to match sup tags (such as those used on a post’s
authored date), the imposition of block capitals (such as “API”) is
reduced to match surrounding body text and widows (lines containing only a
single word) are eliminated through careful placement of .
As with the last iteration of this site, I was keen to use hyphenation. Previously, I was using hyphenator, which, all-in-all, works rather well. However, since this iteration proudly uses zero Javascript, I preferred a CSS approach.
Alas, although CSS3’s hyphenation works wonderfully in Firefox, webkit has yet to catch up. I toyed with enabling it regardless, but as Divya Manian states, hyphens without justified text reduces readability.
Besides conditionally setting justified text via CSS browser hacks, native support for hyphenation and justified text is still impractical as of 2012. Lets hope 2013 is the year of the hyphen.