What's the Smallest Amount of Letter-Spacing?

**RyanReese** · Mar 26, 2009 16:38

You can rather test instead of asking us to do it for you

.

**gary.turner** · Mar 26, 2009 19:04

The smallest increment is 1px. No exceptions.

When using em metrics, Firefox and IE8 follow the specs by referencing the length to the computed font-size of the element. Both browsers round up at a computed .5 px.

IE7, Opera, and Safari somehow manage to ignore the element's font size, and reference the default document font-size. This is a bug.

Opera and Safari fail at letter-spacing: 1px;, but oddly enough round up at their (wrongly) computed value >.5.

Test case:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xml:lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      lang="en">
<head>
  <meta name="generator"
        content=
        "HTML Tidy for Linux (vers 7 December 2008), see www.w3.org" />

  <title>Testing minimum values of letter-spacing</title>
  <meta http-equiv="content-type"
        content="text/html; charset=utf-8" />
  <meta name="author"
        content="Gary Turner" />
  <style type="text/css">
/*<![CDATA[*/

  body {
    background-color: white;
    color: black;
    font: 100&#37; serif;
    }

  p {
    font-size: 1em;
    }

  .test {
    font-size: 50px;
    }

  .controlspacing {
    letter-spacing: 1px;
    }

  .ls00045 {   /* suggested by harvurd */
    letter-spacing: .0045em;  /* computes to .225px */
    }

  .ls0008 {
    letter-spacing: .008em;   /* computes to .4px */
    }

  .ls0010 {
    letter-spacing: .010em;   /*computes to .5px */
    }

  .ls0012 {
    letter-spacing: .012em;   /*computes to .6px */
    }

  .ls0016 {
    letter-spacing: .016em;   /* computes to .8px */
    }

  .ls0020 {
    letter-spacing: .02em    /* computes to 1px */
    }

  .ls0030 {
    letter-spacing: .03em    /* computes to 1.5px */
    }

  .ls0040 {
    letter-spacing: .04em    /* computes to 2px */
    }

  .ls0050 {
    letter-spacing: .05em    /* computes to 2.5px */
    }

  /*]]>*/
  </style>
</head>

<body>
  <h1>testing fractional values of letter-spacing</h1>

  <p>The first and second double em dashes are the control. They have
  no stated letter-spacing, and 1px, respectively.</p>

  <div class="test">
    <p>——</p>

    <p class="controlspacing">—— 1px declared</p>

    <p class="ls00045">—— .0045em = 0.225px</p>

    <p class="ls0008">—— 0.008em = 0.4px</p>

    <p class="ls0010">—— 0.01em = 0.5px Tests rounding of even
    integer</p>

    <p class="ls0012">—— 0.012em = 0.6px</p>

    <p class="ls0016">—— 0.16em = 0.8px</p>

    <p class="ls0020">—— 0.02em = 1px</p>

    <p class="ls0030">—— 0.03em = 1.5px Tests rounding of odd
    integer</p>

    <p class="ls0040">—— 0.04em = 2px</p>

    <p class="ls0050">—— special case for IE7, Safari, &amp; Opera.
    .05em based on 16px default font = .8px. .05em = 2.5px per
    specs</p>
  </div>
</body>
</html>

cheers,

gary

**felgall** · Mar 26, 2009 19:57

Even Firefox has to either use or not use a pixel on the screen and so the physical limit is one pixel. Anything that appears to be smaller than that must be just using different colour pixels to fool the eye.

**jethrodesign** · Mar 26, 2009 20:53

WOW! I didn't know this was going to get so involved. Thanks everyone for the input. I thought it would just be a published standard somewhere. Who knew?!?

And thanks Gary for the detailed explanation and test. I'm assuming you had figured this out yourself before?!? But to take out the confusion of 'calculated font sizes' due to using ems, I redid your test using absolute pixel values for the font-size and the letter-spacing. It was just too confusing trying to understand all the different 'calculated logic'...

So in my limited test facility, which includes FF3 & Safari on Mac OSX 10.5, and FF3 & IE6 on a WinXP machine, here's MY semi-official test results:

IE6 on PC / Safari on Mac: Letter-spacing does appear to increase only in 1px increments.

FF3 on PC & Mac: Letter-spacing definitely increases in sub-pixel increments. I can see a difference (at larger sizes) between .2px, .4px, .6px, etc. increments.

For the test I was using Arial at 50px as the font & size (again to see things better).

And the fact that it is displayed on a monitor that uses pixels can't hold too much weight, as fonts definitely use anti-aliasing to display smoother on screens. That's why smaller font sizes can look a bit 'fuzzy'. So type characters definitely cross the bounds of exact pixel placement (unless they are those tiny 'pixel-based' fonts that some people use for Flash).

**Ed Seedhouse** · Mar 26, 2009 22:11

Originally Posted by jethrodesign

- 1px is the smallest amount of letter-spacing allowed as a standard, CROSS-BROWSER and CROSS-PLATFORM.

Can anyone verify this as definitely the case?

It has nothing to do with the standard. A pixel is by definition the smallest thing any screen can display, period.

Just as a molecule is the smallest piece of any material that is still that material. You can have a single molecule of water, but you can't have half a molecule of water because that's just how the actual physical universe you live in works. You can break a water molecule but what you have left is no longer water.

The pixel limitation is not one of standards, but of actual reality. That's just how monitors work. Nothing you do or say will change it.

**felgall** · Mar 26, 2009 22:27

Anti aliasing just uses a colour part way between those of adjacent colours for the pixel in between so as to soften the edge.

To keep it simple if you have a black letter on a white background and one of the pixels needs to be half black and half white then anti aliasing will display that pixel as grey (#808080 as that is as close as you can get to half way between #000000 and #ffffff). If it is supposed to be 3/4 black and 1/4 white then anti aliasing would make it dark grey (#404040). It is still only one pixel that is displaying one colour though - it isn't really part one colour and part another as it would need to be for the spacing to really be able to go closer than one pixel.

**jethrodesign** · Mar 27, 2009 11:50

Ok. Ok. I understand what a physical pixel is

But this still doesn't nullify the fact that in FF you can use increments much smaller than a pixel to define letter spacing and see a definite difference. You can try it yourself.

BUT, for all the IE and Safari people in the world, I will stick to using 1px increments (whether by absolute pixel values, or by calculated em values).

Thanks a lot for everyone's input! It just shows me once again how far browsers (cough cough IE) have to go to give designers the kind of control that would be SO useful to nice design.

The jump to 1px letter-spacing can be just a bit too much in some cases to get type to flow the way you desire. The whole purpose for my initial question was to help figure out the spacing for a horizontal menu for our site that needs to justify within the outer margins we have set. So minute letter-spacing values would have made this MUCH easier!

**felgall** · Mar 27, 2009 13:02

Originally Posted by jethrodesign

So minute letter-spacing values would have made this MUCH easier!

Minute dots for drawing the letters would make displaying them properly so much easier too but we are stuck with the physical pixel sizes and limited to changing the colour of pixels to fool the eye into thinking that a pixel is partly one colour and partly another.

**Ed Seedhouse** · Mar 27, 2009 19:45

Monitors generally suck. The very best I've seen doesn't even come close to cheap newsprint. Mind you I haven't seen them all. Eventually they will improve.

Until they do you ignore the facts at your peril.

**jethrodesign** · Mar 27, 2009 20:59

Well, the way FF pulls it off looks great! There is no degredation at all. Anti-aliasing is already in play, so it doesn't really make a difference to the final result how much 'fudging' of pixel colors is going on.

**WraithKenny** · Sep 9, 2010 10:51

Wow, there are a lot of disrespectful "Advisors" and "Evangelists" here. "jethrodesign" was correct, and didn't need the trolling from "Ed Seedhouse". He was wrong and disrespectful, and "felgall" supported his error.

The folly was that a "physical" pixel has nothing to do with the issue: sub-pixel rendering exists in modern OS's regardless of whether the technical implementation is a "trick" of the eye. Some popular modern browser/OS combinations support sub-pixel values for letter-spacing and are rendered fine (QED); Others do not.

Sub-pixel rendering allows for sub-pixel measurement regardless of the (irrelevant) fact that monitors have pixels.

The issue is that not all browsers accept input values smaller then a pixel (although some actually do) and therefor, for cross-browser/OS consistency, 1px is the smallest usefull increment.

Relative value types (%, em, pt, etc.) are converted to px for this case. Using a value that coverts to a fractional px is problematic due to inconsistent rounding in different browsers. So use px or a carefully considered font size system (Like yahoo font css).

This is a browser (whether it accepts fractional pixel values) or OS (whether it has sub-pixel rendering) limitation.

It is not a "physical" one.

User Tag List

Thread: What's the Smallest Amount of Letter-Spacing?

Thread Tools

Display

Bookmarks

Bookmarks

Posting Permissions