[css-values] A more reasonable unit for letter-spacing

[danburzo]

The letter-spacing property is commonly used to make micro-adjustments to typography, so in practice you'd mostly see minuscule fractions such as 0.015em, or -0.05ems. Wouldn't the relative unit of 1/1000em that Adobe products use be more expressive for the vast majority of cases? A milliem (mem) of sorts, if you will. Other than personal experience (I've never tracked anything >= 1em), people seem to be asking about this: 1 2 3

[tomhodgins]

I can definitely see where you're coming from, a really common rule in a lot of my stylesheets looks something like:

h1, h2, h3, h4, h5, h6 {
  letter-spacing: -.02em;
  font-weight: 600;
  line-height: 1.2;
}

It seems I'm often thinking about letter-spacing and other font-related styling in my own head as units of .01em. If you want to see an example of that, check out my 10 CSS Text Shadows pen for plenty of code like this:

/* Stripe Text Shadow */
.stripe {
  font-family: 'Teko', sans-serif;
  color: black;
   text-shadow: white  .02em  0     0,
                white  0      .02em 0,
                white -.02em  0     0,
                white  0     -.02em 0,
                black  .06em  0     0,
                black  .06em  .06em 0,
                black  0      .06em 0,
                black -.06em  .06em 0,
                black -.06em  0     0,
                black -.06em -.06em 0,
                black  0     -.06em 0,
                black  .06em -.06em 0,
                white  .08em  0     0,
                white  .08em  .08em 0,
                white  0      .08em 0,
                white -.08em  .08em 0,
                white -.08em  0     0,
                white -.08em -.08em 0,
                white  0     -.08em 0,
                white  .08em -.08em 0;
}

But before a new unit gets proposed, what about using CSS Custom Properties (CSS Variables) to let any author abstract their own units for properties like line-height, text-shadow and anything else? Consider this example where I invent a new nudge unit equal to .01em (my most commonly used unit for type-related fine-tuning):

<div>KERN</div>

<style>
  :root {
    --nudge: 0.01em;
  }
  div {
    font-size: 24pt;
    letter-spacing: calc(-2 * var(--nudge));
  }
</style>

In this example I've set a global CSS variable called --nudge which can be used inside calc() just the same as you would multiply any number by a unit. If I prefer to think about my letter-spacing in nudges I author my CSS how I like. You might prefer working in .015em-sized units you call 'bumps', but that's totally something easily within the reach of each author to define for themselves. I understand browser support for CSS Variables isn't universal, but it's bound to be better than anything new that gets specced today!

P.S. I want to say the same thing to the 'Pi Radians' person in this thread, but I'm a too scared to suggest a solution like this over there 😵:

<div>You turn me right round</div>

<style>
  :root {
    --pirad: .5turn;
  }

  div {
    transform: rotateZ(calc(-.25 * var(--pirad)));
  }
</style>

Do you see how CSS variables put authors in control of their own 'scale' for using units?

[Crissov]

You should not be scared, but variables are intended for stuff that is very specific to one site, which these units are not.

Custom calc(-2 * var(--nudge)) is clearly inferior to a possible standard -2mem. Same for π.

[danburzo]

Yes, it's definitely possible to address in various ways:

• get used to thinking in 0.01em increments
• use calc(<tracking> * 0.001em) (optionally defining 0.001em as a custom property)
• defer to Houdini Custom Units

(out of which I still prefer 0.015em to the current alternatives, for its terseness)

I also don't believe in sprawling specs that define every possible unit of measurement, but a mem would be a tremendous convenience IMO.

[SelenIT]

the relative unit of 1/1000em that Adobe products use

This would be extremely useful if this unit would always match the unit used in the font itself, i.e. if all fonts had 1000 UPM (units per em). However, different fonts have different UPM values (as mentioned in Jukka's answer in one of the StackOverflow issues referred above), so mapping the hypothetical mem unit to font units would not always be precise, and the only advantage would be sparing 1 character for typing (e.g. 15mem vs .015em).

[fantasai]

We're allowing percentages in letter-spacing now, wouldn't that be easy enough? It's 100% per 1em.

[danburzo]

Yes, I would say that’s a satisfactory resolution, plus it neatly solves the inheritance issue.