Wrong Letter Spacing (?) about themes HOT 5 CLOSED

@jd-carroll can you confirm what actually needs to change?

from themes.

Not sure I follow, I believe I was asking a question

But, assuming I am correct (which I may well not be), each value should be multiplied by -1 (letters get closer together the smaller they are and a little further apart the bigger they are)

from themes.

@jd-carroll yes it makes no sense why they use negative number --letter-spacing-4: -0.0025em; --letter-spacing-5: -0.005em; --letter-spacing-6: -0.00625em; --letter-spacing-7: -0.0075em; --letter-spacing-8: -0.01em; --letter-spacing-9: -0.025em;

from themes.

So I'll answer my own question, but it would be great if someone from the Radix team could answer / confirm...

The "inversed" spacing is actually designed to keep more of a "pixel-perfect" design than provide "traditional" letter spacing. As the font size increases, any em based letter-spacing would naturally make the absolute difference (px) between letters larger. The letter-spacing tokens are designed to offset the naturally increasing spacing to have more of an absolute (px) difference between letters, that is to say constant difference.

(Note: The default letter spacing for each font-family is em based.)

from themes.

This letter spacing scale is an intentional design detail and a pretty common practice in typesetting—the larger the font, the tighter it is spaced to look even and balanced.

Here’s a certain component library that doesn't adjust letter spacing as the font size increases:

Compare with Radix Themes:

Also, if Heading is supposed to get closer as it grows in size, could simply do something like:

letter-spacing: calc(-var(--letter-spacing-9) - var(--heading-letter-spacing));

Variables like --heading-letter-spacing, --em-letter-spacing, --code-letter-spacing , etc are just a tool we provide to harmonise custom fonts when used in components like Heading, Em, Code, etc with your default font in Text and most other components. You can use negative values on the variables themselves if that's what you need.

from themes.