Tools and Resources to Improve your Typography on the Web

by Tom Kenny (@tkenny)

Typography on the web has previously been confined to a set of web-safe fonts due to their dependance of being on every computer but now that has changed. It’s one of the most satisfying and rewarding aspects of web design when you get it right but can also be one of the most difficult to do so. Here are some tools, resources and free fonts to help you on your quest for quality typography.

Font Embedding

Font embedding has become the saviour of typography on the web. Without it, we would still be stuck using the usual array of ‘web-safe’ fonts such as Arial, Georgia and Verdana. Not that there is anything wrong with them, just designers needed more choice and variety is the spice of life as they say. In fact web-safe fonts certainly played their part in forcing designers to create readable body text as they’re all very readable at smaller sizes.



  • Easy to setup (see previous post)
  • Behaves exactly the same as regular text
  • Even works in IE6+ (albeit through Microsoft’s proprietary format)


  • Limited use of fonts due to no form of copy protection



  • Huge selection of commercial fonts to choose from
  • All the benefits of @font-face but with copy protection


  • You don’t own the font for use in Photoshop designs etc.
  • Relies on JavaScript
  • Isn’t free (although it isn’t expensive)



  • Doesn’t use JavaScrip, only CSS
  • All the benefits of @font-face but with copy protection


  • Seemingly expensive



  • Works across all browsers


  • Requires JavaScript
  • Can’t select text



  • Works across all browsers


  • Requires Flash

Font Discovery


Have you ever found a great font but don’t know what it is? I frequently get asked what font I’ve used for the Inspect Element logo. Well now you can snap a screenshot and upload it to WhatTheFont which will return a list of the best matches of fonts. There have only been a couple of times where it hasn’t found the font I’ve been looking for but has worked flawlessly otherwise.


MyFonts gives you the ability to view an extensive selection of fonts with custom text before you buy.


Online font store founded by extremely well respected typographer and designer Erik Spiekermann.

I Love Typography

You won’t go wrong by following I Love Typography to keep up with what’s going on in the world of Typography.



As the name suggests, Typedia aims to be an encyclopaedia of Type by blending the world of crowd-sourcing and social media and community. Not only is this a great place for font discovery but also a great place to learn about typography.

Free Fonts

Fonts available for @font-face embedding

You can’t just start using any font on the web. You have to respect individual licenses so this is a great resource displaying all fonts that have been specifically approved for @font-face embedding. The list is kept up to date as more fonts are added.

The League of Moveable Type

The League of Moveable Type, an open-source type movement, is very much a quality over quantity collection of free fonts.

exljbris Font Foundry

Similarly, exljbris Font Foundry is a collection of a few absolutely great fonts. All fonts are created and released by Jos Buivenga.


On the other end of the scale, dafont contains a huge number of fonts but finding a good font is like looking for a needle in a haystack. There are a few good hidden gems to be found though.

Font Squirrel’s Free @font-face Kits

A number of free fonts for you to download complete with the CSS you need to use the fonts on your site.

One more thing…

Don’t forget to check out Elliot Jay Stocks’ 8 Faces magazine when it launches as all signs point to it being excellent.

Improve your design knowledge in just a minute or two a day, for free


You'll get a free email every Monday to Friday with actionable design details that will increase the effectiveness of your designs. Each one only takes about a minute or two to read.

Free. No spam. Unsubscribe anytime.

by Tom Kenny

I’m a freelance web designer and front-end developer with 9 years of experience designing for the web. Follow me on Twitter here.