Why do Web-Fonts differ in spacing?

Hi there,
I have a question out of curiosity.

I noticed that when I export from on Glyphs-File a Web-Fonts (WOFF, WOFF2) and Desktop-Fonts (OTF) they differ in spacing.
To be more precise Web-Fonts have more tracking.
If you overall decrees tracking, the fonts mach perfect.
So fonts just run wider in browsers.

I tested this by making a screenshot of the browser and overlay this in InDesign.
It seems to be a general phenomena.

Does anyone have a explanation for this? :thinking:

Depends on your settings in CSS and your settings in InDesign. Both environments allow you to turn kerning on and off. InDesign also offers its own spacing & kerning algorithm, Optical Kerning. Many InD users had that turned on at one point and never noticed it after that.

@mekkablue thank you for your suggestions.


We do not have added any CSS for letter-spacing ect.

We do have turned on for both kerning.
Beside of this it is the overall tracking who differs.

We have it on Metric.

I have set up a test folder with Glype file, Woff, HTML, and InDesign Test files.
If somebody are like to see the set up. :yum:

Traking_Test.zip (975.9 KB)

I wondered whether it might be the default CSS settings at work. https://css-tricks.com/almanac/properties/t/text-rendering/

When I take a screenshot in Safari and set the size in Indesign to 25 (it says 50px in css), then it matches.

@GeorgSeifert …ah I see that is the point.
When you compare Web-Fonts in browsers with Desktop-Fonts in Applications the font-size has to be the same.

@Cormullion I tested this, CSS deafult should not vary to the Desktop Font. So there is no extra CSS neccecary, e.g. letter-spacing:0px etc.

Great, thank you all for the explaining. :clap: