Active Member

Letter-spacing should not be percentage based

Forum|Forum|5 years ago
April 25, 2021
28 replies
74880 views

The default settings (at least in my Figma) load a percentage for letter-spacing, but this is not allowed in CSS. For a less avid programmer this may be confusing, when trying to get it to work.

Either set the default to a px value, or add a warning inside the Inspect code

Share an idea

Show previous replies

Jader_Rubini

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.

Hoby-Van-Hoose

New Participant

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.

Tim_Chinye

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.

djv

Community Support

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

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

Alfred

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.

MakePixelsWorkAuthor

Active Member

In CSS, letter-spacing does not allow for the use of percentages. So the interface is using something that is not supported in the code. Having to do the translation to ems yourself is just bad UX.

On top of that, you can’t set the root (R)EM size in Figma.

EvanMacAlpine

New Participant

In CSS, letter-spacing does not allow for the use of percentages. So the interface is using something that is not supported in the code. Having to do the translation to ems yourself is just bad UX.

On top of that, you can’t set the root (R)EM size in Figma.

This is too narrow of an interpretation of the Figma use case. Not only are users building for multiple platforms, when it comes to building for larger product’s design system scalability and minimizing repetitive definitions is key. Relative units scale proportionally across multiple font sizes. Px values do not and require repetitive definitions to support multiple font sizes at a refined typographic standard. On top of this, relative values can be easily compiled to different units at a build step to support multiple platforms. Or if you want to keep it simple, Figma does that translation for you via the dev view.

The straight to pixels line of thinking for letter-spacing is the exact issue that is hamstringing letter-spacing variables when it comes to token generation, as documented here:

You can’t create a single defined minus10, base, plus10, etc. letterspacing scale with px. The variable definitions needed expand with every single font size you add to your scale.

Boris_Perisset

New Member

Figma’s letterspacing takes the precentage of the font-size in em.

Sign up

Login with SSO

Login to the community

Login with SSO