Accessibility fix: Allow iOS browsers to auto-scale fonts based on user preference

[chrislachance]

Please add font:-apple-system-body to the :root element CSS to allow iOS devices to auto-scale font sizes based on user preference set in Accessibility > Display & Text size.

[chrislachance]

See this Codepen for the full code example. https://codepen.io/chrislachance/pen/OJpmgrM

[ffoodd]

Wrapping a few resources for the record:

• Adrian Roselli's "CSS and system fonts" post
• Greg Kraus wrote "Text Resizing for Web Pages in iOS using Dynamic Type"
• Safari 7 (!) changelog
• CSSWG related discussion

So to sum up my findings, I'd be in favor of trying this and heavily test the dedicated branch on iOS and MacOS browsers, since it's known to be tricky.

BTW @chrislachance what kind of "weirdness" does desktop Safari, that worth mentioning in your pen?

[chrislachance]

Yeah, thanks. Jonathan Neal saw that without excluding Desktop Safari, the special Apple font treatment sets default font-size to 13px, instead of the standard 16px.

…

On May 26, 2021, at 4:37 PM, Gaël Poupard ***@***.***> wrote: Wrapping a few resources for the record: Adrian Roselli's "CSS and system fonts" post <https://adrianroselli.com/2015/07/css-and-system-fonts.html> Greg Kraus wrote "Text Resizing for Web Pages in iOS using Dynamic Type" <https://www.interactiveaccessibility.com/blog/text-resizing-web-pages-ios-using-dynamic-type> Safari 7 (!) changelog <https://developer.apple.com/library/archive/releasenotes/General/WhatsNewInSafari/Articles/Safari_7_0.html#//apple_ref/doc/uid/TP40014305-CH5-SW10> CSSWG related discussion <w3c/csswg-drafts#3708> So to sum up my findings, I'd be in favor of trying this and heavily test the dedicated branch on iOS and MacOS browsers, since it's known to be tricky. BTW @chrislachance <https://github.com/chrislachance> what kind of "weirdness" does desktop Safari, that worth mentioning in your pen? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#34107 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAHXZF67IPGQLABWGEYAM5DTPVLZBANCNFSM45PKXMPA>.

[ffoodd]

Do you have any link or resource to share regarding this? Currently unable to find any relate resource from Jonathan Neal on the topic :/

[chrislachance]

csstools/sanitize.css#219

[ffoodd]

X-ref from other repos to keep an eye on the topic

• Normalize.css #858
• Modern Normalize #54
• sanitize.css #219

Not much discussions for now apart from Jonathan Neal on sanitize.css.

[chrislachance]

Looks like Apple is unwilling to change User Agent Stylesheet at the moment as well. https://mobile.twitter.com/jonathandavis/status/1397996092214505472

[montygoldy]

"font:-apple-system-body" this solution not working for android chrome

[chrislachance]

It's Apple exclusive. Each Android browser already allows users to customize font size as well. Android Firefox is the only browser to use native font scaling in tandem with user set preference.

[jefferyto]

Looks like Apple is unwilling to change User Agent Stylesheet at the moment as well.

At the default system text size, -apple-system-body appears to set the font size to 17px. I imagine even a 1px difference (from the assumed 16px default for the root/html element) may break a lot of layouts in the wild. This may also make it untenable to include as a default for any major CSS framework.

[chrislachance]

Unfortunately, you may be right. But doing it anyways may be the right thing to do.

[tedw]

FWIW here’s is how I have been doing this for the past few years:

// Support iOS accessibility text size
// Note: Only apply on iOS due to bug with Safari 14 on Big Sur
// https://webkit.org/blog/3709/using-the-system-font-in-web-content/
// https://www.interactiveaccessibility.com/blog/text-resizing-web-pages-ios-using-dynamic-type
// https://dev.to/colingourlay/how-to-support-apple-s-dynamic-text-in-your-web-content-with-css-40c0
// https://gist.github.com/colingourlay/d95908ec5cd4854c7a5afa06f3989479
&.ua-ios {
  @supports (font: -apple-system-body) {
    font: -apple-system-body;
  }
}

FYI the ua-ios class is added to the <html> tag via a small bit of inline JS in the <head> (see example below) but you could remove that if you aren’t supporting Safari 14 on Big Sur.

Update: See this SO post for an updated way to detect iOS https://stackoverflow.com/a/9039885/673457

// Detect iOS
// http://stackoverflow.com/questions/9038625/detect-if-device-is-ios/9039885#9039885
if (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream) {
  document.documentElement.classList.add('ua-ios');
}

FWIW I also use this bit of CSS to ensure form fields don’t zoom on iOS, which happens if the font size is below 16px.

// Prevent zoom on iOS
// https://css-tricks.com/16px-or-larger-text-prevents-ios-form-zoom/
// http://www.456bereastreet.com/archive/201212/ios_webkit_browsers_and_auto-zooming_form_controls/
:where(input, select, textarea) {
  font-size: max(1em, 16px);
}