i-us Wire
Will-Harris Wire Home

Search the wire

Wire Logo
Wire Logo

<What’s new?>

By Daniel Will-Harris 

Font sizes on the web

I'm mad as hell and I'm not going to take it anymore!

I'm sick and tired of going to sites that use CSS to set their font sizes in points or pixels. I'm not sure who this text is formatted for—but it's too small for me, and, I would guess, a lot of people. The higher resolution your monitor, the smaller the type looks, and so these sites that are setting body text at 10 or 9 point are doing their readers a disservice.

If other people are like me, they try to read, get annoyed that they can't increase the size of the type in their browser, and go find another site that has the same kind of information but is easier to read!

In case you didn't know, you can usually enlarge fonts in your browser. In Explorer, choose View/Text Size and choose Larger or Largest. In Netscape, choose View/Increase font.

But if someone designs their site with CSS font coding that uses points or pixels, browsers don't scale the fonts.

There is one way around it, but it can also eliminate a lot of style in web pages. In IE, choose Tools/Options (View/Options in IE4) and click on Accessibility. There you can choose to ignore font sizes (and styles). In Netscape Navigator, choose Edit/Preferences, then click on Appearance/Fonts, and check "use my default fonts."

That works, but how many people know about it? And who wants to have to go through all those settings just to make the words readable?

>Stupid and insensitive

What gets me about these people is that they're showing either a total disregard for their readers or they're just showing their stupidity. Many of them think it's only important to design for other cool young designers who've had laser surgery or wear colored contacts. Whatever the reason, they come across as both ignorant and rude.

What is the point of having a web site that's hard to read? Why go to all the effort of creating a site, building a structure, designing the site, assigning articles, writing, editing and producing, only to put all that onto a page with tiny type?

My question is simple—what are these people thinking? Really—what did they think they would accomplish with small fonts that were hard to reader and hard for the reader to change? What exactly is the point of this?

I can't find any, so I keep going back to thoughtlessness and idiocy.

>Spec type right

So how do you spec type so it's the size you want—and the size readers want? Easy. Just use a relative unit of measure. You can see the old-style numbered sizes, such as "-1" for smaller, and "-2" for smallest. Or you can use the other numbered style, from 0 to 7 (7 being largest).

But when people start using CSS, they get all excited by the ability specify fonts exactly. But it's misleading, especially if you use pixels, because the size of the font will then depend on the resolution of the screen! What a can of worms that one is. And if you use points, you're still locking people into that particular point size.

If you're using CSS, you should use either "ems" or "%" - both of those are relative sizes, based on a visitor's "base" font size, which, unless they've changed it, is 12pt.

Ems are the width of the upper case letter "M" in any given font. You may not have heard of this before, but it's a traditional unit of measure in typography, and it's simple, because you can see it just by looking at the upper case M of any font. % is a percentage of the base font size.

Setting type at 1.5em (or %) would do the following: Someone with a default of 12 point type, would see 18 point type (that's 12 point times 1.5). Someone who likes bigger type and has set their default to 14 would see 21 point type. Someone who set a default to 10 point would see 15 point type.

Because it's all relative based on the user's default setting, the designer still has control, in that they can specify how much larger or smaller type is on the page, but the user still has control so they can read it.

Because the em unit can be used for all aspects of CSS, it's possible to create pages where everything, including leading, margins and line length, is scaled by this one setting -- thereby keeping everything in proportion, no matter how large or small the Web site visitor likes their text. Makes sense, doesn't it?

Now, how hard can it be to set fonts using ems or % instead of points or pixels? Not very hard, you just have to know why it's important, and do it.

>Which fonts?

Equally ignorant, most of the people who build these unreadable sites, who are apparently highly paid professional web designers and developers, don't even know how to spec fonts properly. They do things like this, "Geneva,Helvetica,Arial," which makes it clear they use the Mac, and don't realize that only 4% of the people on the web use Macs, while most people use Windows.

Arial is an acceptable font for the web, but it’s actually narrow and not nearly as easy to read as Verdana. So always include Verdana before Arial (Arial being the “last chance” font). i-us.com is to be congratulated for using Verdana!

It also shows that they don't know that there are free fonts that make reading the web much easier. Like Verdana, Georgia, and Trebuchet, all free for both Windows and the Mac from Microsoft, yes, Microsoft.

Anyone who uses IE now has Verdana, because it's shipped with the program (though why Microsoft doesn't also bundle Georgia, the easiest to read serif face, is a mystery all its own).

So at the very least, their font setting should say, "Verdana,Arial,Helvetica,Geneva"

On www.efuse.com, I use "Georgia,Verdana,Times New Roman,Times" because Georgia is the best font, but if someone doesn't have it, then it's likely they'll have Verdana (the next best) and then if they're using Windows, the Mac or even Linux, they'll have some form of Times New roman.

I tend to avoid using "Serif" or "Sans" at the end, simply because right now browsers don't do a very good job selecting these fonts, and when I go to pages that use them, my browser goes a little nuts and shows all kinds of inappropriate fonts instead of what you'd expect if all else failed,  Times New Roman and Arial.

I suggest

For fonts: "Georgia,Verdana,Times New Roman,Times"

For sizes: Do the reader-friendly thing and use old style font size numbers, ems or %'s. That way your site readers won't have to jump through hoops just to read your text—or more likely, just leave your site without reading it.

Read more Will-Harris Wire articles




[Previous Article]

[Next Article]

[ Wire Home] [Archives] [Will-Harris House]

Daniel Will-Harris is a designer and author whose work can be found at http://www.will-harris.com. His site features TypoFile Magazine and Esperfonto, the web’s only typeface selection system. He may be reached via e-mail.

Visit eFuse, the friendly place to learn how to build a better web site

Copyright Daniel Will-Harris, 1998-2002, All Rights Reserved