What's the Smallest Amount of Letter-Spacing?

Hi, just a quick question:

  • What is the smallest amount of positive letter spacing that can be applied to text?

I’ve tried 1px, 0.1ems, and 0.1exs, etc. But I’m wondering if there is a widely accepted minimum amount that works across all modern browsers?

I’ve looked at all the ‘official’ places, but nobody really states it outright.

THANKS!

Letter-spacing is supported by all major browsers and it can use negative values, so if you want to be technical, there is no minimum amount which is accepted.

Though once it gets negative I believe the letters start overlapping because it will be less space then the actual letter. I wouldn’t be surprised if instead of overlapping it’d cut off the letters.

They will overlap which in some cases produces a quite nice effect actually, but no it does not cut them off. :slight_smile:

Hmm…I think I was originally right (and you are) about it not cutting the letters off…

Hey, sorry. I should have made it a bit more clear.

  • What’s the smallest acceptable amount of POSITIVE letter spacing available?

I know that negative spacing is also available. I’m just trying to see what the smallest denomination of ADDITIONAL POSITIVE letter spacing is acceptable as a standard.

Thanks again!

That would depend on font size and type, it isn’t a clear cut subject which has a specific standard. Play around and find what works best in your situation.

OK. Yeah, I know it would depend on font size. So for the sake of argument, let’s say the font will be 10px.

I was more interested in finding out what is universally accepted as a smallest increment (cross-browser) for adding letter spacing.

FOR INSTANCE:

If using pixels, I imagine 1px is smallest. You can’t use .5px, correct?

If using EMS, it appears that .1ems is smallest, but I’m not totally sure. I thought I had seen references to .0xems (.04, .07, etc.). Trying to find out what is universal.

It would seem like using EXS would be smaller than EMS (x height vs. Font height). So is .1exs the smallest? Or can you go smaller?

Thanks a lot. I’m coming from the print world, and there is obviously a lot more fine-control over letter-spacing. Sometimes using 1px or .1ems is too much and makes text break, but 0px is just too tight.

Try testing, because I for one have not tested

No I do not believe you can do .5px as I have tried. You can’t set a width/height for an element for half a pixel :slight_smile:

The limit would be one pixel regardless of what measurement you use.

So if your font size is such that 1em is 10px then you could use 0.1em but if you had 1em = 8px then the minimum would be .125em and so on.

Ahhhhh. OK. Now we’re talking. That, I suppose, makes obvious sense.

HOWEVER, I just did a quick test using Firefox 3 on a Mac, using the web developer tools ‘Edit CSS’ to see the results immediately on screen.

THESE ARE THE SURPRISING RESULTS:
It appears from these tests, that you can use denominations down to 1/100th of a digit for any of the delimiters.

So there is a difference between: .01px, .02px, .1px, .2px, 1px, 2px, etc.
This works the same for EMS & EXS: .01em, .02em, .1em, .2em, 1em, 2em, etc. OR .01ex, .02ex, .1ex, .2ex, 1ex, 2ex, etc.


OK, so this kind of answers some things MAYBE. It looks like from my quick test that .01px is the smallest delineation for letter-spacing, at least on FF3/Mac.

  • So back to part of the original question: what would be the smallest STANDARD across multiple browsers & platforms??

I’ll see if I can wrangle this test on a couple different browsers/platforms, I was just really busy right now and hoping this would be ‘officially’ documented somewhere.

You should be able to get into the thousandths in ems. It’s not officially documented because it’s zany and browser-specific.

Careful with being overly precise with the letter-spacing. Different browsers interpret it completely differently, at least in my experience with ems.

Browsers render measurement units inconsistently, especially when it comes to getting very precise measurements, as for what should be the standard. It is dependent on the font being used, the typeface size, kerning, leading, serif lengths and many other variables. Simply put, the best thing you can do is just use trial and error until your end result “feels” right for your needs.

Technically there is no such thing as a fraction of a pixel so I wouldn’t be surprised if IE just rounded it to the nearest unit/up.

Thanks for the input. It just seems like the thing that SHOULD be documented somewhere, especially if there are issues with inconsistency to watch for. I was very surprised that the W3C site didn’t specify this (at least I couldn’t find it). Why would the organization that is setting the standards for this kind of thing not spell out exactly what limits you can/should use with it???

Because ultimately the W3 is just the standards-practices to follow. It is a recommendation and browsers are the ultimate deciders on what really is the limit.

The limit of 1px is built into the monitors - there is no need to specify a limit in the CSS standards unless the limit is supposed to be bigger than that. No mention of it in the standards would imply that the hardware limit of 1px would apply.

Some other media - eg printers - would allow a smaller limit.

Well, if 1px is the limit, why did my tests allow for as small as .01px? Is this just anti-aliasing at work?

You might be able to enter values that small but they would all have to be rounded to the nearest pixel for diaplay on eht screen. You might be able to get that close on a print copy if the printer supports over 10,000 dpi but if the print resolution is lower than that it will be rounded to the nearest whole number of dots as well.

The software allows you to specify amounts that are far smaller than any of the available hardware supports so the hardware limit is what gets applied in al such cases.

The one instance where you could get the 0.01px actually working on a web page is if the person is using a browser with a zoom mode and zooms in to magnfy everything 100 times normal size. Then your .01px enlarged by that 100x zoom factor will be 1px and will therefore be capable of being shown at its correct relative size.

Hmm. Yes, I know that makes sense.

But I’m still not understanding why I saw a difference as I increased the letter-spacing from .01px to .02px, etc. And these values were all significantly tighter than using 1px, but were looser than using 0px.

So they didn’t APPEAR to be rounding to the nearest pixel value, at least as far as the rule is specifying 0px or 1px. They very definitely appeared on screen to be using values that were between what you would get if using 0px or 1px for letter-spacing. Maybe it’s just not clear what technically is meant by using ‘letter-spacing: 0px’, or ‘letter-spacing: 1px’.

Thoughts???