Letter Spacing Converter (Figma & Adobe to CSS)

About the Letter Spacing Converter (Figma & Adobe to CSS)

Design files and stylesheets measure letter spacing in different units. Adobe InDesign, Illustrator and Photoshop use tracking in thousandths of an em, Figma uses a percentage of the font size or pixels, and CSS wants em, px or rem. Enter the value from the design and the font size, and the converter shows it in every unit at once — with ready-to-paste code for CSS, Tailwind CSS, SwiftUI, Android, Jetpack Compose, Flutter and React Native.

Line height gets the same treatment: Figma’s 150%, a fixed 24px and CSS’s unitless 1.5 are converted into each other, and a live preview shows the text with your spacing so you can check it before handing it over.

Common uses

• Turning tracking values from an InDesign or Illustrator brand guide into CSS for a website.
• Copying Figma text styles into code, design tokens or a Tailwind theme without guessing.
• Giving iOS, Android and Flutter developers the right unit for each platform from one design value.
• Checking what a line height of 140% means in pixels for a baseline grid.

The formulas

• Adobe tracking is measured in thousandths of an em (the InDesign scripting reference defines tracking that way), so em = tracking ÷ 1000. Figma’s own help gives the same rule: letter spacing = tracking / 1000.
• Figma % is a percentage of the font size: em = % ÷ 100, so 5% is 0.05em.
• px = em × font size, and rem = px ÷ root font size.
• Line height: a unitless number or em multiplies the font size, % is that number × 100, and px = number × font size. Figma’s percentage line height is also a percentage of the font size.

Percentages in CSS

CSS Text Level 3 only allows normal or a length for letter-spacing. CSS Text Level 4 adds percentages of the font size — the same meaning as Figma’s percent — and current Chromium, Firefox and WebKit engines accept letter-spacing: 5%. Browsers that only implement Level 3 drop the whole declaration, so 0.05em remains the safe way to write it.

Where browsers put the spacing

The CSS Text specifications place half of the spacing on each side of a letter and none at the start or end of a line. In our tests with current Chromium, Firefox and WebKit engines, the browsers add the whole amount after every letter instead, including the last one — so a 10px spacing makes “abc” 30px wider, not 20px. Centred or right-aligned text with wide spacing therefore sits slightly to the left. To balance it, add margin-right equal to minus the spacing (margin-right: -0.1em for letter-spacing: 0.1em), or the same amount as padding-left.

Unitless, % or px line height?

In CSS a unitless line height is inherited as a number, so every child element multiplies it by its own font size. A percentage or em is turned into a fixed length on the element that sets it, and children inherit that length — a small caption inside a line-height: 150% paragraph keeps the paragraph’s pixels (CSS 2.1 line-height). That is why unitless values are recommended. In both CSS and Figma the extra space is shared equally above and below the text.

Units on other platforms

• Android: android:letterSpacing is in em (TextView)), so it takes the same number as CSS em; android:lineHeight takes a dimension such as 24sp.
• SwiftUI: .tracking() adds points after each character) — the px value at 1×.
• Flutter: letterSpacing is in logical pixels, and height is a multiple of the font size like unitless CSS.
• React Native: letterSpacing and lineHeight (Text style props) are plain numbers, and React Native dimensions are density-independent pixels.
• Tailwind CSS: the named tracking utilities are em values (tracking-wider is 0.05em); anything else becomes an arbitrary value such as tracking-[0.03em]. leading-6 is a fixed 1.5rem, not a multiplier (line height).

Limitations

• Figma’s “Auto” line height and CSS line-height: normal come from the font’s own metrics, so they have no fixed value to convert. Switch the line height to px in Figma to read the number.
• Kerning set by hand between two letters (and Adobe’s optical kerning) is not part of tracking and is not converted.
• The preview uses fonts installed on your device; the exact look depends on the font and the browser.
• Results are rounded to four decimals for em, rem and unitless values and to three for pixels.

Privacy

Everything happens in your browser. What you enter or open here is not uploaded or stored by MySmartCoPilot.