Search code examples
fontsfont-sizecustom-fontletter-spacing

Safari, letter-spacing with custom font

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

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

    Another thread covering similar issues can be found here