By: Tim Nash

So following in the vein of our accessibility drive and then our layouts we now turn our attention to some of the best ideas and tips when it comes to using Fonts and typography in your CSS based sites. In case you were wondering...

Typography is the art and techniques of type design, modifying type glyphs, and arranging type. Type glyphs (characters) are created and modified using a variety of illustration techniques. The arrangement of type is the selection of typefaces, point size, line length, leading (line spacing) and letter spacing.Wikipedia

These as always are in no particular order, but hopefully will help at least one or two people out.

Drop caps

Drop caps have been around since medieval monks started writing and with this CSS technique you can use drop caps without resorting to images. http://www.mandarindesign.com/troops.html The article has several other great examples of typography and CSS.

5 typography examples

All 5 are CSS based and demonstrate various techniques and looks including typewriter, fancy headlines, handwriting. http://www.3point7designs.com/blog/2006/09/20/advanced-typography-techniques-using-css/

The Font Wizard

We may have strained you, and lets face it we all like pushing buttons, so if doing all of this by hand scares you try playing with various font types and typographical faces and have the code generated for you. http://www.somacon.com/p334.php

Yahoo Font CSS

Another great stylesheet from Yahoo and is a great base for typographical and font work in web design, by the way a great way to learn to use the YUI (yahoo user interface libraries which these sheets are apart of is to come along to Hack Day in London! http://developer.yahoo.com/yui/fonts/

Detailed discussion on web typography

This is a talk given at South by Southwest called web Typography sucks Rather then a detailed screen shot we will do one better and here is the audio to the talk [audio=http://audio.sxsw.com/podcast/interactive/panel/2007/SXSW07.INT.20070312.WebTypographySucks.mp3] http://audio.sxsw.com/podcast/interactive/panel/2007/SXSW07.INT.20070312.WebTypographySucks.mp3 http://2007.sxsw.com/interactive/programming/panels/?action=show&id=IAP060264

Not quite CSS

Ok so we couldn't do an article without covering sIFR the Javascript and Flash script, that uses a technique similar to SWFObject to "swap out text" and replace it with flash, which is a vectorised version of the font cool huh, what's more its completely accessible and search engine friendly!. http://www.mikeindustries.com/sifr/