Tools and Resources to Improve your Typography on the Web

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.

@font-face

Advantages:

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

Disadvantages:

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

TypeKit

Advantages:

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

Disadvantages:

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

Typotheque

Advantages:

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

Disadvantages:

  • Seemingly expensive

Cufon

Advantages:

  • Works across all browsers

Disadvantages:

  • Requires JavaScript
  • Can’t select text

sIFR

Advantages:

  • Works across all browsers

Disadvantages:

  • Requires Flash

Font Discovery

WhatTheFont

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

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

FontShop

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.

Education

Typedia

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.

dafont

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.

by @tkenny

You should follow me on Twitter here

Subscribe to Inspect Element by email to get updates on new articles, tutorials and WordPress themes: