“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
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.