Why is Safari’s default font tracking/letter-spacing different than other browsers?

Question

I’m experiencing an issue with Safari where a block of text using webfonts (not sure webfonts are the issue) is wrapping differently in Safari than it is in any other browser. In this particular instance, we’re designing these blocks to look like they’re set to text-align: justify; but they’re actually set to text-align: left;. text-align: justify; is undesired in this setting as it does a poor job of calculating the space between words.

Important things to know:

• As I mentioned, the layout uses webfonts. It doesn’t matter which webfonts (I’ve reviewed hundreds and it happens for all).
• The entire page, including padding and font-size, uses viewport width (vw). The idea here is that the block of text scales equally for all browser sizes and retains it’s layout, including rags.
  
  

A visual aid:

Details about the layout and dimensions:

• Frame 1: Safari desktop.
• Frame 2: Chrome desktop.
• Frame 3: Chrome at 50% opacity over Safari.
• Window width in this screenshot is 1220px.
• Left/right padding is padding: 0 calc(129 / 1220 * 100vw); which computes to 129px.
• That leaves the available content space of 962px.
• letter-spacing is set to 0 by default for all content.

So, anyone have any idea why Safari seems to have exaggerated tracking/letter-spacing?

---

EDIT

We just launched the site in question, so you can see the issue in action here: https://www.typography.com/fonts/hoefler-text/overview

Brolly

BTW that GIF is a fantastic way to illustrate the problem. I wish more questions were asked that way! – Goby

Thanks. :) It took me 20 minutes to put that together and 1 minute to write the post. But I hope it helps others save time in trying to figure out what the hell I’m going on about. – Brolly

Have to say, without comparing across browsers the site looks really good. And it's a nice reminder that "you get what you pay for" when it comes to font families... – Goby

Answer 1

Well, there's a bunch of stuff at play.

First of all Chrome and Safari use different defaults for rendering text, But in addition to that Chrome on different versions of MacOS or Windows will render text differently too because of how the system font rendering works.

You can typically make Safari and Chrome (on the same system) feel a bit closer by setting your text CSS to:

text-rendering: optimizeLegibility Since this is the default on Chrome but Safari defaults to optimizeSpeed

It might also be wise to explicitly set: font-feature-settings: "kern"; and font-smoothing: antialiased (note those both need vendor prefixes)

Next, make sure to specify a numeric font weight. Eg: font-weight: 400 for "regular". (The browsers might not pick the same weight for the normal/bold keywords)

Finally, make sure you're serving up the most optimized version of a webfont (Typekit & Google usually do this for you, but it's an issue if you're self-hosting the fonts)

---

Edit:

It might be worth forcing both Chrome and Safari to create a "compositing layer" (basically means its GPU accelerated). You can do that with backface-visibility: hidden. Though I suspect this is a MacOS specific thing and there may not be a solution in the browser.

Goby

Hell if I haven’t tried that. :/ I’ll give it another shot and let you know. – Brolly

Hope it helps. I added a few other things to try too. – Goby

Yeah, no dice. This is the site with the issue: typography.com/fonts/hoefler-text/overview – Brolly

Bummer, did you try it in addition to the other stuff in there? It does look like MacOS changed the text rendering at the system level (which Safari uses). Chrome is fully standalone so wouldn't be impacted the same way. – Goby

We have all of our webfonts split out into styles, so you don’t have to designate font-weight. It’s always font-weight: normal;. – Brolly

Right, I'm just saying that font-weight: normal is open to some browser interpretation where font-weight: 400 is not :-) – Goby

Thanks – this solved it for me. Other css rules to make Safari render svg closer to Chrome: svg {text-rendering: geometricPrecision; -webkit-font-smoothing: antialiased; font-feature-settings: "kern"; text-rendering: optimizeLegibility; backface-visibility: hidden;} – Politick

Answer 2

Adding font-feature-settings: "kern"; to the element for the fonts solved my problem with Safari not rendering the letter-spacing properly.

Sister

Thank you! This fixes my problem with text-anchor:middle not considering the kerning of character pairs when calculating the width of text in SVG. Chrome did by default. This makes Safari text match perfectly. – Blen

It's my pleasure, @D.McG.! The issue w/ Safari was driving me crazy. Glad that helped you! Cheers! – Sister

Answer 3

I had the similar issue while building an html banner using a .woff font: Safari was applying an exaggerated tracking/letter-spacing. Bryce's suggestion to use font-weight: 400; fixed the issue.

Jerryjerrybuild

Please don't add "thank you" as an answer. Once you have sufficient reputation, you will be able to vote up questions and answers that you found helpful. – Sealy