Font optical sizing bug in Safari 16
In my previous post I extolled the virtues of Literata’s font optical sizing, in particular how it worked automatically in the browser. By ‘it’ I mean how the corresponding style was chosen along the optical size axis of the variable font, based on type size.
This behaviour is turned on by default, but if you wanted to turn off the automatic optical sizing, you can use this declaration, the effect being to style text as if it were set at 12px:
And you can turn it back on with:
Automatic selection of optical size styles in a variable font has been supported in browsers since at least 2020. That is until the release of Safari 16 with macOS Ventura. A regression was inadvertently introduced meaning the browser acted as if
font-optical-sizing was turned off. The bug was an unintened consequence of improvements being made to Core Text. Fortunately it’s being actively fixed.
So what to do in the meantime? The answer is to use the low level
font-variation-settings property to manually set the optical size. I only want to do this for Safari 16, so firstly I use a bit of user agent sniffing to set a root-level class accordingly:
Then I style my headings and body text according to the most appropriate style along the optical size axis:
This works well, but because the styles are being manually applied to selected elements, rather than automatically on a text size basis, some subtle differences are lost with the responsive text sizing I’m applying.