WebAIR

Can the text be resized in the browser up to 200 percent without loss of content or functionality? (FAC22)

Why Is This Important?

Many users increase the size of the text on a webpage in order to be able to read it clearly. This is either achieved via a dedicated control on the webpage, or by using the browser controls. This is particularly the case for people who are partially sighted or have low vision, who may resize webpage text by up to 200%. Webpages need to be able to accommodate such resizing and scale accordingly without "breaking" or forcing the user to scroll horizontally.

How To Fix The Problem

Define the font sizes in the CSS using relative units of measurement, such as ems (em) or percentage (%). An em is a relative unit of measurement. It's origin relates to the captial 'M' and it is relative to the font size of the parent element. The font size of the parent element can be defined in CSS but can also be relative to the default font size within the browser. This is usually ~ 16px. If this is the case, then 1em = 16px. You can make text content larger and/or smaller than this size by defining sizes in larger and smaller values of em. So 0.5em would be ~ 8 px and 1.5 em would be ~ 24px in size.

Example

No example is available.

Further Information

  1. http://www.alistapart.com/articles/howtosizetextincss/
  2. http://www.typographicwebdesign.com/