Dynamic Type on the Web with -apple-system-body

UPDATE 2024-07-26

This is an adaptation of CRAIG HOCKENBERRY’s 4 July 2024 article:

Dynamic Type on the Web

…into a test page for the CSS techniques described (with family to set to system-ui and sizes adjusted) to support:

Dynamic Type on iOS and iPadOS. If you go to System Settings on your iPhone or iPad, and change the setting for Display & Brightness > Text Size, you’ll see the change reflected on this website.

This is a big win for accessibility: many folks make this adjustment on their device to match their abilities. Just because you can read a tiny font doesn’t mean that I can. It also is a win for consistency: my site’s font size matches the other text that a visitor sees on their device.

The best part is that this improvement can be realized with only a few lines of CSS:


html {
    font-size: 100%;
    font: -apple-system-body;
    font-family: system-ui;
}

Where font-size sets a text size for platforms that do not adapt to -apple-system-body, which I recommend setting to 100%, that gets overridden in font for systems that do adapt to -apple-system-body, and font-family then overrides -apple-system-body to be whatever typeface you want, the simplest and most universally compatible option being system-ui where, in MDN’s words:

Glyphs are taken from the default user interface font on a given platform. Because typographic traditions vary widely across the world, this generic is provided for typefaces that don’t map cleanly into the other generics.

Back to Craig Hockenberry:

One other addition that I made to my CSS was a tweak for desktop browsers. There is no Dynamic Type setting on macOS (yet?!) and the default size was a bit small for my taste. A @media rule fixed that:


@media screen and (min-width: 801px) {
    body {
        font-size: 1.25rem;
    }
}

Now any browser window that’s wider than 800 points will get a slightly larger font.

You can, of course, use any of the other predefined font values, such as -apple-system-headline or -apple-system-footnote, but [you also may want] to override the family with each use.

However your font-sizing rules will likely work as is, because:

it’s likely that you’re already using em and rem sizes so that elements scale correctly in other contexts.


h1,
h2 {
    font-size: 1.75rem;
    line-height: 1.25;
}

The World Wide Web Consortium (W3C) Web Accessibility Initiative (WAI) Accessibility Guidelines Working Group (AGWG) Mobile Accessibility Task Force (MATF) covers the technical specifications in Mobile Technique – Specifying a system font in web content to support platform text resize without browser or platform assistive technology zoom:

This technique is to be used to support resize of web text content on iOS.

The objective of this technique is to use the platform system font which takes into account the user’s text size settings of the platform in iOS via the dynamic text options. […] Use of the system fonts is designed to affect the font size and thus setting the CSS font-size on an element will override the font size applied by the platform. If units including em or rem are applied to descendant elements that inherit the system font then the text will scale by the units based on the default font text specified by the system font.

More resources: