91Èȱ¬

Text in HTML documents can be rendered at a wide range of sizes. Text size is affected by multiple factors including browser default styles, styles added by the HTML document, browser settings, and sometimes user style sheets.

---

Recommendations

Style all core content* text to be no smaller than a minimum calculated size of 13px* and all other page text to be no smaller than a minimum calculated size of 11px* on the default browser setting.

*core content: the content that fulfils the core purpose of the document or feature.
*px: .

---

Why it matters

A minimum text size reduces the need to use browser based text resize or page zoom. This is particularly important for older people who may not consider themselves having low vision, so are less likely to make use of assistive technology or resize content with browser settings, even if they know about it. It should not be assumed a user is able to or knows how to override text size.

91Èȱ¬ GEL Typography comfortably exceeds these recommendations and should be used in 91Èȱ¬ HTML documents.

Examples

Recommended:

<style>
    main p {
        font-size: 1rem; /* usually 16px at default */
    }
    main p.complementary {
        font-size: 0.875rem; /* usually 14px at default */
    }
</style>

Not recommended:

<style>
    body {
        font-size: 12px;
    }
    p {
        font-size: 1em; /* still 12px */
    }
    .complementary {
        font-size: 10px;
    }
</style>

Testing

Check the calculated size of all visible text nodes, using a tool such as or a browser’s developer tools.

Aim for all visible text nodes to have a calculated text size of 11px or greater, and all visible core content* text nodes to have a calculated text size of 13px or greater.