Welcome Dialog

Welcome to the Community!

We have a brand new look! Take a tour with us and explore the latest updates on Adobe Support Community.


Small caps rendering issue in Safari (macOS and iOS)

New Here ,
Nov 02, 2020 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

146

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
community guidelines
New Here ,
Nov 03, 2020 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
community guidelines
New Here ,
Oct 25, 2021 Oct 25, 2021

Copy link to clipboard

Copied

Your last example isn’t totally arbitrary because I just struck it myself in Safari. Use of all-small-caps seems to decrease the font size for any string containing one or more punctuation characters. The three in your example that are rendering smaller all contain a period. I’m yet to find a workaround.

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
community guidelines
New Here ,
Oct 25, 2021 Oct 25, 2021

Copy link to clipboard

Copied

LATEST

Update: try font-synthesis: none to encourage Safari not to mess with the text sizing.

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
community guidelines