Resizable vs. Non-Resizable Fonts in iOS UIWebView
This page must be viewed on an iOS device to see the effect. To adjust the text size
- Go to “Settings”
- Select “General”
- Select “Accessibility”
- Select “Larger Text”
- Set the text size, and optionally allow “Larger Accessibility Sizes” to select larger text
The resizeable fonts have a hook into Apple's iOS system fonts, but then override aspects of the font to change the font-family, boldness, and size. Note: the font-size cannot be overridden on the element with the hook into Apple's fonts. font-size must be applied to a child element.
Demonstrating Resizable vs. Non-Resizable fonts on iOS
| Resizable Font |
Non-Resizable Font |
body |
body |
headline |
headline |
sub-headline |
sub-headline |
All iOS Dynamic Type Fonts
- -apple-system-body
- -apple-system-headline
- -apple-system-subheadline
- -apple-system-caption1
- -apple-system-caption2
- -apple-system-footnote
- -apple-system-short-body
- -apple-system-short-headline
- -apple-system-short-subheadline
- -apple-system-short-caption1
- -apple-system-short-footnote
- -apple-system-tall-body