logoredraws.com

Bootstrap letter spacing

Bootstrap has no built-in letter-spacing utility. Learn how to set tracking with CSS or the Sass utilities API, and why it only affects logos built from live text.

Published

Contents
  1. The short answer
  2. Order of checks
  3. Setting tracking on live text with CSS
  4. Adding a reusable utility through Sass
  5. SVG logos: text elements versus paths
  6. Measurable values versus visual judgment
  7. Before changing a logo's spacing
  8. Missing information

The short answer

Bootstrap's standard utility set does not include a letter-spacing class. Tracking is set with the ordinary CSS letter-spacing property, either in a custom stylesheet or through a utility you add with Bootstrap's Sass utilities API. Confirm this against the documentation for the Bootstrap version your project uses, because the version was not specified.

For a logo, whether CSS can change the spacing depends on how the logo is built. CSS letter-spacing affects live text, including SVG text elements placed inline in the page. It has no effect on lettering that has been converted to vector paths, on an SVG loaded as an image, or on a raster image. If spacing will not change, the cause is usually how the logo is embedded, not Bootstrap.

Order of checks

  • 1. Inspect the brand element, usually .navbar-brand, in the browser's developer tools. Determine whether the wordmark is HTML text, an inline svg element, an img element, or a CSS background image.
  • 2. If it is HTML text, check the computed letter-spacing value and look for theme rules that override yours. Also check whether the intended font actually loaded, since a fallback font changes both letterforms and spacing.
  • 3. If it is inline SVG, read the markup. Lettering in text or tspan elements is live text. Lettering in path elements is fixed geometry. Image elements, often with base64 data, are embedded raster content.
  • 4. If an img element or background image points to an SVG file, page CSS cannot reach inside it. Either edit the file or inline the SVG markup.
  • 5. If the logo is a PNG, JPG or other raster format, its spacing is fixed in the pixels. Changing it requires the source artwork.

A .svg extension or a sharp preview does not prove that a logo is vector-built or that its text is editable. Only the file's contents show whether it uses paths, live text or embedded raster images.

Setting tracking on live text with CSS

When the wordmark is real text, apply letter-spacing to the brand element in a stylesheet loaded after Bootstrap. Use a selector specific enough to win over any theme rules.

.navbar-brand {
  letter-spacing: 0.05em; /* placeholder value: adjust visually */
}

The value above is only a placeholder; no recommended figure was supplied. Em units scale the spacing with the font size, so the proportion holds across responsive sizes. Negative values tighten the text, and the keyword normal restores the font's default spacing.

Browsers typically add the extra space after every character, including the last one. This can make widely tracked text look off-center inside its container, so check alignment after changing the value.

Adding a reusable utility through Sass

If you compile Bootstrap 5 from source, you can add letter-spacing classes by merging an entry into the $utilities map before the utilities API is imported. The class names and values below are illustrative placeholders.

@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.1em
      )
    )
  )
);

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

This generates classes such as ls-wide. The exact set of import files differs between Bootstrap versions; for example, variables-dark exists only in recent 5.x releases. Match the imports to the version you have installed.

SVG logos: text elements versus paths

In inline SVG, text and tspan elements can take letter-spacing as a CSS property or as an attribute. Browser support for letter-spacing on SVG text has varied, so test in the browsers you target. Live SVG text also depends on the font being available to the browser; a missing font produces fallback glyphs and different spacing. This dependency is a common reason logos are delivered with the lettering outlined.

When the letters are paths, the spacing is part of the geometry. Changing it means moving the individual glyph shapes in a vector editor and re-exporting, not writing CSS.

Measurable values versus visual judgment

Some properties can be checked directly. These include the computed letter-spacing value, the loaded font, and whether glyphs are text or paths. Whether the tracking looks right is a visual judgment that depends on the typeface, letter case, size and surrounding layout.

A single letter-spacing value adds the same space between every pair of letters. It cannot reproduce pair-by-pair kerning a designer may have built into the logo artwork. If an outlined logo and a live-text version look different, that difference is expected and does not indicate an error in Bootstrap.

Before changing a logo's spacing

Having access to a logo file does not grant permission to alter it. If the wordmark belongs to a brand with usage guidelines, check those guidelines or ask the brand owner before adjusting tracking. This applies even when the change is only made in CSS.

Missing information

No subject-specific evidence was supplied. The Bootstrap version, how the logo is embedded, the current spacing values and any brand guidelines are all unknown, so this article cannot recommend a specific tracking value. Running the checks above identifies which case applies: CSS, an edit to the SVG source, or a request for the original artwork.