Using web-safe fonts in web design typography

[symple_box color=”yellow” text_align=”left” width=”100%” float=”none”] Wait!  This post is really out dated, and the info here just isn’t relevant anymore.  Check out this new post that covers web typography, instead.  If you insist on reading this post anyway, I won’t stop you…
[/symple_box]

As a web designer, I toy with typography and try to make the best of standardized, web-safe fonts.  Until now I enjoyed the often seen, italic Georgia type style.  This usually looks best in 20-28px, or their respective pt and em counterparts.  This example is set to 24px.  As well it looks nice in Bold Italic.

You’ve seen me around, haven’t you?

However, I recently discovered a wonderful replacement for the above; italic Times New Roman!   It is a bit thinner and has sharper curves; looking slick.  The example is set at 26px, and at 24px it was smaller than the above Georgia, so you may want to play around with the sizes to find the best fit.

Times New Roman has a purpose now!

Courier New, which has a typewriter look to it, is not seen quite as often as the other two Serif fonts.  Perhaps it should be, as it makes for nice headings.

Courier New has a unique typewriter look

Let’s have a look at some Sans Serif fonts ( serifs are the little extensions you see at the end of letter strokes, and the word Sans is French, meaning without ).  First off, Verdana has been seen around the web for ages, and I often feel it is over used.  A great substitute is Arial, which looks very much the same, except slightly more narrow.  Perfect for your general content font style, or headings.

Arial’s Dad can beat up Verdana’s Dad

One secret in my typography arsenal is a font called Trebuchet MS.  In particularly, I use this font for menu items.  It looks quite nice at around 16px, text-transform set to uppercase, and bold.  I prefer to use this font only for main menu links, and maybe some headings, but for the main content font I find it to be too unique.

Trebuchet MS makes very clean menu links

There are several other web-safe fonts you can use in your typography; these are just my favorites.  Play around with larger font sizes, bold, italic, and uppercase.  You’ll notice that some font families work better for headings, and some work better for your general content.  Check out this complete list of web-safe fonts.