advertisement
advertisement

This Snatch Of Code Can Give Any Website Better Typography

Typeset is a new Javascript tool that can make any website worthy of Gutenberg. (Not Steve.)

Good typography on the web is pretty rare, because it’s hard. Consider quotes. Books use smart quotes, or quotation marks that mirror each other both horizontally and vertically on either side of the term being quoted. They just look nicer, but we don’t really use them on the web, because they require you to memorize obscure keyboard commands to insert. Or how about the em-dash? Online, we substitute double dashes (- -), but properly, they look like this (—). A proper em-dash looks better, so why don’t we use them?

advertisement
advertisement

Here’s a good tool for anyone who cares about good typography on the web. Typeset is a new typographic pre-processor which you can easily install on your web page to automatically convert your ugly, dumbed down text into more sophisticated typography. For example, by automatically replacing the double dashes with em-dashes, or converting your dumb quotes into smart quotes.

Typeset does a lot more than just that, though. For example, most typesetters would replace an all-caps acronym like HTML with small caps. You can do this on the web by specifying small caps as a CSS variable around the word in question, but Typeset will enter them automatically. Typeset can detect the difference between smart quotes and double diacritics. It can even do hanging punctuation, pushing punctuation marks, hyphens, and bullet points to the outside of the margin, like in the Gutenberg Bible. That’s something that usually requires a designer to use sophisticated typesetting tools, but Typeset can do it automatically.

Typeset is a free download on Github. Best of all, it won’t slow things down much for your users: Typeset uses zero client-side Javascript to make your typography prettier. While many content management systems have some of these features built-in, Typeset is powerful and lightweight—handy to have in any web designer’s toolkit.

[via Sidebar]

advertisement
advertisement