Skip to content

Instantly share code, notes, and snippets.

@colingourlay

colingourlay/apple-web-dynamic-type.css

Last active January 28, 2026 14:23
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save colingourlay/d95908ec5cd4854c7a5afa06f3989479 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save colingourlay/d95908ec5cd4854c7a5afa06f3989479 to your computer and use it in GitHub Desktop.
Download ZIP
Support Apple's dynamic text sizing in web content (iOS Safari & WebViews)
Raw
apple-web-dynamic-type.css
/*
To support dynamic type in iOS, we need to set Apple's
system font and then define font-families and rem-based
font-sizes on descendant elements:
*/
@supports (font: -apple-system-body) {
html {
font: -apple-system-body;
}
}
body {
font-family: <your_font_family_here>;
}
p {
font-size: 1.25rem;
}
/*
If you've set a custom rem size in px on the html
element, and want to maintain that on non-Apple
devices, the font override muse be !important:
*/
body {
font-size: 20px;
}
@supports (font: -apple-system-body) {
html {
font: -apple-system-body !important;
}
}
@tedw
Copy link

tedw commented Jan 27, 2026 •
edited
Loading

In case anyone else stumbles on this, here’s how I adapted the example above.

// Support iOS accessibility text sizes
// Note: Only apply on iOS since desktop Safari will look zoomed out
// https://webkit.org/blog/3709/using-the-system-font-in-web-content/
// https://web.archive.org/web/20220930195151/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
// stylelint-disable font-family-no-missing-generic-family-keyword
&.ua-ios {
  @supports (font: -apple-system-body) {
    font: -apple-system-body;
  }
}

I had to use JS to detect the iOS user agent string since this was causing issues on desktop Safari.

// Detect iOS (needed for “font: -apple-system-body”, see base.scss)
// https://stackoverflow.com/a/9039885/673457
var iosDevices = ['iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod'];
var isIOS = iosDevices.includes(navigator.platform) || (navigator.userAgent.includes('Mac') && 'ontouchend' in document);

FYI a new tag is in the works to support this <meta name="text-scale" content="scale" />
https://www.joshtumath.uk/posts/2026-01-27-try-text-scaling-support-in-chrome-canary/

@colingourlay
Copy link
Author

colingourlay commented Jan 28, 2026

@tedw thanks for sharing your experience. I'm looking forward to the new meta option!

@tedw
Copy link

tedw commented Jan 28, 2026

@colingourlay no prob, thanks for creating this gist!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment