logoredraws.com

Letter Spacing in Bootstrap: How to Control Tracking for Logos and Brand Text

Bootstrap has no built-in letter-spacing utility. Learn how to add one, why it may not affect your logo, and what to check in the logo file first.

Published

Contents
  1. The short answer
  2. Step 1: Identify what the logo actually is
  3. Step 2: Apply letter-spacing to live text
  4. Step 3: Optionally, add a reusable utility class
  5. Step 4: If the change still doesn't show, check these in order
  6. When the logo itself has to change

The short answer

Bootstrap's standard text utilities in versions 4 and 5 do not include a letter-spacing class. To adjust tracking, use the CSS letter-spacing property, either in your own stylesheet or as a custom utility built with Bootstrap's Sass utility API. For a logo, whether that adjustment has any effect depends on how the logo is built. CSS letter-spacing changes live text. It cannot change letters that have been converted to vector paths or letters inside a raster image.

No specific Bootstrap version, logo file or markup was supplied for this article. The steps below are general. Confirm the exact Sass imports against the documentation for your Bootstrap version, and inspect your actual logo file before you decide where the fix belongs.

Step 1: Identify what the logo actually is

Most cases of letter-spacing having no visible effect on a logo come from this step. A sharp preview or an .svg extension does not prove the lettering is editable vector text. Check the construction directly:

  • HTML text, for example a brand name inside .navbar-brand: letter-spacing applies directly.
  • Inline SVG with <text> elements: the lettering is live text. CSS letter-spacing, or the SVG letter-spacing attribute, can affect it. Rendering can differ between browsers, so test in each target browser.
  • Inline SVG where the letters are <path> elements: the spacing is part of the geometry. CSS cannot retrack it. The paths must be edited in a vector editor.
  • SVG loaded through <img> or as a CSS background: page styles do not reach inside the file, even if the file contains live text.
  • SVG containing an <image> element, often with base64 data: part or all of the artwork is embedded raster content and is not vector lettering.
  • PNG, JPG or WebP: raster. Spacing is fixed in the pixels.

To tell these apart, open the SVG in a text editor and search for <text>, <path> and <image>. Alternatively, inspect the element in your browser's developer tools. Font names, character data and text elements are observable file properties. Whether the resulting spacing looks right is a separate visual judgment.

Step 2: Apply letter-spacing to live text

If the brand text is live HTML or inline SVG text, the simplest approach is a targeted rule in a stylesheet that loads after Bootstrap. The value below is a placeholder, not a recommendation.

.navbar-brand {
  letter-spacing: 0.05em; /* placeholder: tune to the typeface */
}

Em units scale the spacing with the font size, so the proportion stays consistent across breakpoints. Pixel values stay fixed and can look tight at large sizes or loose at small ones.

Step 3: Optionally, add a reusable utility class

If you compile Bootstrap from Sass, you can extend the utility API to generate letter-spacing classes. The import list below follows the Bootstrap 5.3 pattern. Earlier 5.x releases differ, for example by not having the variables-dark partial. The class names and values are illustrative.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "letter-spacing": (
      property: letter-spacing,
      class: ls,
      values: (
        tight: -0.02em,
        normal: normal,
        wide: 0.05em
      )
    )
  )
);

@import "bootstrap/scss/utilities/api";

This generates classes such as .ls-tight, .ls-normal and .ls-wide. If you use the precompiled CSS from a CDN instead, the utility API is not available. Write the classes by hand in your own stylesheet.

Step 4: If the change still doesn't show, check these in order

  • Computed style: in developer tools, confirm the letter-spacing value on the element that holds the text. A more specific selector or a later stylesheet may override it.
  • Target element: letter-spacing is inherited, but a child element with its own value will ignore the parent's setting.
  • Font loading: if the brand webfont fails to load, the fallback font has different glyph widths. The spacing can look wrong even though the CSS is correct.
  • Text transform: uppercase lettering, for example from .text-uppercase, usually needs different tracking than mixed case, so recheck after changing case.
  • Centering: browsers typically add the spacing after every character, including the last. This can push centered or tightly aligned text slightly off center.
  • Negative values: tight tracking can make glyphs touch or overlap. Check the result at the smallest size the logo will appear.

When the logo itself has to change

If the lettering is outlined paths or raster content, the spacing has to be changed in the source artwork, ideally the master vector file. CSS cannot do it. Before editing, check whether you are permitted to. Having a copy of a logo file does not grant the right to modify it. Many brands specify tracking in their guidelines, so confirm with the brand owner or the guidelines before you retrack an established mark.