Re: [csswg-drafts] [css-values] A more reasonable unit for `letter-spacing`

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

```css
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](https://codepen.io/tomhodgins/pen/PGoVGJ) pen for plenty of code like this:

```css
/* 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](https://drafts.csswg.org/css-variables) (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):

```html
<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](https://github.com/w3c/csswg-drafts/issues/309), but I'm a too scared to suggest a solution like this over there 😵:

```html
<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?

-- 
GitHub Notification of comment by tomhodgins
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1814#issuecomment-329350296 using your GitHub account

Received on Thursday, 14 September 2017 02:23:48 UTC