A look at CSS font-families

Font-families are the CSS style that define which font is used on your web pages. Here I quickly look at the fonts which is 'safe' for web development. Fonts are divided into a lot of categories, but for web development there is mainly four categories:

• sans-serif
• serif
• script
• monospace

For web development, there is mainly 8 safe fonts to use:

1. Arial (and Arial Black)
2. Comic Sans MS
3. Courier New
4. Georgia
5. Impact
6. Times New Roman
7. Trebuchet MS
8. Verdana

Now let's catgorise these safe fonts into the categories:

• sans-serif: Arial (and Arial Black), Impact, Trebuchet MS, Verdana
• serif: Georgia, Times New Roman
• script: Comic Sans MS
• monospace: Courier New

Now to make a family we start by using the most generic font specification. Let's make a sans-serif font-family:

• Calibri, Verdana, Arial, sans-serif

The font-family is comma separated, meaning if the user doesn't have the left-most font on his computer, the next font in the list will be used. Normally a font-family consists of four fonts. As you can see, I used Calibri as the first choice; it's installed with MS Office 07 and most users will probably have the font installed on their system. If not, it will use Verdana and then Arial, which users will have 99% of the time, otherwise the system can choose any default font it want. And so it's easy to make font-families. Let's make a script one:

• Lucida Handwriting, Comic Sans MS, script

Last note, remember to try to use sans-serif fonts for body text, as it is by far the easiest to read on a screen. You can be daring with serif, but I don't recommend script fonts. There you go! Tjorriemorrie