Letting iOS “Text Size” Setting Affect Font Size on the Web
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;
}
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.