2007-21-09 Generic font families

I guess I didn’t really notice this when I was still a Windows user but then I finally changed to better – to Unix system, Ubuntu in my case. I didn’t have same fonts that I had before. First I didn’t care much. Then I started wondering why certain sites were using serif fonts though it didn’t seem to fit in their concept. Quick peek in style sheet revealed they hadn’t defined the generic family.

There’s five generic families, most commonly used are serif and sans-serif, there’s also monospace, cursive and fantasy. I personally would prefer monospace fonts, but generally it’s recommended to use sans-serif fonts on your website. Though serif is nice to read on print, sans-serif is better when reading from screen.

Why you should add in your style sheet generic family. Well let’s assume that in your style sheet reads something like this:

font: 1em "Trebuchet MS", Verdana, Helvetica, Arial;

Basically there’s nothing wrong, they’re all sans-serif fonts and common – on Windows systems. What I see on my Firefox though is this:

This is not sans-serif, it’s serif font.

But if you had written:

font: 1em "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif;

Result would be this:

Most browsers have some serif font as default, so unless font-family or/and generic family aren’t defined text will be shown on this default font. You can of course change this, as I have done, so that my default font is sans-serif. But this means that if you have for example “font: 1em Times New Roman, Georgia, Cambria” instead of “ font: 1em Trebuchet MS, Verdana, Helvetica, Arial”, I would see it anyway as in second picture. Defining generic font will help you to show text in correct way on your website and I assume you want that.

Of course I could install previously mentioned fontsbut why should I. (I had copied some fonts from Windows Vista – when I still had it – in my Ubuntu but for some reason I didn’t copy all fonts.) Why anybody should. It’s not my job to make your website fonts look the way you intended, it’s your job.

Now after you have read this I hope you go to add the generic family in your style sheet, if you don’t have it already. It’s true that Windows systems are the most common operation systems, but Windows isn’t only OS. There’s people who are using Macs and Unix systems instead of Windows.

Examples:

Serif -fonts:
Times New Roman, Garamond, Georgia, Cambria, URW Bookman L (in picture)

Sans-serif -fonts:
Arial, Verdana, Calibri (in picture), Trebuchet MS, Helvetica

Monospace:
Courier New, Courier, Nimbus Mono L (in picture)

Further reading:

Fonts
Linux Font Equivalents to Popular Web Typefaces at Monday By Noon
Browser News: Resources – Fonts
Top forty fonts
Most common fonts on Unix systems
Most common fonts on Windows systems
Most common fonts on Mac systems