iOS dev: 30px and above font sizes rendering with lowest font weight

[startrick]

Describe the bug I am using Inter 4.0-beta9g in my project. Text with font sizes at 30px and above are rendering as a thin font, and disregarding the font weight assigned to it. I have observed this in both Safari and Chrome in my iPhone 13 Pro.

Screenshots

Environment

• iPhone 13 Pro
• Safari and Chrome
• Inter 4.0-beta9g

[startrick]

I figured that explicitly adding opsz value in the style makes it work, but is that expected? style={{ fontVariationSettings: "'opsz' 28", }}

[kenmcd]

Some browsers, on some operating systems, have problems handling the opsz axis properly. There have been a number of issues posted regarding the Google Fonts web pages where things did not work as expected. The work-around was to explicitly set the opsz (like you did). Please test your iOS browsers on the Google Fonts variable fonts which have an opsz axis (on their Type-Tester pages). Here: https://fonts.google.com/variablefonts?vfaxis=opsz#font-families (if the font list is not showing, re-select opsz in the search box select list)

Have you tested some other fonts? You do not mention how you are constructing your project. Some of the Apple API font tools do affect the handling of optical size. Please test some other fonts. Segoe UI Variable and Nunito Sans Variable may be good choices.

Segoe UI Variable - Microsoft Optical Size (opsz) Default: 10.5 Range: 5-36 Design toolkits and samples for Windows apps - Fonts https://learn.microsoft.com/en-us/windows/apps/design/downloads/#fonts Download (direct link): https://aka.ms/SegoeUIVariable

Nunito Sans Variable https://fonts.google.com/specimen/Nunito+Sans Optical Size (opsz) Default: 12 Range: 6-12

Both of those have more limited opsz ranges than the Apple System Font - which may be what the API expects (the way you have coded it).

Your example text above is the default opsz of 28, and the not-default weight of 100 - which is quite odd.

Please test the browsers and the fonts and then we can go from there. Could be an issue with Inter 4.0-beta9g, but your odd results may indicate something else.

[rsms]

@startrick did kenmcd's ideas help? Can we close this or do you still think there's an issue with Inter that we should look into?

[startrick]

@rsms Yes and Thanks @kenmcd. BTW I found a couple of more websites on Inter4 which when rendered on my iPhone shows the thin font styles. I am manually adding opsz values to my larger font sizes and that seems to have worked for me. The new website looks sleek with Inter4. Thanks a ton!

[pacocoursey]

@rsms I believe this should be re-opened. iOS Safari < 16.4 seems to have issues rendering Inter with automatic optical sizing. This didn't seem to happen with early versions of the v4 beta or v3. Here's an example showing the broken rendering from rsms.me/inter after the official v4 release on iOS Safari 16.2:

• The relevant WebKit bug that was fixed in Safari 16.4: https://bugs.webkit.org/show_bug.cgi?id=247987
• Related blog post: https://clagnut.com/blog/2423
• It may also be breaking on other browsers/platforms, reported here on Microsoft Edge / Windows: https://github.com/rsms/inter/discussions/463#discussioncomment-7612461

[rsms]

Reopening this but I won't be fixing it since I have no idea where to even start. Open to contributions for fixes!

[aaadotpm]

This seems to be an issue on Safari 16.2 on macOS as well. Safari 16.6 does not have this issue. I will be investigating some fixes for this in the next couple of days and report back any findings.

A little bit hard to test this without Safari 16.2 running anywhere, but maybe the iOS simulator with an early Safari version might be the way to go.

[nico3333fr]

Hey there,

I'm one of Proton Mail devs => we are using Inter Sans on Proton Mail web apps (V4), and we confirm the issue on Safari iOS < v16.4.

We are investigating too.

[kenmcd]

Obviously a browser issue given that it is fixed in v16.4-16.6. So the only way to know if the issue in the <16.4 is caused by something in Inter is to see some other fonts which do work in the older version. Please test with these three other interface fonts which also have an optical size axis:

Segoe UI Variable - download link above

Roboto Flex - https://github.com/googlefonts/roboto-flex/releases

System Font (SFNS.ttf) - comes with macOS

Do any or all of these work as expected in <16.4? What font sizes are you using? (could be related to min/max/default settings on the axis inside the font)

What happens with the iOS browsers on this test page? SNAFU: Optical Sizes Browser Check https://graphicore.github.io/varla-varfo/explorations/techniques/opsz-browser-check.html

[rsms]

Sounds like Apple fixed their bug

https://github.com/rsms/inter/issues/649#issuecomment-1826460465

"it looks like apple fixed this in 16.4+ versions and I have confirmed some users were indeed on older versions and updating has resolved in a fix for them"

Can you please confirm @startrick ?

[brc-dd]

Just for visibility, this is the upstream issue link - https://bugs.webkit.org/show_bug.cgi?id=247987 / https://github.com/WebKit/WebKit/pull/10126

[yerlantemir]

The solution in this blogpost fixed the issue for me https://clagnut.com/blog/2423