Is there a way to make css letter-spacing: 0.5 px?

Question

I ran across the problem, I need to make it easy for users to read the text, so I used letter-spacing of 1 px, but it looks ugly, so I thought I'll use half a pixel so 0.5px, but it doesn't work, I tried using em attributes, but didn't achieve the task.

So is there a way to make letter spacing half pixel (cross browser solution if possible)

Numerary

You're likely running into pixel-alignment issues with font-hinting; you're probably shifting by half a pixel, but then the font rasterizer is re-aligning the text to pixel boundaries. The effects of 0.5px could reasonably vary from OS to OS and browser to browser. – Gonagle

Since this is top of Google results, to help fellow rookies out, fractional letter-spacing is supported by all major browsers, as of end of 2013. – Misbehave

Answer 1

This bug has been reported back in 2008 and is confirmed. So if someone feels like hacking into webkit that would make a lot of designers happy.

https://bugs.webkit.org/show_bug.cgi?id=20606

Stale

Looks like a patch finally landed in webkit! And Chrome/blink was fixed some time ago. So we will be able to use safely fractional letter-spacing really soon. – Stale

I just tested with latest safari (8.0) and it is now working : ) – Stale

Answer 2

Sub-pixel letter spacing works fine on FF, but not on WebKit (at least on Windows). See this test case:
http://jsfiddle.net/fZYqL/2/

This test also shows that it is not the sub-pixel literal value that is a problem. Using fractional em values that result in less than 1px of letter-spacing are also not honored on Webkit, but work just as well on Firefox.

Gonagle

Answer 3

This bug has been fixed in Chromium and landed in Chrome 30. So fractional values are now supported by Firefox, Chrome and Opera.

Andvari

This is told to be fixed, but I can still see it in newest (for now) 31.0.1650.48 m. – Grabowski

Tested the example above (jsfiddle.net/fZYqL/2) on Chrome version 31.0.1650.48 which worked fine for me. – Andvari

Answer 4

@Zach Re: fractional pixels. Although they do not exist physically, they are simulated digitally by transparencies and changes in colour. A good example are icons and the serifs of type. A close look at what appears to be a very thin line will quickly show that it is simulated by rendering the line with a lighter colour that fools the eye. So even when they do not exist, graphic software has dealt with fractional pixels properly since a long time. It is a shame that webkit browsers still don't.

Re: fractional letter spacing. It can be specified and works fine in non-webkit browsers (kudos for IE for once). In webkit browsers letter spacing is rounded to the closest integer (I believe that it is rounded down). This rounding happens not only when the letter-spacing is specified directly as a fractional pixel but also when it is specified as a percentage or em value and the final calculation in pixels results into a fractional pixel. Very frustrating.

Photomicrograph

Answer 5

Sub-pixel sizes are legal, but they can have unpredictable results across browsers. Things like text also try to align themselves to whole pixels (as Phrogz says), so chances are the resulting rounding errors might make things look uneven.

Offenbach

Per the CSS2 Specifications the amount of spacing is "in addition to the default space between characters"; having an extra 0.5px is a reasonable and readable desire – Gonagle

Answer 6

Fractional letter-spacing values are supported by Webkit, Firefox, Chrome and Opera, since the end of 2013.

Confirmed by CSS Tricks - https://css-tricks.com/almanac/properties/l/letter-spacing/

And I just tested it.

Misbehave