Typography Tools for the Web

Plugins, bookmarklets, and jQuery – oh my. Check out Jeremy's roundup of helpful typography tools designers and developers can both love.

With the explosion of typography on the web, web designers now have a myriad of font choices at their fingertips. Because of this, many tools have been created to aid with making type on the web beautiful and easy. These tools create an interesting intersect between designer and developer, as knowledge of these tools is important for both parties. Here are a few of my favorites:

What Font

This handy little bookmarklet allows you to quickly identify fonts used on a webpage without having to go through the Webkit Inspector or Firebug. Simply roll over a section of type on a webpage, and it displays the font name. Click on the section of type, and it displays the font families listed, type size, line height, color, a specimen, and Twitter link.

What Font bookmarklet in action.

The Elements of Typographic Style Applied to the Web

The Elements of Typographic Style book coverRobert Bringhurst’s The Elements of Typographic Style is known as the de facto standard for typography use. The book is a great resource for designers (I pretty much keep one within 3 feet of me at all times), and most design courses use this book to teach general to advanced typographic principles. This site, created by Richard Rutter, takes some of the principles outlined in Bringhurst’s book and applies them to a web context, outlining how they are carried out in CSS. This is a great way for designers and developers alike to brush up on the “rules” of typography and see how they’re carried out on the web. Note: It seems this site has not been updated for several years, but it is still a great resource.

Lettering.js

This is a handy jQuery plugin that allows for “complete down-to-the-letter control”. This is especially handy when the kerning on that huge headline is out of whack. You can easily adjust and be on your way!

FontShop Photoshop Plugin

One of the newest tools out there (in Beta as I write this) is a plugin for Photoshop created by FontShop. It allows the user to preview FontShop fonts in their PSD file. The beauty of this? Now you can show a client a layout without having to purchase the fonts until the layout is approved. Now, if only Typekit would come out with something like this…

FontShop Photoshop Plugin in action.

Cross-Browser Kerning Pairs and Ligatures

Another interesting tool that has come across the wire is this nifty CSS declaration by AestheticallyLoyal that “improves handling of kerning pairs and ligatures in modern browsers.”

{ text-rendering: optimizeLegibility; }

With and without example of declaration in use.

Currently this is supported by Safari 5, Webkit, and Chrome. Interestingly, Firefox uses the declaration by default for text sizes over 20 pixels. As usual, there are a few bugs to keep in mind.

Check out some more handy type tools at www.nicewebtype.com.