How to support Apple's dynamic type in your web content with CSS

UPDATE: December 2020

Now that Apple have rolled out these features to MacOS in Big Sur, think whether dynamic type is something you want on larger displays before applying the tricks below. A @media query may help to only qualify smaller displays, if you want to limit the trick to iPhones)

Original article...

iOS has a great accessibility feature for scaling the device's text up (or down), but we usually only see it being used for native app content and interface elements.

However, there's actually a way to apply these user-defined font sizes to your web content too!

To get started, set your html element's font property to Apple's system font:

html {
  font: -apple-system-body;
}

On its own, this snippet of CSS will enable dynamic text sizing, but it also enforces Apple's system font family too, which you may not want (and non-Apple devices will end up using a default serif font, unless you specify fallbacks in your font stack).

Thankfully, there's a way to use just the dynamic text sizing feature, without overriding whatever font family you want to use on all devices.

First, we're gonna wrap that earlier example in a CSS @supports conditional block, so it only targets Apple devices:

@supports (font: -apple-system-body) {
  html {
    font: -apple-system-body;
  }
}

If you've never seen @supports before, it's a feature supported in modern browsers that allows you to write conditional CSS, based on the browser's support for specific declarations (in this case, font: -apple-system-body).

Then, you're free to specify your own font-familys and rem-based relative font-sizes on descendant elements.

body {
  font-family: Lobsters;
  /* or Papyrus / "Comic Sans MS" / any other objectively great font */
}

p {
  font-size: 1.25rem;
}

That's it! You should now be able to write more accessible websites for Apple devices, without degrading the appearance on other platforms.

Note: If you've already set a custom rem size in px on your html element, and want to maintain that on non-Apple devices, the font definition must be !important:

body {
  font-size: 20px;
}

@supports (font: -apple-system-body) {
  html {
    font: -apple-system-body !important;
  }
}