Letting iOS “Text Size” Setting Affect Font Size on the Web

On iOS, there is a setting for Text Size. I’ll do a video here for the current version of iOS (17.5.1) to be clear:

As far as I ever knew, that controlled the text size on the OS itself and native apps. It didn’t effect websites. I think that’s largely true, but I just learned you can honor the setting on the web as well. Craig Hockenberry wrote about this in Dynamic Type on the Web:

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.

I tend to agree. While I think few sites will actually do this, it’s nice when they do. It’s a little similar to using font family keywords like system-ui which, when supported, will match the operating system’s font, only this is even better as it’s an accessibility thing not just aesthetic.

Here’s the the trick:

html {
  /* Default, relative sizing so other users can adjust in their own way */
  font-size: 1em;

  /* If supported, inherits the iOS font settings */
  font: -apple-system-body;

  /* Override the font-family if you don't want system-ui */
  font-family: "Avenir Next", "Helvetica Neue", sans-serif;
}Code language: CSS (css)

Here’s an example page.

And here’s a video showing it working:

I haven’t actually done it yet on a production project, so I can’t entirely vouch for it, but it seems safe to me and like a good idea. I’ll likely give it a go in the future.