Chris CoyierImprove Your Blog Typography with Typogrify

Written by Chris Coyier from CSS-Tricks on January 4, 2008

Typogrify actually began life as a set of Django templates crafted by Christian Metts to improve web typography. It was the ported over to WordPress by Hamish Macpherson. As Jeff Croft puts it:

Typogrify: almost certainly the best thing to happen to web typography since Georgia.

The beauty of Typogrify is it’s simplicity. You will benefit from it just by plugging it in an turning it on, but there are a bunch of more advanced features if you wish to take it further. I’ll cover all the features here.

Adds a unique class to your ampersands

Such as:
<span class="amp">&amp;</span>
This allows you to Use The Best Ampersand Available. In other words, change the font, increase the size, bold it, etc. It also automatically converts your ampersands into the standard &amp;.

Adds a unique class to multiple CAPITAL letters

Such as:
<span class="caps">USA</span>

Allows for easy creation of “hanging” quotes

Adds a unique class to certain block level elements that begin with a quote character, such as headers and paragraphs. Kind of like auto-quoting. This way you can treat those block level elements differently and give them a hanging quote or whatever other kind of distinguishing feature you can think of.

Runs “smartypants”

Smartypants is John Gruber’s project which does a couple of nice typography things. Converts double and triple dashes into en and em dashes respectively. Fixes your quote marks into curly quotes. Makes ellipsis out of three periods.

Eliminates Widows

Replaces the last space in headers and paragraphs with a &nbsp; (non-breaking space) character, so that no single word is left stranded on it’s own line as a widow. This one is brilliant, if you ask me.

So like I said, just plugging this in and turning it on is going to get you some nice features, but if you want to take it a bit further, Typogrify gives you some delicious CSS hooks to work with.

Written by Chris Coyier from CSS-Tricks on January 4, 2008 | Filed Under WordPress Plugins

Share with others

  • StumbleUpon
  • Add to Delicious
  • Mixx

No Responses so far | Have Your Say!

Leave Feedback

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>