Site sections

Relative font sizes and inheritance

Russ Weakley
23-Sep-03

Methods for specifying font size

There are many methods of setting font size on a page using Cascading Style sheets, each with positives and negatives. The methods are:

  1. leave font sizes at browser defaults
  2. use absolute-size keywords (xx-small, x-small, small, medium, large, x-large, xx-large)
  3. use pixels
  4. use points
  5. use percentages
  6. use ems
  7. use a combination of ems and percentages

Default size

Leaving the font size at browser default size is the most accessible (and some would argue "best") method. However, for many web users default font sizes are too large.

Absolute-size keywords

Absolute-size keywords vary from browser to browser, so they are not a good method if consistency across browsers is desired.

Pixels

While pixels are widely supported and consistent across most browsers, this method has some major accessibility issues. Many users cannot resize content that has been set in pixels - particularly users of Win/IE.

Points

Points are a poor choice for screen font sizes as they are inconsistent across monitor sizes and resolutions.

Percentages and Ems

Percentages and Ems, being relative rather than absolute, are considered the "best" option if font resizing is required. They can be resized in almost all browsers and are driven by the user's font size preference, so users can adjust the size of content to suit their needs. This method is recommended by The Web Accessibility Initiative (WAI). The WAI Web Content Accessibility Guidelines 1.0 states:

Priority 2: 3.4 Use relative rather than absolute units in markup language attribute values and style sheet property values.

How do relative font sizes work?

Basically, relative font sizes work with the browser's fonts size. For example, most browsers have a factory default font setting of 16px. If you specify a font size of 80%, the equation is:

16px x 80% = 12.8px

If a user has set their default font size to a much larger size (for example, a user may set their default font size to 20px if they have some sort of vision impairment) the equation could be:

20px x 80% = 16px

As you can see, even though the fonts are scaled down, the user still has a degree of control over the font sizes.

Relative problems

Although Percentages and Ems are arguably the best method for font sizing, there are two main problems to overcome:

  1. Consistency across browsers
  2. Inheritance and its effect on nested items

Consistency across browsers

Browsers interpret relative font sizing in different ways, especially in relation to inheritance. One example would be setting font size in the body tag:

body { font-size: 80%; }

Most browsers will render this as being 80% of the element's default font behaviour. A standard H1 will render at 200% default font size, so with the rule above applied to the page, an H1 would become 160% (200% x 80%= 160%) of default font size.

Mac/Opera6 will not apply this rule consistently across content. Text within tables stays at default size. Mac/Netscape4 and Win/Netscape4 will apply this rule to headings as well as text within paragraph tags - making all content on the page 80% size.

Inheritance and its effect on nested items

Relative font sizing also runs into problems with inheritance and its effect on nested items. For example, a rule like the one below can cause inheritance problems:

p, ul { font-size: 85%; }

A sample showing paragraph and unordered nested list problem.

Any content within a paragraph or unordered list will be scaled to 80% of the user's default browser size. The problem occurs when there is a nested unordered list. The nested list item will inherit the relative font sizing and apply it again, making the nested list items 72.25% in size (85% x 85% = 72.25%).

This is easily fixed with another rule that will bring all nested list items back to 85% font size:

ul ul { font-size: 100%; }

A sample showing nested list problem fixed.

Another example is:

p, td { font-size: 85%; }

A sample showing table cell and paragraph nested paragraph problem.

Again, any content within a paragraph or a table cell will be scaled to 80% of the user's default browser size. In this case, the problem occurs when there is a paragraph within a table cell. This paragraph will inherit the relative font sizing and apply it again, making the nested paragraph 72.25% in size.

This is easily fixed with the rule that will bring the nested paragraph items back up to 85% font size:

td p { font-size: 100%; }

A sample showing nesting paragraph problem fixed.

The problem with both of these fixers is that they are misinterpreted by Netscape4 - which treats them as new rules and makes them 100% default font size.

For this reason, these additional rules are probably best placed in a stylesheet that is imported rather than simply inline or linked. Any CSS rule in an imported stylesheet is ignored by Netscape4.

What is the best way to set relative font sizing?

The best way to set relative font sizes is to choose a level at which to apply them and then stick to that level.

One method would be to set a relative font size on specific containers. Another method woulds be to apply relative font sizing to specific elements:

h1 { font-size: 160%; }
h2 { font-size: 140%; }
h3 { font-size: 120%; }
h4 { font-size: 100%; }
h5 { font-size: 85%; }
p, ul, ol, td { font-size: 85%; }

Then, to avoid some of the inheritance issues above, you may need some additional rules such as:

ul ul { font-size: 100%; }
td p { font-size: 100%; }

A third method, mentioned above, is to set a percentage on the body element:

body { font-size: 80%; }

Before choosing your method, it is worth experimenting with various options so that you can choose one to suit your needs.

What do you think. Agree or disagree? Send us your comments.

Further reading: