Letter Spacing in Figma: Setting and Checking Tracking for Logo Text

In Figma, letter spacing (tracking) is a property of live text layers. You set it in the Text section of the Design panel, as a percentage of the font size or as a fixed pixel value. For logo work, the key question is whether the wordmark you are editing is still live text. If it has already been converted to vector paths, there is no letter spacing field to change. Spacing then has to be adjusted by moving the letter shapes themselves.

Scope and gaps: no specific file, font or spacing values were supplied with this question. This article covers how the setting works and the order in which to check things. It does not recommend particular tracking values for any logo.

Where the letter spacing setting lives

• Select the text layer, or highlight only the characters you want to change inside it.
• In the right-hand Design panel, find the Text section with the font family, weight, size, line height and letter spacing fields.
• Enter a value in the letter spacing field. A percentage is relative to the font size. A pixel value stays fixed regardless of font size.
• Negative values tighten the spacing and positive values loosen it. Zero leaves the font's own default spacing and built-in kerning unchanged.

Percent or pixels: why it matters for a logo

A logo is reproduced at many sizes, so the unit affects how consistent the spacing stays. Percentage spacing is tied to font size. When the font size changes, the spacing keeps the same proportion. Pixel spacing is an absolute amount. If you change the font size directly in the panel, a pixel value that looked right at one size can look too tight or too loose at another. Percentages are usually easier to keep consistent while a wordmark is still being edited as text. Spacing stops being a text setting once the lettering is outlined.

Tracking a whole word versus adjusting single pairs

Applying letter spacing to the whole layer changes the overall tracking evenly. Selecting a range of characters and changing the value affects only that range. This is the usual way to correct individual letter pairs in a wordmark. If the field shows "Mixed", the selected text contains more than one spacing value. That is expected after pair adjustments, but it also shows the spacing is no longer uniform. Pay particular attention to the last character. Trailing spacing can make the text box wider than the visible letters, which can shift alignment or centering. Check whether the box width matches the visible letters before aligning the wordmark with a symbol.

Why the letter spacing setting may seem not to work

Work through these checks in order. The earlier ones rule out the most fundamental causes.

Check | What to look for | What it means

1) Layer type | Does the layer show a text icon in the Layers panel, or a vector/shape icon? | A vector layer is outlined lettering. Letter spacing no longer applies, and letters must be moved as shapes.

2) Selection | Is the whole layer selected, or a character range inside it? Does the field read "Mixed"? | You may be changing only part of the text, or seeing several existing values.

3) Text style | Is a shared text style applied to the layer? | The style may define letter spacing. Edit the style, or detach it if this instance should differ.

4) Component instance | Is the text inside a component instance? | Changes are overrides. Editing the main component can change all instances, and resetting overrides reverts your edit.

5) Font availability | Is the font flagged as missing or substituted? | A substituted font has different glyph widths and kerning, so spacing will not match the original design.

6) Size of the change | Is the value very small relative to the font size, especially in pixels? | The change may be real but hard to see at the current zoom level.

7) Group or frame scaling | Has the wordmark been scaled as part of a group or frame? | Check the resulting font size and spacing values on the text layer itself, rather than assuming they scaled as expected.

File properties versus visual judgment

Some things can be read directly from the file, and others require visual judgment. Observable properties include the layer type, the font family and weight, the numeric letter spacing value or a "Mixed" state, whether a text style or component is applied, and whether a layer is a vector or an embedded image. Whether the spacing looks even, balanced or right for the brand is a visual judgment. Equal numeric spacing does not guarantee spacing that looks even, because letter shapes such as round, straight and diagonal forms create different amounts of visual space. Record the numbers for reproducibility, and judge the result at the actual sizes where the logo will appear.

Outlining the wordmark and exporting

Converting text to outlines turns the letters into vector paths. In Figma you do this with the Outline stroke command on a text layer. After that, the letter spacing value is fixed into the position of each shape and can no longer be edited as a setting. Keep an unoutlined copy of the live text so tracking can be revisited later. When exporting SVG, Figma's export settings include an option to outline text. If text is not outlined, the file contains text elements with spacing attributes, and how it renders depends on whether the viewing environment has the same font. If text is outlined, the file contains paths, and the spacing is fixed regardless of fonts.

<!-- Live text in an SVG: spacing depends on font rendering -->
<text font-family="…" letter-spacing="…">WORDMARK</text>

<!-- Outlined text in an SVG: spacing is fixed in the geometry -->
<path d="…" />

An .svg extension or a sharp preview does not prove a logo is fully vector. An SVG can contain live text, outlined paths, embedded raster images, or a mix. Inspect the layers in Figma, or the elements in the exported file, to confirm which ones are present.

Before you change someone else's logo

Being able to open and edit a logo file in Figma does not mean you are permitted to change it. Adjusting the tracking of an established wordmark alters the mark itself. Check the brand guidelines or confirm with the logo's owner before publishing a respaced version.

When further inspection is needed

If the steps above do not explain the behavior, you need more context. That includes the file itself, the layer structure, the font in use, any applied styles or components, and how the logo is exported and where it is displayed. Spacing that looks correct in Figma but different elsewhere usually points to font substitution or text that was exported without being outlined. Compare the exported file's elements against the Figma layers to locate the difference.