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.

Answer 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

Answer 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.

Answer 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)