Ok, corny headline. But a serious subject. If I were to offer one piece of advice on making your profile more stylish, it would be this: forget the graphics and annoying flash plug-ins. Get yourself a nice family of fonts.

Most people who aren't experienced web designers probably come at fonts from a background in word processing (most likely with Microsoft Word.) The problem with this is that it may give the impression that the fonts are an intrinsic part of the document. They are not.

Anyone who has spent hours laboring over a Word document in order to get just the right combination of rare and exotic fonts, only to see them disappear or get replaced when the document is opened on another computer, knows this sad truth. Fonts are in the machine, not in the document (with the exception, perhaps, of PDF and image files). This fact is amplified on web pages, where a page or document will be viewed more oftenly by a machine other than the one is was created on.

So if you're creating a page that you know will most often not be seen on your own machine and therefore will not have at its disposal the fonts that you have loaded on your machine, how do you know which fonts to choose? That's where font-family rule css comes in.

Here is an example font-family css rule:



A font-family rule basically says: first try this font, then this one, then this one, and if none of those are available, use the font in this family of fonts that the viewer has specified as the default in their browser.

In this case the font-family is "sans-serif" and the fonts listed before it (Arial and Helvetica) belong to that family. There are five generic font-families:

serif, sans-serif, monospace, cursive and fantasy.

Serif and sans-serif are the most important families (the Montagues and Capulets, Kennedys and Bushes, of typefacing.) A serif is basically a decorative little tail added to a character, so serif means something like "with decorative little tails on the letters" and sans-serif means "without decorative little tails". Avoid monospace unless you're a geek like me who's going to be displaying a lot of code. And don't use cursive or fantasy if you're over the age of eight.

The trick to creating a good font-family rule is knowing which fonts are common to the most popular operating systems -- Windows (the overwhelming majority), Mac, and Linux. Here are a few of my favorites, common to Windows and Mac systems, displayed as styled for your browser:

sans-serif
Arial, Helvetica, sans-serif
"Trebuchet MS", Helvetica, sans-serif
Verdana, Geneva, sans-serif

serif
"Palatino Linotype", "Book Antiqua", Palatino, serif
Garamond, Georgia, serif
"Times New Roman", Times, serif

(Note: the standard is, for multi-word font names, put the name in quotation marks. However, on myspace, remove the quotation marks. The fonts will still display properly in most browsers and quotation marks will jam the myspace parser.)

I generally prefer sans-serif fonts for web pages, larger and bolder for headlines. Lighter and smaller (but still visible) for longer passages of text. If I want something to have a slightly more literary feel, then I might use a serif font for body text.

A more complete list of common stylish font-families can be found here:

http://phosphorusandlime.blogspot.com/2005/11/css-window-mac-font-families.html

If you have a favorite not listed here, especially for Linux, feel free to note it in the comments.

Labels: myspace fonts and typography