Web Access Centre

Font size - Web Access Centre

Summary: Text can be any size you choose as long as it is flexible and can be changed in the users browser.

Rationale
Techniques
Testing tips
Further information
Website Accessibility Initiative compliance
Other pages about text

Web access centre - design and management resources

Rationale

It is vital to make sure that users have the final say about how large or small text should appear in their web browsers. The only way to ensure this is to assign flexible, relative sizes to all fonts in your pages.

As people get older, their vision naturally deteriorates and one of the first signs of this is an inability to see small text as clearly as they once could.

People with low vision may use screen magnifiers to increase the size of their view of a web page. This means that they can only see a fraction of the screen at any one time, so they may well use the largest font available in their browser so that they don't have to magnify to really high degrees.

However, other users may prefer to have quite small fonts so that more text appears on screen at any one time, and the need for scrolling is reduced.

The important thing is to build a site that is flexible and allows the user to take advantage of the functions provided in their preferred browsing software to increase or decrease the text size according to their needs.

Techniques

Choose the location for your text size definition. The units of measurement available to you will depend on whether you define fonts using CSS (Cascading Style Sheets) or HTML.
External CSS is the best place to define all presentation and styling. A link to more on CSS definition can be found in the Further information section below.

An example declaration might be:

p {
font-size: 100%;
}

This defines every instance of the tag as having a font size of 100% i.e. the user's preferred "normal" size.
Inline CSS font style declarations can also be coded alongside the HTML on your page, for example:

Your text goes here
HTML FONT definitions are now deprecated within the HTML code and are only valid when using a Transitional DTD (Document Type Declaration or DOCTYPE). A link to more on DOCTYPE declaration can be found in the Further information section below. Either percentages can be used or signed units (+1, -2, etc).

An example of HTML code for defining font size is:

Your text goes here
Use relative units rather than absolute (fixed) units for the size of text. Some browsers will allow users to override absolute units and resize text, but this is not always possible and can't be relied on.

Relative, or flexible, units to choose from:

1. Percentages (%) increase or decrease from the browser font size set
2. Em (relative to the size of the capital M)
3. Ex (relative to the size of the capital X)
4. Keywords (small, medium, larger, smaller, larger, etc.)
5. Signed units (+1, -2, etc) (HTML only)

Absolute, or fixed, units should not be used. These units include:

1. Points (pt)
2. Pixels (px)
3. Unsigned units (font size="1") (HTML only)
4. Standard measurement units (cm, mm, in)
5. Picas (pc)

Base font values should be chosen with care to ensure that the text will scale properly.

The main body of your text should be set to a size that will ensure it remains legible when resized. It's a common misconception that users will only ever want to increase the text size. It's important that text remains readable even when using the "Smallest" setting. This is important for users with tunnel vision who may wish to fit as much text in their line of sight as possible

Set the base size of your BODY element to 100% (or equivalent: 1em, 1ex, or medium) to ensure that it will be displayed at 100% of the user's chosen setting. This will also make sure that an Internet Explorer error that occurs when the base font is specified at less than 100%, or 1em, is not triggered. This error compounds the difference between font sizes, which can result in either unintentionally extra small or extra large text.

Larger sizes can then be specified for headings, and smaller sizes (within reason) can be used for standard "small text" items.

When the browser text size setting is changed to "smallest", at 70%, the text is illegible, at 75% it is only barely legible and it's only the 80% text that reaches a reasonable level of legibility. We recommend Ariel or Verdana

Testing tips

Verify that fonts are defined in relative units, and that a clear and scaleable font is defined. Font formatting should be removed from HTML and placed in CSS, defined as %, smaller etc not pt or px or made flexible i.e. font-size=+2 not font-size=2. Always check text legibility by viewing it at both "Smallest" and "Largest" settings.

Automated tools - can pick up on fixed font sizes.
Accessibility toolbar – for HTML: CSS - Deprecated HTML - Deprecated elements. To check CSS: Show Style Sheet. This will show any linked CSS style sheets.
Browser – For HTML: Check source code for "font-size" – ensure that all are flexible. For CSS: View - Source. Edit - Find - "CSS" AND Source. Edit - Find - "style". This can show if inline CSS styles are being used. Also change browser text size settings to "largest" and "smallest" to ensure that all text is still legible.

Further information

Doctypes – find out how to provide document type information in the layout and structure section.
CSS – find out how to use style sheets to define layout and presentation the layout and structure section.

Website Accessibility Initiative compliance

11.2 Avoid deprecated features of W3C technologies. Priority 2.
3.4 Use relative rather than absolute units in markup language attribute values and style sheet property values. Priority 2.

For more information on techniques visit the Web Accessibility Initiative techniques page.

Other pages about text

Back to Design & Build

For Web Access Centre updates email webaccess@rnib.org.uk

Content author: webaccess@rnib.org.uk

Last updated: 06/03/2008 15:41

Print Email