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;
  }
}

Comments

[Tommy Feldt]

Maybe I am doing something wrong but I am no longer able to use this method...

It appears that font: -apple-system-body has started to effect Safari on OSX and not just iOS devices as it did before. Which of course leads to a lot of unwanted design issues.

Do you have the same experience?

[Colin Gourlay]

I had exactly the same issue last week after upgrading to Big Sur.

It's not ideal, but I've added a "small display" qualifier to my implementations to try to only target iPhones (in portrait orientation)...

@supports (font: -apple-system-body) {
  @media (max-width: 719px) {
    html {
      font: -apple-system-body !important;
    }
  }
}

[Josh]

I know that this is just a concession of using the best resource available for the problem at hand, but arrgh, the fact that the web standards board hasn't adopted a CSS filter for the width of the actual screen of a user's device yet has turned the mere act of browsing the internet into one of the most aggravating activities I regularly do for the ... [gestures vaguely] ... part of my life.

I have a 1920x1080 screen, and can't even put up two reference documents in split-view mode without both of them snapping to a single_column_flow layout that's "optimized" for tablets, and suddenly the article's lines go from being slightly longer than in an average paperback to running the entire width of a page in a cocktail table book.

Anyway. This is a useful CSS rule, thank you for sharing it on here 🦄💖🔖

[Darrik Moberg]

This is interesting. I wonder why the system font doesn't just set the browser's default font size.

[Colin Gourlay]

I think it’s important that the feature is opt-in, but I would have liked to be able to access the size directly, rather than the whole font shorthand. Apple created the concept of env() CSS values, which could have been great for exposing more than margins.

[Darrik Moberg]

So font-size is an accessibility thing. In desktop browsers, you can scale your default font-size to better suit your needs. This can be an alternative to zooming. The idea is that sites can set their base font in rem to scale to the browser defaults. If a site wants to opt out (which they probably shouldn't), they can use a fixed font size like pixels.
Having to hack around this to scale your fonts a special way for Apple seems odd to me.
Either way, this is great information!