Text Resizing for Web Pages in iOS using Dynamic Type

iOS has an accessibility feature to allow users to select their preferred text size. Some applications will respect this setting and change their text size appropriately, however, some do not. To change your preferred text size

1. Go to “Settings”
2. Select “General”
3. Select “Accessibility”
4. Select “Larger Text”
5. Set the text size, and optionally allow “Larger Accessibility Sizes” to select larger text

If you are developing a native iOS app, there are ways to determine what the user’s preferred text size is, and even if they have changed their preferred text size while in the middle of using your application, and your app can respond accordingly.

But what do you do if you are designing a Web page where you want the text size to honor the user’s preferred text size on iOS? You don’t have access to the functions available to native apps to determine this kind of information. Without this information, Web pages will not resize their text according to the user’s preference. Fortunately, Safari’s UIWebView (what Safari uses to display Web pages) handles this communication for you, but you have to do some work up front in your Web page.

iOS has a feature called Dynamic Type (introduced in iOS 7) which communicates to applications what the user’s preferred text size is. Apple has predefined fonts that will respond accordingly when the user changes their text size preference.

• -apple-system-headline
• -apple-system-subheadline
• -apple-system-short-headline
• -apple-system-short-subheadline
• -apple-system-body
• -apple-system-short-body
• -apple-system-tall-body
• -apple-system-caption1
• -apple-system-caption2
• -apple-system-short-caption1
• -apple-system-footnote
• -apple-system-short-footnote

Here is a page demonstrating what the Apple fonts look like. You must view these on an iOS device to see what they look like.

Typically, in a Web page you define a font with something like this.

p {font-family: Arial, sans-serif;}

If you do this, your Web page cannot access the preferred font size information in Dynamic Type. Instead, what you need to do is hook into one of Apple’s predefined fonts using CSS vendor prefixes.

p {font: -apple-system-body}

When you do this, Safari will render your font using the built-in iOS font and will size it correctly according to the user’s preference. (Note, if you change the preferred text size while in the middle of viewing a Web page, you will most likely have to refresh the page to see the changes.)

That’s great, but what about all of the other browsers that don’t support Apple’s built-in fonts? Once you’ve made the hook into Apple’s font, you can change any aspect of the font you would like, with one caveat for font size adjustment.

If you want to also support every other browser out there too, you can override the CSS properties as follows to use standard Web fonts.

p {
  font: -apple-system-body;
  font-family: Arial, sans-serif;
  font-weight: normal;
}

This will now display the font as Arial with normal weight, but will still size appropriately on iOS devices. You can modify any of the following font properties.

• font-family
• font-weight
• font-style
• font-variant

Adjusting the font size is a little trickier. If you set font-size like this,

p {
  font: -apple-system-body;
  font-family: Arial, sans-serif;
  font-weight: normal;
  font-size: 1.0em;
}

you will break the link to iOS Dynamic Type and your fonts will no longer size appropriately on iOS devices. The solution, albeit not an elegant one, is to set the size on a child element of the element which has the class hooking into Apple’s font. In other words, the following works and maintains the link to Apple’s Dynamic Type.

p {
  font: -apple-system-body;
  font-family: Arial, sans-serif;
  font-weight: normal;
}
.body-text-size {
  font-size: 1.1em;
}
<p><span class="body-text-size>This is some text in my page.</span></p>

In this case, the font will be modified by 1.1em of whatever iOS sets as the default font size.

To see all of this in action, here is a sample page with select resizable fonts side-by-side with non-resizable fonts.

SUPPORT IN IOS 8.X

In iOS 8.X, if you applied the Apple System Fonts to an <h1>…</h6>, the hook would not happen correctly for resizing. In iOS 8.x you have to apply the Apple font to a child element of the heading as follows.

.apple-heading {
  font: -apple-system-headine;
  font-family: Arial, sans-serif;
  font-weight: bold;
}
.heading-text-size {
  font-size: 1.6em;
}

<h1><span class=”apple-heading”><span class=”heading-text-size”>My heading</span></span></h1>

This problem does not occur in iOS 9.x.