CODEWITHSUNDEEP
csswebkitletter-spacing
Fuxi
Fuxi

Reputation: 7589

css - letter-spacing under webkit - any workaround?

i'm struggling with the fact that webkit browsers like safari won't support letter-spacing smaller than 1 pixel. is there any solution yet? i was thinking about converting my font and adding letterspacing directly to that new font: would this work and any ideas if there's a converter which supports that? thanks

Upvotes: 3

Views: 4434

Answers (3)

ThinkingStiff
ThinkingStiff

Reputation: 65341

Sure they do. Try 0, -1px, etc.

Demo: http://jsbin.com/ovepan/edit#html,live

Output:

HTML:

<p id="one">Letter spacing 1px</p>
<p id="zero">Letter spacing 0px</p>
<p id="negative-one">Letter spacing -1px</p>

CSS:

#one {letter-spacing: 1px }
#zero {letter-spacing: 0px }
#negative-one {letter-spacing: -1px }

Upvotes: 0

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201538

I tested the following on Safari and Chrome (Win 7):

<style>
.foo { letter-spacing: 0.7px; }
</style>
Hello world! This is sample text.
<div class=foo>Hello world! This is sample text.</div>

Initially the difference is barely noticeable, but if you zoom by Ctrl + you will see that the second text gets visibly wider, due to slighly larger letter spacing.

The quality of implementation might be subject to debate, but the support is there.

On the other hand, if you don’t like the natural appearance of a font, with spacing as caused designer’s decisions, use a different font. Mechanically increasing all letter spacing in text expresses distrust in font design and is a coarse tool. Letter spacing might be needed in special occasions for short texts, though—but less than a pixel is hardly useful then.

Upvotes: 0

Sam
Sam

Reputation: 4487

You could always use em's.

letter-spacing: 0.5em;

Upvotes: 1

Related Questions