Context: Operating systems regularly allow users to set a custom font size scale. This can be useful for users who have vision problems, for example. It is a best practice for software, including web pages, to respect this font size setting. In the browser, the way to accomplish this is with rem units. And in fact, all browsers except for Safari work this way. To confirm this, you can create a webpage with the following CSS: ``` p { font-size: 1rem; } ``` And create a paragraph element with text. On any OS and any browser (except Safari) you can open this webpage and then change your system-level font scale setting. Observe that the text in this paragraph will match the system-level scale value. The problem: Safari always renders `1rem` as `16px`. A possible workaround: Sources on the web suggest the following workaround: ``` html { font: -apple-system-body; } ``` This does work to make Safari respect font size settings, but it introduces a new problem on macOS. It sets the "unscaled" value of 1rem to be 13px rather than the normal 16px. The consequence of this is that all text will display smaller on macOS. Proposed solutions: (1) The best solution for developers would be to update Safari so that it treats rem units the same as every other browser. (2) A stop-gap solution would be a new webkit-only prefix that would *only* enable the dynamic font size, but not change the base font size value nor the font-family. Something like: ``` html { font-size: -apple-system-font-size; } ``` (3) If the Webkit team thinks that Safari is actually treating rem units correctly and that everyone else is doing it wrong, then the web platform needs a new solution to respect the OS-level font scale setting.
<rdar://problem/114662159>
This is still a problem on Safari 17. Reproducible example: https://jsfiddle.net/7ub8362m/ I consider this to be a major bug as it means that users of Safari are unable to use browser or OS-level font size settings, which is one of the most common a11y settings configured on devices. Is the Webkit team able to confirm if this is a bug or if it's intended behavior?
Also curious about this - would love being able to respect the iOS font size system option
I think this is an ok workaround: ``` @supports (font: -apple-system-body) { @media (hover: none) { html { // Respect iOS font size settings font: -apple-system-body; } } } ``` The idea is to exclude macOS by only applying the rule to touch devices, since all iOS devices are touch devices and none of macOS are. However I noticed that even on iOS `font: -apple-system-body` seems to set another font size than the standard size, but you can compensate for that with something like this (note that this site has a slightly larger base font size so you can't just copy paste below): ``` body { // base font size font-size: 1.15rem; @supports (font: -apple-system-body) { @media (hover: none) { // -apple-system-body on iOS has a slightly different base font size, respect the one from before font-size: 1.085rem; } } } ``` I came up with above values by looking at the computed styling and making sure they match, pre and post adding the `font: -apple-system-body;`