Practical Web Design - Fundamentals of Web Design

Font Sizing Options

There's a few things you can do to help your visitors avoid squinting.

1. Avoid absolute font sizes in your style sheets; instead, go with relative terms such as 120% for outsized headlines and 90% for deliberately smaller text blocks.


2. Make sure your initial font size is reasonably large, say 10 point (12 if you've got a large number of senior citizens or visually limited users).


3. Remember that text embedded within graphics isn't affect by style sheets or font size buttons, so the user is stuck viewing the text at whatever it's originally displayed as; if you use pictures of text, ensure that the text is big enough to be read with ease.


4. Make sure the color contrast between the text and the background is strong enough to ensure high visibility.


5. If you're designing a site for older or visually limited users, consider providing them with an alternate style sheet that gives them a nice, big display.

Multiple Font Choices

Don't forget to allow for multiple font selections; giving a single font choice is okay for those visitors with that particular font on their machine, but for those who lack it, it means that your carefully chosen font displays in whatever the default font is on that computer (usually Times New Roman on PCs and Times on Macs). And remember that the font choices on PCs and Macs are often quite different. My Windows machine lacks Helvetica, a common choice for Macs; your Macintosh might not have Arial. A good quick-and-dirty methodology is to do something like this:

For sans-serif fonts:

<FONT FACE="Verdana, Arial, Helvetica, sans-serif">

For serif fonts:

<FONT FACE="Georgia, Times New Roman, Times, serif">

Serif fonts have the little "tags," or embellishments, on the individual letters; these assist the eye in achieving "text flow," where the eye naturally glides from one letter to the next. Sans-serif fonts lack these little embellishments, and have a "cleaner" display. You choose which group of fonts you wish your text to appear in.

Using a font choice similar to the above ensures that no matter what fonts are on the user's machine, at least your text will display in something approximating your chosen font, and you're covered with both PC and Mac users. Again, this applies mainly to older computers; the newer ones come loaded with dozens of fonts, including the ones we're most likely to use. Do be aware that if you choose an unusual font in which to have your text display, most users won't have that font; their browsers will display your text in whatever default text is selected on the individual users' machines.

One font expert, Daniel Will-Harris, recommends that Windows users choose the Georgia font over Times New Roman, as it is more optimized for the screen (Times and Times New Roman were designed for the print medium). He also recommends avoiding Arial because of its narrowness and difficulty to read on certain displays, and avoiding the Times font for the Macintosh because of its lack of italicization. He suggests using Verdana (the font used by SitePoint), Tahoma, or Trebuchet instead of Arial.

Designing for the Dyslexic Surfer

Another consideration is making your site easily usable for dyslexic visitors. There are more Netizens than you think who suffer from one form or another of dyslexia, and their needs should be taken into account. Here are a few tips to make your site more friendly for these users (note that many of these tips contribute to a cleaner, more usable Web design for everyone, and are echoed elsewhere in this article).

Like other visually limited users, many dyslexics use computer speech output technology to read the pages to them. Ensuring that your page is speech reader-friendly is essential. Make sure that all of your important information is contained within text and not in graphics, as speech readers can't read or interpret graphic imagery.

Dyslexic users who read your page on their own don't like confusing or "busy" navigational schemes. Flashing graphics, distracting animations, wildly varying font styles, and textured or patterned backgrounds make it tough for them to use your site. Small icons that aid in navigation are useful, as long as each icon has a text alternative and/or an ALT tag. Use a consistent and easily-grasped navigational scheme. If you use frames, provide a no-frames alternative.

Whenever possible, keep paragraphs short and focused. Limit the amount of text on each page. If this isn't possible, provide a topic index at the top of the text so that the dyslexic reader can home in on the parts that interest him or her.

Don't specify a particular font. Most dyslexic readers prefer a particular font and stick to that one; let their choice take precedence.

Keep all text left-justified. Text that is centered or right-justified is tough to read. Stay away from flashing or animated text. Also avoid using background images behind text, and make sure there's a strong contrast between background color and text color.

Links within the general text are hard to use. Provide a table of links below the text block.

If you must use background music or sound effects, provide an alternative for turning it off.

Abigail Marshall from Davis Dyslexia Association International reminds us: