05 Sep September 2024

When setting up a new website, many developers start by adjusting the base font size in their CSS using html { font-size: 62.5% }. This changes the default font size from 16px to 10px, making it easier to reason about rem values, which allow users to scale the font size according to their preferences. This approach works well on desktop browsers and Android devices, but unfortunately, it doesn’t work on iOS and iPadOS.

Apple handles dynamic font scaling differently by using system fonts like -apple-system-body and -apple-system-headline. The challenge is that none of these fonts map directly to 10px. For example, I typically use -apple-system-body as the base font, which defaults to 17px, requiring additional calculations. To complicate things further, desktop Safari supports these system fonts but renders them at smaller sizes than expected, so it’s often better to revert to a more traditional method here.

Here’s an example of a better font setup:

html {
  font-size: calc(100% * 17 / 16);

  @supports (font: -apple-system-body) and
            (-webkit-touch-callout: default) {
    font: -apple-system-body;
  }
}

:root {
  --font-size-100: calc(20rem / 17);
  --font-size-200: calc(25rem / 17);
  --font-size-300: calc(30rem / 17);
  ...
}

By using this CSS, you can use the font variables and they will scale perfectly and adapt to the user’s preferred font size. It’s a great way to ensure a consistent and flexible typography experience across devices.