How to add letter spacing to numerals?

Question

I'm using old style numerals through OpenType font feature settings on my site. Is there any way to add letter spacing to numerals without wrapping each one of them in a span class?

Answer 1

The letter-spacing property has been defined as specifying added spacing between characters. In practice, however, this has been implemented so as added spacing after each character of the element. This means that if you have e.g. <abbr>abc</abc> and you set abbr { letter-spacing: 1em } (a big value just to see the effect clearly), then there will be added 1em after a, b, and d. This would be bad e.g. if the element is immediately followed by a punctuation mark.

It seems that the following trick can be used if you wish to be able to use natural markup that does not leave out the last character: set a negative right margin on the element, with the absolute value being the same as the letter spacing, to nullify its effect after the last character:

abbr { 
  letter-spacing: 0.05em;
  margin-right: -0.05em;
}

This is independent of other settings, like small caps settings, you might have for the element. However, if you have other settings for the element, it would be even more awkward to omit the last character, since you would need something like <abbr><span>ab</span>c</abbr>, with some other settings on the abbr element and with the letter-spacing property on the inner span element—unless you use the trick outlined above.

Answer 2

.yourNumbers {letter-spacing: [value]}

https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing