Fonts Not Displaying Properly on Web Pages

I noticed one day that some webpages were a little difficult to read as the (sans-serif) font it used looked borked, for some reason. The first time I noticed this, I viewed the source, but didn't find a font declaration in that page. The most recent time I looked at a sample, I found this

<FONT face="sans-serif,helvetica,arial">

I haven't done much work with CSS, so I wasn't aware that order matters when declaring a font to use with CSS. If the first font in a list exists on your system, it will use that one first.

There are several font declarations in the HTML source, but for the main text, the results are:

It's just strange. Off. It's lacking some sort of smoothness. The vertical alignment of each letter also seems to be slightly different. Kerning is yucky. Though it is a sans serif (screen) font, I just don't find it very readable or pleasing to the eye.

FYI:

• sans serif (clean) fonts are intended for reading on screen
• serif fonts (fonts with little flicks or marks on the corners) are intended for printed text

The paradigm is that legibility is best when fonts are used this way.

What's funny is this situation appeared on a The Linux Documentation Project page. A Linux page viewed in Linux looks funny.

When typing an Openoffice document, all fonts appear, and are as expected (from screenshot:).


...despite sans-serif having no kerning and ugly tracking.

However, bump that font size down from 24pt to 10pt, and Helvetica is ugly! What the hell happened to those e's and a's?

("Font Darwin Award" once again goes to sans-serif, for its display of horrid kerning and tracking. If it wasn't obvious before, it sure is now.)

Theoretically, since sans-serif exists on my system, that should be the one being used in a web page (because it's first in the web page's font list). However, the evidence suggests it's actually using Helvetica. Why is Helvetica on my machine so ugly once it goes below 14pt or 12pt? I don't know. Still investigating. My monitor is a few years old, and my graphics is a good graphics card less than a year old, so I doubt those are the issue. Even so, why is this an issue with Helvetica, but not with the other fonts?

The only solution I can think of so far is to uninstall Helvetica. The print nerd in me really doesn't want to. If you really want to nerd-out, this is a great guide to fonts on Linux.

Please let me know if you figure this one out!