Skip to main content
MakePixelsWork
MakePixelsWork
Active Member
Apr 25, 2021 10:39 AM UTC

Letter-spacing should not be percentage based

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

image

    28 replies

    Show previous replies
    Jader_Rubini
    Jader_Rubini
    Apr 23, 2024 2:11 PM UTC

    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
      Hoby-Van-Hoose
      New Participant
      Apr 25, 2024 6:55 PM UTC

      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
      Tim_Chinye
      Jul 22, 2024 6:42 PM UTC

      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
        Figmate
        djv
        Community Support
        Jul 22, 2024 11:18 PM UTC

        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
          Alfred
          Oct 30, 2024 6:51 PM UTC

          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.

            MakePixelsWork
            MakePixelsWorkAuthor
            Active Member
            Dec 5, 2024 9:20 AM UTC

            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
              EvanMacAlpine
              New Participant
              Sep 10, 2026 4:06 PM UTC

              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
              Boris_Perisset
              New Member
              Mar 26, 2026 8:26 AM UTC

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

               

                Terms & ConditionsAccessibility statement