DEV Community

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

Colin Gourlay on August 19, 2019

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 large...
Read full post
Collapse
 
fymmot profile image
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?

Collapse
 
colingourlay profile image
Colin Gourlay • • Edited

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;
    }
  }
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
thepeoplesbourgeois profile image
Josh • • Edited

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 🦄💖🔖

Collapse
 
mdarrik profile image
Darrik Moberg •

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

Collapse
 
colingourlay profile image
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.

Collapse
 
mdarrik profile image
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!