Design Tip:
Who Should Control Font Size?

by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.

There's no single best font size to use on every Web page. Your selection of type size should depend on your intended audience, page layout, and desire for maximum accessibility. Basically, you have two options: either you the designer control the font with style sheets or you cede control to those unruly visitors.

Absolute Control With CSS

The open, cross-browser, and cross-platform nature of the Internet is often an problem for Web designers who want complete control over page display. Total control is hard to achieve because so many factors affect the look of a page, including:

• Choice of browser
• Screen resolution
• User preferences
• Screen size
• Operating system

In particular, some users set their browser preferences to use a larger font size. While this reduces eye strain, it can also scramble your page layout by shifting elements. In the worst case, this can cause page elements to bleed into on another.

Many designers opt for the extra control that comes with cascading style sheets (CSS). Using CSS, you can even embed unusual fonts that most visitors don't have installed already. Most commonly though, you'll use CSS to attach a style specification that instructs the visitor's browser to always display content in a particular way. Page content might be Arial at 12 pixels, while links display in Times Roman at 14 pixels.

By using absolute font sizes, you can be relatively certain that the page will display like you designed it. Make sure that you're using a reasonably large size. We've seen sites with the font set at 8 pixels or less! That size is hard to read in print, and remember how people read online: it's more tiring on the eyes than printed material.

By setting the font in pixels, you can override the browser's font size preferences. Even if a visitor tries to increase the text size in the browser, he or she is out of luck.

That is, unless they know how to create their own system style sheet that overrides the styles you selected. Experienced users with disabilities who need large type and other's who rely on adaptive and assistive technologies create their own style sheets all the time. Average visitors don't; they probably don't even realize that it's possible, so you can more easily control their viewing experience.

Share Control Using Relative Fonts

But is complete control always a good idea?

Before you decide to control every bit of text on the page, consider that many visitors have a good reason to set their browser preferences a certain way. People with partial blindness, small screens, or those who just left their bifocals at home may not appreciate you taking control of their display.

A less intrusive option is to use relative rather than absolute font sizes.

An absolute font size always displays at a certain size. A relative font size displays according to the size of the surrounding text. Some designers call them scalable fonts. Instead of displaying a fixed pixel size, a relative font size displays as a percentage of the surrounding elements.

Here's an example of a style sheet using a percentage size. The text of the page displays at the default size and the other elements are sized in relation to the default:

<STYLE>
BODY {font-family: arial;}
H1 {font-size: 150%}
H2 {font-size:125%}
</STYLE>

At first glance, it looks as though you're setting the H1 tags to display at 150% of regular H1 tag sizes. But actually, this will probably make your page's header tags smaller than you expect because they'll display relative to the surrounding text.

Here's a header tag with no style defined:

Regular H1 Header Tag

And here's one that displays relative to the surrounding text:

H1 Tag Set At 150%

See the difference? If your surrounding text were set to a large font, then the H1 text would be quite large. If it's very small, then the header element appears in proportion to the surrounding text.

Relative font sizes allow you to keep the visual structure of your page (large heading tags, smaller sub-headings, etc.) and still let visitors control the size of the text.

If you do need to take that control away from visitors, then be absolutely sure that you're using a legible font (Arial is one of the easiest to read online) and displaying it in a large enough size to avoid eyestrain!

Create A Mixture Of Sizes

Some designers successfully mix absolute and relative fonts.

Navigation menus, text that needs to line up exactly with images, and other areas where there is little room to maneuver are excellent candidates for absolute fonts. Then for the main content sections - which are, after all, what the visitor has come to see, they use the browser's default font and font size.

This technique gives you the control you need to ensure that text navigation bars created with style sheets and other necessary page components will work and will be obvious. Navigation menus particularly, have to be usable and display consistently throughout the site. That's an area where you really need absolute control over the page display. But it leaves the bulk of the page content displaying in a format that is most comfortable to each individual user.

That makes your site both usable and sticky! You're giving visitors a good experience at your site, which encourages them to return and recommend it to their friends.

Print Design Is Not Web Design

Many beginning Web designers are eager to apply the print design principles they've learned in books. They don't realize that many print design principles just won't work on the Web. If you design a magazine ad, that ad will look the same to every reader. You have complete control over the layout.

But you can never anticipate and account for every possible operating system, browser, browser version, screen size, and screen resolution that visitors will use. Just the thought of the time and expense of all that testing scares most designers.

That's why many rely on NetMechanic's Browser Photo tool to help them anticipate and fix problems before visitors find them. Browser Photo shows you actual screen shots of your Web page in 16 browser versions, operating system, and screen resolution combinations. It's a quick way to test your pages like the pros - but without the time and expensive equipment.