How to Control Letter Spacing in Logo Text with CSS letter-spacing

Apply the CSS letter-spacing property to the element that contains the live text, and set the value in em units so the spacing scales with the font size. A positive value such as 0.05em opens the spacing, a negative value tightens it, and the keyword normal returns to the font's default spacing. The property adds the same amount of space between every character, and it only affects live text. It has no effect on letters that have been converted to vector paths.

Tracking, kerning and what letter-spacing changes

Tracking is a uniform spacing adjustment applied across a range of characters. Kerning adjusts the space between specific letter pairs, such as A and V. Those pair adjustments usually come from a kerning table built into the font. CSS letter-spacing controls tracking only. A separate property, font-kerning, controls whether the browser applies the font's built-in kerning. Neither property lets you nudge a single pair of letters in a wordmark. Pair-level corrections belong in the vector artwork, or you can approximate one by wrapping a single character in its own element and spacing it individually.

Basic syntax

.wordmark {
  font-family: "Brand Sans", sans-serif;
  font-size: 2rem;
  letter-spacing: 0.05em;   /* open */
}

.wordmark--tight {
  letter-spacing: -0.02em;  /* tighten */
}

.wordmark--reset {
  letter-spacing: normal;   /* font default */
}

An em value is proportional to the element's font size, so the relative spacing stays the same when the text is resized. That makes em the closest match to how tracking works in design software. A px value stays fixed, so the spacing looks tighter at large sizes and looser at small ones. A rem value is relative to the root font size, not the text's own size. Negative values are valid, but if they are too strong the letterforms collide. The values in these examples show the syntax only. They are not recommended settings for any particular logo.

Converting tracking values from design files

Source | How the value is expressed | Conversion to CSS | Example

Adobe Illustrator tracking | Thousandths of an em | Divide by 1000 and use em | 50 becomes 0.05em; -25 becomes -0.025em

Figma letter spacing in % | Percentage of the font size | Divide by 100 and use em | 5% becomes 0.05em

Figma letter spacing in px | Fixed pixels at the design's font size | Use px, or divide by the font size in px for an em value | 1.6px at 32px becomes 0.05em

Step by step for a text-based logo or wordmark

• 1. Check whether the logo artwork uses live text or outlined paths. In an SVG file, text elements contain live type, and path elements mean the letters have been converted to shapes.
• 2. Get the approved tracking value from the brand guidelines or the master artwork file. If there is no documented value, record that gap rather than guessing.
• 3. Load the same typeface as a web font, and confirm that the font license covers web embedding.
• 4. Set font-size first, then set letter-spacing in em using the converted value.
• 5. If the text is centered, correct the trailing space described in the next section.
• 6. Compare the result against the master artwork at several sizes and in the browsers you need to support.

Correcting the trailing space when centering

Browsers commonly add the letter-spacing value after every character, including the last one. That extra space at the end shifts a tracked word slightly off center. One common fix is to add left padding equal to the letter-spacing value. Another is to set a negative right margin of the same amount.

.wordmark--centered {
  letter-spacing: 0.2em;
  padding-left: 0.2em;  /* balances the space after the last letter */
  text-align: center;
}

Side effects to check

• Ligatures: the CSS text specification directs browsers not to apply optional ligatures when letter-spacing is non-zero. A wordmark that depends on a ligature, such as a joined fi, may render differently.
• Inheritance: an em value is converted to an absolute length on the element where it is set, and child elements inherit that fixed length. If a child has a different font size, set letter-spacing on the child again.
• Fallback fonts: if the web font fails to load, the same tracking value is applied to a different typeface and the spacing will no longer match the artwork.
• All-caps settings: adding positive tracking to uppercase text is a common design convention, not a technical requirement. Follow the brand's documented value where one exists.

When CSS is the wrong tool for the logo itself

Master logo artwork usually has its type converted to outlines. This fixes the spacing in place and removes any dependence on fonts being installed or licensed. Because the letters are now shapes, CSS letter-spacing cannot change them. To adjust the spacing, edit the paths in a vector editor and export the file again. An SVG that still contains live text elements may respond to letter-spacing, but text rendering differs across browsers and tools, so test it before relying on it. Outlined artwork is the more predictable deliverable, and CSS tracking suits live text set to accompany or approximate a wordmark. A .svg extension does not prove a file contains only vectors, since it can embed raster images. It also does not grant permission to alter the logo. Changing a logo's spacing may be restricted by the brand guidelines or the owner of the mark.

Verifying the result

Export the master artwork at the same size as the rendered text, then place a screenshot of the CSS version over it to compare letter positions and overall width. Repeat the check at the smallest size the logo will be shown, in each target browser, and on both standard and high-density screens. Small differences can come from font rendering rather than from the tracking value.

Gaps in this guide

No brand-specific tracking values or measured browser rendering data were available for this guide. The numbers shown here illustrate syntax and unit conversion only. Confirm the correct values for a particular logo from its brand guidelines or master artwork.