Safari, letter-spacing with custom font

Question

Using the Dosis font from Google Webfonts ...

@import url(http://fonts.googleapis.com/css?family=Dosis:400,300,200,500,600,700,800);

after extensive testing in Firefox and Safari, while being perfectly aware that i won't ever get both browsers to view it all perfectly pixel-precisely fine as the original design views in my photoshop, i stumbled over the most disturbing of issues:

letter-spacing

Whatever i try, i can't get the letter-spacing right in webkit browsers.

A simple example:

.text-basic {
    font-weight:        200;
    font-size:          16px;
    letter-spacing:     0.52px;
    line-height:        22px;
}

This renders perfectly fine, the way i want it to, in Firefox (even better if i hack FF into 15.5px font size, which is okay [unless anyone has objections]).

However, in Safari the letter-spacing just won't work.

After some research i found that it won't allow letter-spacing below 1px, but it is said that it does so if i use em measures. So be it.

If i use up to:

letter-spacing: 0.0618em

Nothing happens. No change. Letter spacing way too low.

But if i use:

letter-spacing: 0.0619em

Suddenly it snaps, and letter spacing is WAY too high. Like a textblock of 10 words suddenly takes up more than 50 extra pixels in width.

I don't get it.

Does anyone know how to fix this?

Thank You.

Solution 1

There is no proper solution for this issue. Safari / Webkit will render these things incorrectly.

Another thread covering similar issues can be found here

Solution 2

I believe safari is rounding to whole pixels regardless of the unit you are using.

So the difference between 0.0618em and 0.0619em is the point where it rounds from 0px to 1px.

If you notice the letter space is identical in safari using 0.0619em and 1px;

Unfortunately I don't have a solution, but hopefully that helps explain what you are seeing.

Solution 3

This seems to be caused only by svg fonts! Reorder your font-face urls putting svg last, it should fix the problem. But svg fonts won't get used and rendering might be dirty(er)

Comments

[albert]

using ems, the spacing is much better. i viewed this in chrome vs. safari....after changing to em's, they evened out: jsfiddle.net/EdbNt/1

[SquareCat]

yes, its 'better' but that's when you go for real spacing between letters (like in your example). i fear there is no real solution to this. its just disturbing as the difference is so severe.

[albert]

"real letter spacing"? as opposed to false letter spacing? if you define your values in ems, font-size too, you should get your desired solution

[SquareCat]

As stated above, Safari is NOT rendering these things correctly, regardless of which method i use (px or em). By 'real' i mean actual, correctly calculated letter spacing. I begin to doubt there is a proper solution to this problem.

[mare]

this is actually true but moving the .svg up is good to fix Chrome's rendering in Windows but it messes up the letter-spacing in Safari (also on Windows)

[mare]

also, if .SVG is up there (before .WOFF) it doesn't matter if you set letter-spacing in px or em's (I set it to -1px), either way it won't get rendered correctly. The only solution I found so far is to target browser by browser and have custom @font-face declarations.