33

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)

Phrogz
  • 296,393
  • 112
  • 651
  • 745
Ilja
  • 44,142
  • 92
  • 275
  • 498
  • 1
    You're likely running into pixel-alignment issues with [font-hinting](http://en.wikipedia.org/wiki/Font_rasterization); 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. – Phrogz Oct 18 '11 at 17:29
  • 1
    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. – Joshua Dance Mar 28 '17 at 21:22

6 Answers6

18

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

idFlood
  • 1,016
  • 10
  • 20
  • 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. – idFlood Jan 09 '14 at 06:35
  • I just tested with latest safari (8.0) and it is now working : ) – idFlood Oct 24 '14 at 14:06
6

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

Max Hoffmann
  • 2,957
  • 1
  • 17
  • 13
6

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.

Firefox versus Webkit

Phrogz
  • 296,393
  • 112
  • 651
  • 745
2

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

cockypup
  • 1,013
  • 1
  • 10
  • 24
1

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.

Joshua Dance
  • 8,847
  • 4
  • 67
  • 72
1

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.

Toomai
  • 3,974
  • 1
  • 20
  • 22
  • 2
    Per the [CSS2 Specifications](http://www.w3.org/TR/1998/REC-CSS2-19980512/text.html#spacing-props) the amount of spacing is _"**in addition to** the default space between characters"_; having an extra 0.5px is a reasonable and readable desire – Phrogz Oct 18 '11 at 20:18