This Snatch Of Code Can Give Any Website Better Typography

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?

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]

'); $form.parent('div').removeClass('error'); }; function _formFail ($form, error) { if (!$form) { return; } // Use message from server response var message = JSON.parse(error.responseText); if (message.response && message.response.message) { message = message.response.message; // Error message not provided } else { message = 'Please enter a valid email address.'; } var $parent = $form.parent('div'); // Remove other errors first var $errors = $parent.find('.alert-box'); if ($errors) { $errors.fadeOut(300, function() { $(this).remove(); }); } if (message && (message.code === -100)||(message.code === 220)) { message = 'Please enter a valid email address.'; } // Append new errors $form.parent('div').prepend(''); $form.find('input').prop('disabled', false); }; }); })