Beginner Tip:
Beyond Pixels: Choosing Text Sizes

The process of selecting colors, images, page layout, animations, etc. can be confusing when you're new to Web design. But that bewildering array of options isn't nearly as confusing - or as important - as deciding how to display page text.

Without text, search engine spiders can't index page content. Without legible text, human visitors can't comfortably read the content and are likely to leave. This brief primer on text size will help you decide the best way to display your page content.

Selecting Size Using The FONT Tag

You have two options for displaying page content: FONT tags (which are deprecated in HTML) or Cascading Style Sheet (CSS) properties. Some sites mix the two techniques when migrating towards all-CSS formatting.

We strongly recommend that you formatt text using CSS properties, but let's do a basic introduction to FONT sizes first; just in case you already have a site designed using them. Although you should note that transitioning to CSS is surprisingly easy!

Set the font size in HTML using the SIZE attribute inside the opening FONT tag. The values are a series of numbers that go from 1 to 7 with 1 being the smallest and 7 the largest. These sizes are displayed relative to the default browser text size.

The default font and font size for most browsers is Times New Roman 12 point, but browsers differ and users are always free to change their browser defaults.

Assuming 12 points as the default, here's how the values of 1 through 7 correspond to more familiar values:

Set the font value like this:

You can also use relative values:

This displays a font size that's two times larger than the default size. A relative value helps to maintain the hierarchal relationships between page elements. For example, an H1 tag set to a size of +3 will also be larger than an H2 tag set to +2 or a paragraph tag that displays in the default size.

More Choices With CSS

Style sheets have three main advantages that we've covered in detail in previous Webmaster Tips. These make CSS a better alternative to FONT tags to control text size.

FONT tags limit your options while CSS offer a much wider variety of measurement units to specify font size:

The most commonly used values are Pixel and Relative sizes, but you'll probably use almost all of them as you gain more Web design experience.

How CSS Sizes Display In A Browser

It's important to understand just how these different units of measure are going to display and render in various browsers, else you could get some really unexpected results!

For instance, someone from the United States might select the "inch" unit because she's more comfortable with that familiar scale. Without thinking, she sets the font-style property to equal "1in" and gets this result on the Web page:

It certainly stands out, but that's about the only positive comment you can make.

Experiment a bit to get the text effect you're looking for. Let's get a better idea of just how these options look in a browser:

Other Important Considerations

Remember that page display doesn't just refer to how the page displays on your personal screen. There's no way to create an HTML page that's guaranteed to look "exactly the same" in all browsers, operating systems, and delivery devices. You will never have absolute control over display unless you convert all HTML files into PDF documents. The best you can hope for is to create pages that are both usable and legible to all visitors.

With that in mind, remember these few details:

• Browser text resize in Explorer: Many people with visual disabilities - including those who have misplaced their reading glasses - use the View > Text Size feature in Explorer to make text more legible. But text size set in pixels can't be resized in Explorer, although other browsers will resize it.
  
  This feature gives the developer more control over display, helping, for instance, to keep related items together. However, it does take some control away from visitors.
  
  
• Browsers and operating systems display the same fonts and font sizes differently. Text size and font rendering varies slightly between browsers and operating systems. See our previous Webmaster Tip "What Size Is Font Size?" for a more complete discussion of this and examples.
  
  
• Carefully check for errors in CSS specifications. An error-free CSS specification is critical. Some browsers are relatively forgiving of errors and ignore the error while displaying the rest of the specification. Other browsers will ignore the entire CSS rule if it contains a single error. Refer to our previous Webmaster Tip "Netscape Ate My Stylesheets!" for more information.
  
  Remember to always include the unit of measure in your CSS specification. There should be no space between the size and unit of measure abbreviation. Neither of these is correct:
  
  body {font-size:12;}
  or
  body {font-size:12 px;}
  
  Instead, the style rule should read like this:
  
  body {font-size:12px;}
  
  
• Check for HTML coding errors. Many designers still control text formatting using deprecated elements like FONT, B, and I tags. Take care to check that you have your opening and closing tags in the right place and that you close them in the proper sequence. Improper HTML tag nesting can cause some very unusual text displays!

NetMechanic's Browser Photo tool helps you quickly identify browser issues and display problems like these. You'll see actual screen shots of your Web page in 16 different browser, screen resolution, and operating system combinations.

With Browser Photo, you can duplicate the user experience of many visitors and correct text display problems before the drive away your customers.