Size other text elements relative to the user-defined text size

Designers use size and position to convey information about the structure of a document. Headings are usually larger than the main text. Supplementary text, such as captions and footnotes, is generally smaller than the main text. These visual cues help readers negotiate the structure of the information on the page.

On the Web we can use size to define relationships between page elements without having to require specific sizes, such as 12-point type for body text and 14-point type for headings. When we use relative measurements—such as keywords (smaller, larger), percentages (90%, 110%), or ems (.8 em, 1.2 em)—to set text size variants, the main text is sized at the user-specified setting and all other text elements are sized relative to it. For example, if the user-specified text size is 16 points and we define headings using the keyword "larger," then the headings will display at approximately 18 points. This method reveals the information hierarchy on the page while allowing users to view the text at a size that is readable.