5 CSS Fonts & Typography Tips

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

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/

---

Subscribe to The Venture Skills Blog by Email

All our Posts are audio subscribed for more information see here, and to access the podcast feed here

---

This blog is moving soon, make sure you move with us by using our Feedburner RSS feed, if you have used the autodiscovery button in your browser you may need to swap feeds, simply delete the old feed and add, http://feeds.feedburner.com/VentureSkills For a more detailed explanation on feeds and recieving our content in various formats click here