Small caps rendering issue in Safari (macOS and iOS)

Nov 02, 2020

Copy link to clipboard

Copied

I've come across some strange behavior using Proxima Nova small caps via Typekit. Everything is fine in Chrome, but I have a mess on my hands in Safari.

 

My web project contains Proxima Nova (light, regular, bold), currently set to "all characters" and OpenType features turned on, with font-display set to "swap"—though I've attempted nearly every combination of character sets and font-display settings. I can get consistent but incorrect results when I turn off the OpenType features.

 

Here's a sampling of the issues:

 

This headline starts small, then inexplicably grows when it gets to the second line. It's all just one line of text in an <h2> tag. Then the byline below shrinks the author's name and the date. Everything on that line should be the same size, and is styled as such. See the Safari rendering above and the Chrome version below.

mismatch.jpg

In this case, the text doesn't recognize it's supposed to wrap and just continues on well outside its bounding box. You'll also notice that the second portion of the headline is smaller (instead of the first portion like last time). And below that, in the byline, the date is smaller—but not the author this time. Safari above and Chrome below.

headline.jpg

And finally, just some wildly arbitrary sizing on this list of names. No rhyme or reason, no difference in HTML or CSS used on any of these lines. Safari then Chrome. All of these issues appear pretty much identically on desktop and mobile Safari.

menu.jpg

 

As mentioned above, the issue goes away when I turn off OpenType features—but the proper small caps also go away too. I've swapped out Proxima for a different, local font with small caps and the issues went away in Safari. I'm at a loss. If anyone has come across similar issues, I'd love to get an idea of how to straighten this out.

TOPICS
Font rendering

Views

26

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Small caps rendering issue in Safari (macOS and iOS)

Nov 02, 2020

Copy link to clipboard

Copied

I've come across some strange behavior using Proxima Nova small caps via Typekit. Everything is fine in Chrome, but I have a mess on my hands in Safari.

 

My web project contains Proxima Nova (light, regular, bold), currently set to "all characters" and OpenType features turned on, with font-display set to "swap"—though I've attempted nearly every combination of character sets and font-display settings. I can get consistent but incorrect results when I turn off the OpenType features.

 

Here's a sampling of the issues:

 

This headline starts small, then inexplicably grows when it gets to the second line. It's all just one line of text in an <h2> tag. Then the byline below shrinks the author's name and the date. Everything on that line should be the same size, and is styled as such. See the Safari rendering above and the Chrome version below.

mismatch.jpg

In this case, the text doesn't recognize it's supposed to wrap and just continues on well outside its bounding box. You'll also notice that the second portion of the headline is smaller (instead of the first portion like last time). And below that, in the byline, the date is smaller—but not the author this time. Safari above and Chrome below.

headline.jpg

And finally, just some wildly arbitrary sizing on this list of names. No rhyme or reason, no difference in HTML or CSS used on any of these lines. Safari then Chrome. All of these issues appear pretty much identically on desktop and mobile Safari.

menu.jpg

 

As mentioned above, the issue goes away when I turn off OpenType features—but the proper small caps also go away too. I've swapped out Proxima for a different, local font with small caps and the issues went away in Safari. I'm at a loss. If anyone has come across similar issues, I'd love to get an idea of how to straighten this out.

TOPICS
Font rendering

Views

27

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Nov 02, 2020 0
Nov 03, 2020

Copy link to clipboard

Copied

Here's how I ended up fixing the issue. I was initially using

font-variant-caps: all-small-caps;

then I simplified to

font-variant: all-small-caps;

I changed that to

font-variant: small-caps;
text-transform: lowercase;

 and now everything is okay. Apparently Safari can't deal with all-small-caps.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 03, 2020 0