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.