1

I have my site how I like it, cross browser, although I have letter-spacing in CSS, but in safari it does not understand what I have, it ruins the design - any advice? Here is the CSS:

body 
{
margin: auto;
font-family: 'Lato';
letter-spacing:0.50px;
font-size: 14px;
color: #999; 
font-weight: normal;
}

It seems it doesn't give it any. It works fine in Mozilla Firefox

  • 4
    there is no such thing as half of a pixel. – PlantTheIdea Apr 05 '13 at 21:36
  • As far as I'm aware, there is no such thing as a half pixel. I'd either bump that to 1 or 0. FF and Chrome might fix it automatically when rendering. – Christopher Marshall Apr 05 '13 at 21:37
  • While the actual results are often rounded, may be ignored, etc., browsers understand floating point pixel values. See [here](http://stackoverflow.com/questions/15300163/how-do-browsers-deal-with-non-integer-values-for-height-and-width/15300264#15300264) and [here](http://stackoverflow.com/questions/7811225/is-there-a-way-to-make-css-letter-spacing-0-5-px?rq=1). – Tim M. Apr 05 '13 at 21:46
  • 1
    Basically, if you don’t like the spacing of a font, use a different font. Setting `letter-spacing` on `body` means distrust on the font(s) you have chosen. – Jukka K. Korpela Apr 05 '13 at 21:47

2 Answers2

2

Webkit browsers (Safari, Chrome) round differently than Gecko (Mozilla). Thus, use 1px instead of 0.5px, as Webkit will round down to 0 while Mozilla will round up.

Albert Xing
  • 5,620
  • 3
  • 21
  • 40
1

Chrome/Blink has fixed this issue some time ago so this should work on current stable version: http://src.chromium.org/viewvc/blink?view=revision&revision=153727

Webkit just fixed this, so you will have to wait a little to have it working on safari and other webkit based browsers: http://trac.webkit.org/changeset/161521

idFlood
  • 1,016
  • 10
  • 20