Letter-spacing should not be percentage based

In case you haven’t found the answer, I believe it’s 1% of the element’s font-size, which in CSS would be 0.01em.

A browsers default is 16px, which is 1em.

If 0.01em is 1%, than the size would be 16/100=0.16 pixels.

Given we design everything in pixels, its stupid to have to use percentages to do the spacing, and calculate back and forth.

This just saved me. Thanks.

@MakePixelsWork
rems and ems are different. 0.01em is indeed 1% of the element’s font size.

However, I would still appreciate if Figma allowed switching units.

I know. But there is no way to set the root em size in Figma.

I’m using Figma token and I’m exporting it in json format. In that case, I have to use the px format. So I have to convert this. In order to simplify this process, it would be good to support the option in Figma.

Just started using Figma recently and disappointing that some very good points have been made about this, and yet it still remains an issue.

There is no reason it should default to percentage-based.

Last I heard, Figma’s development team only looks at issues that have more than 700 up-votes, before they take this into consideration. So we’ll need 672 more votes before they learn about this stupid percentages vs pixels issue.

So for %age, as explained, you would use em as it is relative, so 0.01em is always 1%, it’s not tied to a root font size but a percentage of the font-size of whatever text it is assigned to.

rems on the other hand are derived from the root font-size, with 16 being the default in both browsers and Figma. You can also update this (not generally recommended) for the CSS that is generated by Figma if you wanted to under Unit scale in the unit options dropdown in the CSS panel.

Personally I think %ages as the default is much better for how we’re building type scales and interfaces these days. Having a static px or rem value is only useful if you have static font sizes which isn’t a great default. Having the %age-based output is better for type sizes that scale with the viewport size i.e. font-size: clamp(2.5rem, 7.3vw, 6.5rem). Having a scaleable type system also means you avoid re-setting the static letter-spacing value for each media breakpoint if you adjust the font-size; if you change your font-size manually across 5 different breakpoints, you’d need to manually also define 5 different letter-spacing values. It’s kind of like how you don’t want to be setting line-height to a fixed value, relative is always a better approach for consistency.

I would like letter-spacing when shared to display “x% (0.xxem)”

I’ve had to fix frontend design bugs from my junior developers because they put letter-spacing: 1% in the css and didn’t validate it does nothing. The difference is imperceptible to some people (and very obvious to me). We taught them 1% actually means 0.01em. Figma might as well help us help ourselves.