logoredraws.com

How to Set Letter-Spacing in CSS and Choose the Right Units

How CSS letter-spacing works for logo wordmarks, which units scale correctly, how to convert design-tool tracking values, and when CSS cannot change a logo's spacing at all.

Published

Contents
  1. The short answer
  2. What letter-spacing does
  3. Choosing letter-spacing units
  4. Converting tracking values from design tools
  5. Caveats that affect wordmarks
  6. First check whether the logo is live text
  7. Order of checks
  8. Permission and brand standards
  9. What this guide cannot settle

The short answer

The CSS letter-spacing property controls tracking. For a wordmark, heading or any text whose size may change, express the value in em. An em value is relative to the element's own font size, so the spacing keeps the same proportion when the text is scaled. This only works when the logo is live text rendered by the browser, either HTML text or SVG text elements. If the letters have been converted to outlined paths or are part of an embedded raster image, letter-spacing has no effect, and the spacing has to be changed in the source artwork.

.wordmark {
  font-size: 3rem;
  letter-spacing: 0.08em; /* scales with font-size */
}

What letter-spacing does

letter-spacing adds space between characters on top of the spacing and kerning already built into the font. A negative value removes space. It does not replace kerning. It shifts every character gap by the same amount, so tight or loose pairs that come from the font's design stay relatively tight or loose.

  • Accepted values: the keyword normal, or a length. Negative lengths are allowed.
  • normal uses the font's default spacing and lets the browser adjust spacing for justification. 0 also adds no extra spacing, but it is an explicit value.
  • The property is inherited by child elements.
  • Browsers typically add the spacing after each character, including the last one in the line.

Choosing letter-spacing units

Unit | Relative to | When the font size changes | Suitable for
em | The element's own font size | Spacing scales proportionally | Wordmarks, headings, responsive or fluid type
rem | The root element's font size | Follows the root size, not the element's size | Spacing that should stay uniform across differently sized text
px | Nothing (fixed length) | Spacing stays the same, so the proportion changes | Text rendered at one known, fixed size
ch, ex | Measurements of the current font | Scales with the font, but the base differs from font to font | Rarely needed for tracking

em is the most predictable choice for logo tracking. Design tools define tracking as a fraction of the font size, and em matches that model directly. A px value that looks correct at one size will appear too loose when the text shrinks and too tight when it grows. Newer drafts of the CSS Text specification also allow percentage values. Check current browser support before relying on percentages, because MDN and the browser compatibility tables are the authority on that, not this guide.

Converting tracking values from design tools

Tracking in Adobe Illustrator and InDesign is measured in thousandths of an em, so divide the value by 1000 to get an em value. Figma expresses letter spacing as a percentage of font size by default, so divide by 100. If a spec gives a fixed pixel value, divide it by the font size it was measured at.

/* Illustrator / InDesign tracking 80  ->  80 / 1000 */
letter-spacing: 0.08em;

/* Figma letter spacing 5%  ->  5 / 100 */
letter-spacing: 0.05em;

/* 2px measured at a 40px font size  ->  2 / 40 */
letter-spacing: 0.05em;

A converted value reproduces the design only when the same font file, weight and kerning settings are used. Text rendering also differs between applications and browsers. The numeric conversion is something you can verify exactly. Whether the result matches the approved artwork is a visual judgment, so compare the output against the reference at the sizes where the logo will actually appear.

Caveats that affect wordmarks

  • Inheritance uses the computed length. An em value becomes an absolute length on the element where it is declared, and children inherit that length rather than the ratio. A smaller tagline inside a logo container will inherit spacing that is proportionally too wide unless you declare letter-spacing on the tagline again.
  • Trailing space. Spacing is added after the last character, so centered text sits slightly left of center. Offset this with a negative margin or with matching padding on the opposite side.
  • Ligatures. Browsers may turn off optional ligatures when letter-spacing is not zero, which can change how specific letter pairs look.
  • Connected scripts. Adding spacing to scripts whose letters join, such as Arabic, can break the connections between letters.
  • Font fallback. If the intended web font fails to load, the tracking is applied to a substitute font, and the overall width and appearance will differ.
.logo {
  font-size: 32px;
  letter-spacing: 0.1em;   /* computes to 3.2px */
  margin-right: -0.1em;    /* cancels the trailing space when centered */
}

.logo .tagline {
  font-size: 12px;
  letter-spacing: 0.1em;   /* restated; otherwise it inherits 3.2px */
}

First check whether the logo is live text

The file type does not tell you whether CSS can adjust a logo's tracking. An .svg extension or a sharp preview does not prove that the file contains vector shapes, much less live text. An SVG can contain editable text, letters outlined into paths, an embedded bitmap, or a mix of these. Open the file in a text editor or inspect it in browser developer tools, and look at the elements it actually contains.

What the file contains | Observable sign | Can letter-spacing change it?
Live SVG text | text or tspan elements with readable characters | Yes, if the referenced font is available
Outlined lettering | path elements and no readable text content | No; edit the outlines in a vector editor
Embedded raster | an image element, often with base64 data | No; the letters are pixels
HTML text styled as a logo | Text nodes in the page markup | Yes
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 80">
  <text x="0" y="60" font-size="48" letter-spacing="0.05em">BRAND</text>
</svg>

Outlining text is common for logos because the result no longer depends on a font being installed. The tradeoff is that the spacing is fixed into the geometry. Live SVG text keeps its spacing editable, but it renders correctly only when the intended font is installed, embedded or loaded.

Order of checks

  • 1. Confirm you have permission to change the logo's typography.
  • 2. Inspect the file or markup to find out whether the letters are live text, outlined paths or embedded raster.
  • 3. If the letters are not live text, stop using CSS and edit the source artwork instead.
  • 4. Confirm the correct font and weight load; check computed styles or the fonts panel in developer tools.
  • 5. Convert the specified tracking to em and apply it to the element that sets the font size.
  • 6. Check child elements for inherited spacing, and compensate for the trailing space if the logo is centered.
  • 7. Compare the result visually against the approved artwork at every size the logo will be shown.

Permission and brand standards

Having a logo file, or being able to edit its markup, does not grant the right to change it. Tracking is often part of a brand's specification. Before changing the spacing on a logo you do not own, check the brand guidelines or ask the rights holder.

What this guide cannot settle

No specific logo, font, brand specification or target value was provided, so this guide cannot recommend a particular tracking number. The correct value comes from the approved artwork or brand guidelines. It then needs to be checked visually in the browsers and at the sizes you are targeting.