Becoming fontastic - mastering fonts

There’s a really interesting article about the transformation of the typesetting of the highway signs, a change from Highway Gothic to Clearview. Impressive work, no doubt, but it’s surprising that it wasn’t tended to earlier, methinks.

As of late I’ve noticed that there’s less and less emphasis on forcing users to adapt to the web designer’s concept of a website and more stress placed on the web designer creating around the user or visitor, and I must say I’m a very big fan. Flash is unflashionable (pardon the pun) or at best targeted to a niche market and is exceedingly inaccessible, and sIFR, of which at one point I was a large proponent, appears to have all but quietly disappeared. Web 2.0 boasts large fonts, dynamic colors and user-generated content that seems to push design back a step.

But mastering fonts is another thing. Truth be told, there are only so many fonts you can dabble with, only so many fonts that are web-safe and cross-platform compatible. Most people stick to some variant of Verdana, Times New Roman, Arial or Georgia, and recently I’ve noticed the emergence of Trebuchet MS (which is standard on OSX and on PCs). But as much as I agree that fonts can make or break a site, how you use it is the other half of the battle.

Serif vs sans serif
Serif fonts are fonts that have an extra half stroke or touch to the endings of each letter. Times New Roman, Georgia and Garamond are good examples, but they’re best for body text. Recently serif fonts haven’t been à la mode, I think, mainly because it feels so heavy and formal.

On the other hand, sans-serif fonts are used for headers and title text because it is more lightweight and catchier (though I can’t safely argue that easier to read, on account of Alex Poole’s extensive research). I do believe, however, that without the extra curly strokes there is more space between each letter, lending to less clutter. Arial, Verdana, Gill Sans, Trebuchet MS, Helvetica are all sans-serif.

Letter-spacing
Now comes the fun part. CSS allows you to define the letter-spacing of your text, allowing you to put extra white space between your letters to make it less heavy (consider the “Updates” or the “Most Popular Pages” on the right). Using serif fonts now becomes all the more appealing.

Text-transform
You can also make your fonts all caps (again by CSS) or all lowercase, putting emphasis on certain parts of your website without making it too obvious. (Try dimming the color for a more subtle effect).

em, ex, pt or px?
When using fonts, one of the more popular confusing points (pun intended, once again) is the difference between

em, (a typographical unit of measurement, which some sources say is equivalent to the width of the letter ‘m’ in the font) or

px, which stands for pixels

pt, which stands for point, which is equivalent to 1/72 of an inch and

ex, a less common alternative, which is considered to be the height of the letter ‘x’ in the current font.

To clarify:

em is a relative font measurement, and 1em is thus equivalent to the standard height set for that font. In Internet Explorer, for example, 1em is 16px. It is recommended because it can be resized easily by a browser’s available tools

px is an absolute measurement. The W3 consortium says it’s equivalent to 1/90 inch, and though arguments can arise over whether or not it can be resized, most compliant browsers, I’ve noticed, have no problem.

pt, as another absolute measurement, is such that on 72dpi (dots per inch) screen, 12 point text will be 12 dots high (or 12/72 inch).

ex is apparently half an em.

For a great comparison of each of the browsers and the font sizes, check this layout.