Fonts
Default Size is Best
A lot of web designers like to set specific font sizes on their web pages. Why do they do this? Simply because they don't trust people to have decent default font sizes and assume that they can pick a better size. With an open mind, let's examine whether this is a logical assumption. There are three possibilities when it comes to default font size:
- The user's default is too small.
- The user's default is too big.
- The user's default is just right.
The designer then does something to change the font size on the page. They can:
- Make the font smaller.
- Make the font bigger.
- Leave the font the same.
| - | Make font smaller | Make font bigger | Leave font alone |
|---|---|---|---|
| Default too small | Result 1: The default font was a bit too small and the user had to strain their eyes to read it, but now you've made the text completely unreadable. VERY BAD. | Result 2: The default font was a bit too small but you've fixed it. GOOD. | Result 3: The default font was a bit too small, and it's still too small. BAD. |
| Default too big | Result 4: The default font was a bit too big, but you've fixed it. GOOD. | Result 5: The default font was a bit too big and now you've made it uncomfortably big. Perhaps it's so big that the user can now only see three words on their screen at once, making it very irritating to read the site. VERY BAD. | Result 6: The default font was a bit too big, and it's still too big. BAD. |
| Default just right ** | Result 7: The default font was just right, but now it's too small. BAD. | Result 8: The default font was just right, but now it's too big. BAD. | Result 9: The default font was just right and it's still just right. GOOD. |
Now a little mathematics. We'll assign some scores to each result. A GOOD result is worth +1 point, a BAD result is worth -1 point and a VERY BAD result is worth -2 points.
Also, we'll award double points for the row marked with **. Why? Because we should assume that for most people, their browser's default is just right. It might not be exactly right, but it's probably close enough — if they couldn't read it, they'd change it.
Making the font smaller: VERY BAD + GOOD + (2 * BAD) = -2 + 1 + 2*-1 = -3 Making the font bigger: GOOD + VERY BAD + (2 * BAD) = 1 + -2 + 2*-1 = -3 Leaving the font the same size: BAD + BAD + (2 * GOOD) = -1 + -1 + 2*1 = 0
So there you are — mathematical proof that leaving the font the same size is the best course of action.
What's Wrong with Verdana?
The problem is that Verdana looks very chunky, so a lot of people do things like:
BODY {
font-size: 75%;
font-family: "Verdana", "Arial", sans-serif;
}to obtain a sensible-looking font. However, when the page is then viewed on a system that doesn't have Verdana installed, the user will get 75% Arial, which will be tiny and impossible to read.
There are three solutions to this:
- To hell with people that don't have Verdana installed!
- To hell with Verdana!
- Use Verdana, but keep it at 100% or above.
With regards to solution one, about 5-10% of people don't seem to have Verdana, according to the Codestyle Font Survey. Say, 1 in 12 people don't have Verdana installed — excluding them has the same effect as switching off your web server for a month — would you switch off your web server for a month? So forget #1.
#2 requires no explanation.
#3 is actually a lot better than it sounds. The idea here is to use
Verdana only for headings — say Verdana 150% for <h1>, 120% for <h2> and 100% for <h3>, all nice and bold. Use a completely different font (I quite like Georgia.) for normal body text.
This actually produces a very nice effect — the headings really stand out. In traditional typography, a serif-body-sans-serif-headings approach is quite common. Grab a nearby novel; chances are that it's in serif print, right? The reason for this is that the eye tends to follow the serifs along as you read, making it great for long chunks of text.
Currently on the web, the serif-body-sans-serif-headings approach has not caught on quite so well. Probably this is because seriffed fonts can look awful on lower resolution monitors, especially on older operating systems with more basic hinting and antialiasing capabilities.
But computers are evolving and seriffed fonts are now very readable on the vast majority of computer displays, so perhaps we'll start to see this old typography principle coming into play more often on the web.