HTML/CSS Font-Family: Who's family is this?

In CSS there is a well known, yet oft misunderstood property called Font-Family. Today we will explore this important property and how we can use it to it's fullest. I'll admit that I spent a long time working on pages without really understanding this property. There are a lot of intricacies to it that unless you really understand typefaces, you may not fully grasp. I do not know typefaces very well, but I know which ones are used regularly, and I stick to those.

What is Font-Family

Simply, this property allows you to set what font will be used to display the text portion of the area you are controlling. So if you want to display in Time New Roman, you will tell the font-family that. But it does more than just that. You need to also tell it what to fall back to, in case the user does not have Times New Roman installed.

How does Font-Family Work?

Now for a little nitty gritty. Within your style sheet, you can define which font you want to display in. for instance:

font-family: times;

will display like this

Font-family allows for a comma separated list, so you don't want to just list one font. The last one listed is a fall back font and should be a generic font. There are five generic fonts: "serif", "sans-serif", "cursive", "fantasy", "monospace". So say we use "font-family: 'Times New Roman', serif". That will tell the browser to display in Times New Roman and if Times New Roman is not available, to use whatever serif font is set as default.

Since this is a comma separated list, you can have more items on there. Say you have a special font you really like that you want to use, if the reader have it installed. If they don't, courier will do. Then, if they don't have courier, then it must be monospaced. You would use this:

font-family: "The Coolest Font Ever", courier, monospaced;

Most people will not have the cool font installed, but most people would fall back on courier. Then, if by chance they don't have courier, they will most likely have a monospaced font.

What are generic fonts?

These are the 5 categories that every other font falls into. Some might fall into two. Here, let's define them:

A serif font has "tails" or serifs on the letters that give it a special flare. Also called roman. ie: Times, Roman, Georgia.
Sans-serif fonts have no serifs. Sans means without. Also called swiss. ie: Arial, Geneva, Helvetica.
Cursive fonts are made to look like cursive hand writing. Also called script. ie: Comic Sans MS, Lucida Handwriting.
Fantasy fonts are fancy fonts. Also called decorative. ie: Copperplate, Impact.
Monospaced fonts are fonts where each letter takes up the same widths. So this i and this m take up the same width. Also called modern. ie: Courier, Monaco.

Which font should I use?

I'm not going to tell you what font to use, but serifs can be hard to read on computer monitors, as can cursive and fantasy. Some people love monospaced, others hate them. Monospaced is great for proofreading. Certain typos jump right out at you. Monospaced is used by standard for type-set items or code snippets. Cursive and fantasy are good for accents. Serif is great for print and sans serif is great for screen.

Be careful about choosing your special font. It is best to choose a font that a lot of people have. The Coolest Font Ever may be your favorite font, but I don't have it installed, so I will not see it and it will default to whatever my default font is. If you want it to be a certain way, then you need to give a backup font and a generic font, at the very least. I avoid special fonts altogether.