Honoring Mobile OS Text Size

If your users scale the text size in Android or iDeviceOS, that doesn’t always affect the size of text on a web page. It’s a function of browser and authored code, as opposed to a standardized approach. That may be changing.

Support

The current state of affairs in the three rendering engines…

Firefox

Firefox on Android supports scaling a web page’s text if you adjust the system font size. It doesn’t seem to care if you use px units. You don’t need to do anything special; it just works.

Safari

Safari will not scale a web page’s text with the OS settings unless the author adds some CSS. This code points to the system font properties (such as size): 

body {
  font: -apple-system-body;
  /* other styles, including font-family */
}

This feature query checks for support while trying to limit it to touch devices only, then sets the font size: 

@supports (font: -apple-system-body) and (not (-webkit-touch-callout: default)) {
  :root {
    font-size: 100%;
  }
}

The rest of your styles have to use relative units or this breaks down.

Chrome

Google has opted not to follow Firefox’s lead and support OS text sizes by default. Google has also opted not to mimic Safari and make platform-specific features. Instead, Google has decided to use its weight in the CSSWG to mint a new value for the <meta> element: 

<meta name="text-scale" content="scale">

For this to work, however, the author will need to “opt-in” by not setting a base font size in your CSS: 

body {
  /* font-size: yeah, no */
}

You actually can set one, but it should be a percentage. You then need to avoid fixed units (such as px) throughout your site. If this seems familiar, it’s the core thesis of my aptly-named post The Ultimate Ideal Bestest Base Font Size That Everyone Is Keeping a Secret, Especially Chet.

Read Josh Tumath’s post Try text scaling support in Chrome Canary for more details.

Frankenstyle’s Monster

Let’s combine those into one set of code that will work in Safari and now Chrome. Firefox was always on point, so no effort needed there.

Add this HTML to the <head> of your page (it’s the CSSWG code): 

<meta name="text-scale" content="scale">

Add this to the CSS of your page (it’s Apple’s code): 

body {
  font: -apple-system-body;
  /* other styles, including font-family */
}
@supports (font: -apple-system-body) and (not (-webkit-touch-callout: default)) {
  :root {
    font-size: 100%;
  }
}

Done.

Frankenstyle’s Demo

I made a demo. It has images and a table. Visit the debug version in your mobile browser.

See the Pen Untitled by Adrian Roselli (@aardrian) on CodePen.

How to Test Frankenstyle’s Demo

Seriously, visit the debug version in your mobile browser. I’m not dealing with desktop here.

With your Android device, install Chrome Canary from the Google Play store. If you are using an Android device with another app store, I leave it to you to sort that out. Then, using chrome://flags, enable Experimental Web Platform Features in Chrome Canary.

Android

In Android, go to Settings → Accessibility → Display size & text; in the Size options section, go to Font size and make it as large as possible.

The Android text size settings screen at the smallest size. The Android text size settings screen at the largest size.
The smallest Android text size setting and then the largest setting.

iDevices

In iDevices, go to Settings → Accessibility → Display & Text Size → Larger Text, toggle Larger Accessibility Sizes, then drag that slider all the way to the to max.

The iPadOS text size settings screen at the smallest size. The iPadOS text size settings screen at the largest size.
The smallest iPadOS text size setting and then the largest setting.

My Results from Frankenstyle’s Demo

These are before (small text) and after (largest text) images of Frankenstyle’s Demo. Your experience may differ. If you’re reading this from the future, it may differ a lot.

None of these required a browser reload. It may take a moment, so be patient.

Firefox

Firefox showing four paragraphs and the embedded photo of Jeff Goldblum. Firefox showing twelve lines of text under the massive heading and about 20 characters per line.
Frankenstyle’s Demo in Firefox on Android, behaving just as it would without the Frankenstyles.

Safari

Safari showing about four paragraphs of text and images. Safari showing eight lines of text and about 10 characters per line.
Frankenstyle’s Demo in Safari on iPadOS. I scrolled the second one a bit to show the inline images.

Chrome Canary

Chrome Canary showing four paragraphs and the embedded photo of Jeff Goldblum. Chrome Canary showing twelve lines of text under the massive heading and about 20 characters per line.
Chrome Canary showing Frankenstyle’s Demo.

Other Reading

Things that may better inform those words and pictures above:

No comments? Be the first!

Leave a Comment or Response

  • The form doesn’t support Markdown.
  • This form allows limited HTML.
  • Allowed HTML elements are <a href>, <blockquote>, <code>, <del>, <em>, <ins>, <q>, <strong>, and maybe some others. WordPress is fickle and randomly blocks or allows some.
  • If you want to include HTML examples in your comment, then HTML encode them. E.g. <code>&lt;div&gt;</code> (you can copy and paste that chunk).