On Scalable Text

Note: This page was last updated April 2002. Some of the details may be outdated.

Summary

In order to provide scalable text, make textual information text (rather than images), and use relative text sizes (rather than absolute). Scalable text is important for people with low vision. The basics of providing scalable text are very simple. However, strict design requests can pose challenges.

This page covers:

Basic issue with scalable text

When web page developers provide scalable text, web site visitors can resize the text to meet their needs and preferences. People with low vision can choose a large text so that they can read the page content and navigation. And, people with good eyesight can choose small text so that they can see more of the page at a time and not have to scroll as much.

For the web developers, the two issues in providing scalable text are described in this document:

Included are examples of text that resizes and text that does not resize. The next section tells you how to check if a web page provides scalable text.

link jumps to top of this pageTop

Testing text scaling

Change the font size in the browser settings and confirm that all text changes size appropriately. This works best when you make drastic changes from a very large to a very small font. You can open two instances of the browser in order to compare the page with large and small fonts. If text does not change with browser font size settings, either the text size is sized with an absolute unit or it is in an image.

To change the font size in Internet Explorer:
In the menu, select View > Text Size > and the font size.

To change the font size in Netscape:
In the menu, select View > Increase Font or View > Decrease Font.

(Note: Some browsers, such as Opera, automatically scale all page elements, including text in images and absolute-sized text. This check does not work with those browsers.)

See Examples of text that resizes and text that does not resize.

link jumps to top of this pageTop

Relative sizing text

Text sizes can be set in HTML or style sheets (CSS) with either relative and absolute units. If web developers set text size, they should use relative units to provide flexibility and accessibility for web visitors. The default is a scalable text, so if you do not set any text size, you are providing relative text.

Relative
With relative units, the text does change with browser text settings. Percent (%) is a relative unit.
Absolute
With absolute units, the text does not change with browser text settings. Common absolute units for text are point (pt) and pixel (px).

The Different Font Sizes page lists text sizes in several relative and absolute units. You can use this page to see how different browsers handle various text size units. This page can also help you convert from one unit to another.

Note that while em is a legitimate relative unit, text sized in em can be problematic in IE. When the Optavia website used ems, several people said that the text was minuscule. It turned out that they had fonts set to Smallest without realizing it. (Also, apparently IE3 treats ems as pixels - so 2em is rendered as 2px.) We changed the font sizes to percents and have not had any problems reported.

WCAG on relative sizing text

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

For example, in CSS, use 'em' or percentage lengths rather than 'pt' or 'cm', which are absolute units...

Web Content Accessibility Guidelines 1.0 (http://www.w3.org/TR/WCAG/)

Relative units and sizing of images.
Added: 23 November 1999.
Type: Minor
Refers to: Checkpoint 3.4 of 5 May 1999 version

Description (and correction). The note for Checkpoint 3.3 should say something about the effect of proportional sizing on raster images as follows: "Use relative rather than absolute units in markup language attribute values and style sheet property values. [Priority 2] For example, in CSS, use 'em' or percentage lengths rather than 'pt' or 'cm', which are absolute units. If absolute units are used, validate that the rendered content is usable (refer to the section on validation). For example, do not proportionally size raster images."

Errata in Web Content Accessibility Guidelines (http://www.w3.org/WAI/GL/WAI-WEBCONTENT-ERRATA)

link jumps to top of this pageTop

Textual information presentation (make text text, not images)

You should make information that is its essence textual, text, not images. Designers wanting control of the visual design of the web page often put textual information in an image. However, images are not scalable by most browsers.

In addition to scalability, there are several other reasons for providing textual information as text rather than images:

Style sheets provide flexibility in representing text differently, thus letting you affect the aesthetic presentation without having to resort to images.

Two more points:

WCAG on text as text

3.1 When an appropriate markup language exists, use markup rather than images to convey information. [Priority 2]

For example, use MathML to mark up mathematical equations, and style sheets to format text and control layout. Also, avoid using images to represent text -- use text and style sheets instead...

Web Content Accessibility Guidelines 1.0 (http://www.w3.org/TR/WCAG/)

Text in images - clarification of checkpoint 3.1.

Added: 3 January 2001
Type: Clarification
Refers to: Checkpoint 3.1 in 5 May 1999 version.

Description (and correction). Checkpoint 3.1 should be reworded to read, "When an appropriate markup language exists and is supported, use markup rather than raster-based images to convey information. [Priority 2]

For example, when supported, use SVG to create graphics, MathML to mark up mathematical equations, and CSS for text-oriented special effects. Avoid where possible using raster-based images to represent text -- use text and style sheets. Raster-based formats such as .gif and .jpeg paint the text as a series of pixels. When magnified the text becomes distorted. The ability to magnify text is critical for user with low vision.

You may use text in images when:

  1. the text does not convey its literal meaning but has a more graphical function, such as a logo and
  2. the effect can not be achieved with CSS and
  3. you have provided a text equivalent for the image.

Errata in Web Content Accessibility Guidelines (http://www.w3.org/WAI/GL/WAI-WEBCONTENT-ERRATA)

link jumps to top of this pageTop

More about scalable text

Why not to rely on assistive technologies

Some people with low vision use screen magnification software (such as listed at http://www.magnifiers.org/). Some people with moderate low vision do not need screen magnifiers and rely on browser text resizing when necessary. For example, I only need to increase text size when it is very small or when I am fatigued. I do want the added cost and complication of having to use screen magnifiers.

Additionally, people with low vision might access your site from another computer, such as at a library, that does not have screen magnification software available.

link jumps to top of this pageTop