In CSS code under the inspect tab it’s correctly shown as 0.01, no % there.

Then maybe it should not show % in the interface, but say ‘ems’ ?!

Figma is a platform-agnostic design tool, it’s built not only to design for the web, so showing CSS-only values that make no sense on other platforms wouldn’t be a great idea in my opinion.

That’s not entirely true. Almost all inputs are in pixels, except maybe opacity. The input field I designated being faulty is the only one that has a percentage.

If it truly was agnostic, it would not be called letter-spacing, because in typography its called ‘tracking’ (not kerning, that’s for individual letters).

Almost everything in the screenshot is pixels.

The whole interface is based on pixels. The Rulers in Figma aren’t in CM’s or MM’s either, which would be a real drag for anyone using it to design a brochure, or print design.

So lets not pretend. Figma is mainly for web and thus in px and (r)ems.

PS: That’s why the fonts is also not in PT.

I am wondering why Figma seems to set letter-spacing on its own. Is there a reason the default on opening a new file isn’t 0? In fact, it would be nice to have a Figma preferences function such that all new files have the base settings for export and letter-spacing.

I was watching a figma tutorial … How on this video he can set up the letter-spacing in pixel?

Just add “px” after the numerical value.

True, but the request of my topic is to have it in PX as a default.

This is not intuitive at all to put % when it can be changed to px. At least show both options and let the user select the measurement. I’m currently transitioning from Sketch → Figma and I’m having to google every little thing. For a design program that is used to create products that should be intuitive…this program is not.

I’m very confused. I’m having to fix spacing in our Flutter project, which expects spacing in px. Yet in Figma, its saying 1% across all fields, under both the design and inspect tabs.

1% of what exactly? How do i transform this into pixels?

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.

What’s more annoying about this is that, if you set a number variable with a value of 0.02 and apply it to the letter spacing property, it will be applied as a pixel value. In other words, even though the default unit for letter spacing is indeed %, there’s no way to apply a percentage value to it as a variable.

I found the same problem, which makes trying to use letter spacing values as variables more complicated.

Since we can’t specify a variable in %, we’d have to use modes to set various px values if we’re also using modes for font size.

Thought I should also add in, this has been bugging for about a year now and I only just learnt that % is equal to em, which would’ve saved me a lot of trouble over the years as I’ve just been eye-balling it until now.

At the very least, they could add an optional setting to change the unit.

Hey All, thanks for the feedback and sorry for the lack of acknowledgment here!

We’ll pass this onto the team for future consideration.

The problem with using pixel for letter spacing is that it won’t scale for for different font sizes.

Ems and percentages are the same only written differently 5% is .05em, 10% is .1em.