Typography in web design and development

So you've just started a new design and it's already filling up fast with text content; but have you considered all your font options?

You pretty much have 3 options.  Use web safe fonts; i.e. fonts that are likely to exist on all/most computers.  If you're using a non-standard font then you could always export it as an image; or lastly but not least you could use one of the javascript/flash embedding techniques which are becoming rather popular.

Option 1: Web safe fonts

This is an option that should never be overlooked.  For the majority of text based content you'll probably be using one of these fonts.  For your convenience I've made a little list of common web-safe fonts.  Some are interchangeable, like Arial (windows) and Helvetica (mac); so this is worth considering and accounting for when designing.

Option 2: Exporting as a graphic

Ok so this is probably the simplest method to get some exciting typography on your design; it'll also be the method where you have most control over the text and where it'll look its best.  Downsides?  Lack of indexable text, accessibility and of course the weight and load time of the site.  However you can always use the alt and/or title attributes to aid in accessibility (also helping a little with SEO) and depending on the design if you're including the text as part of another graphic (a background, header etc) then you might not really be adding much to the sites size anyway.

My point here is that although this method should really be avoided where possible, it is the one that will achieve the most visually pleasing non-standard type on your website; but comes at a cost.  As long as you;re aware of those costs, we don't have a problem.

Option 3: Embed the text

Things get a little more complex here; and if like me you're primarily a designer a little education will be in order.  There are 3 mainstream embedding techniques (feel free to add to this list in the comments section!); these methods are:

• Flash Embed.  This one's been around for a while, and involves creating an SWF containing your type, and forcing flash to embed the characters used when publishing.  This means that your user will get a light, vector based lump of text.  Downsides?  Well the big one is the same as exporting the text as a graphic ... the text is still not indexable, not accessible and will still carry more weight than simply HTML.
• sIFR. sIFR uses a combination of flash and javascript, but the primary difference between sIFR and simply embedding in an SWF is that this keeps the text indexable, which is of course great for SEO.  For more info check this site out.
• Cufón. This is a relatively new method, and is much easier to setup than sIFR.  You use a tool to package the font in a protected format, meaning that no flash is necessary!  Simply reference it in your code and include some JS and bobs-your-uncle.  For more information and set-up instructions check out this link.

So as you've probably guessed by now there's no right and wrong answer here; simply different methods that are appropriate in different circumstances.  And anyway, remember that sometimes you just don't need a fancy font!

Our font affiliates:

Font of the Month

Fonts.com - Download over 125,000 Fonts!

The author - Nathan Hornby

Nathan Hornby is a professional UX designer living and working in London, UK.