> ## Documentation Index
> Fetch the complete documentation index at: https://skelementorcss.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Letter Spacing

> Control tracking with `.tracking-*` utilities that tighten or loosen character spacing.

export const LetterSpacingDemo = () => {
  const tracks = [{
    cls: "tracking-tight",
    val: "-0.025em"
  }, {
    cls: "tracking-normal",
    val: "0em"
  }, {
    cls: "tracking-wider",
    val: "0.05em"
  }];
  return <div className="not-prose my-6">
      <div className="tw-demo space-y-8">
        {tracks.map(t => <div key={t.cls}>
            <span className="tw-label">{t.cls}</span>
            <div style={{
    letterSpacing: t.val,
    fontSize: "1.125rem",
    lineHeight: 1.5,
    fontWeight: 500,
    color: "var(--demo-fg)"
  }}>The quick brown fox jumps over the lazy dog.</div>
          </div>)}
      </div>
    </div>;
};

## Overview

Use `tracking-*` classes to tighten or open text without changing the font size.

| Class                   | CSS                         | Effect                       |
| ----------------------- | --------------------------- | ---------------------------- |
| `.tracking-tightest`    | `letter-spacing: -0.1em;`   | Ultra-condensed for logos    |
| `.tracking-extra-tight` | `letter-spacing: -0.075em;` | Tight headings               |
| `.tracking-tighter`     | `letter-spacing: -0.05em;`  | Compact subheads             |
| `.tracking-tight`       | `letter-spacing: -0.025em;` | Slightly condensed body copy |
| `.tracking-normal`      | `letter-spacing: 0em;`      | Default spacing              |
| `.tracking-wide`        | `letter-spacing: 0.025em;`  | Labels and uppercase text    |
| `.tracking-wider`       | `letter-spacing: 0.05em;`   | Buttons and navigation       |
| `.tracking-widest`      | `letter-spacing: 0.1em;`    | Section labels               |
| `.tracking-extra-wide`  | `letter-spacing: 0.15em;`   | Display typography           |
| `.tracking-ultra-wide`  | `letter-spacing: 0.2em;`    | Dramatic headlines           |

## Example

<LetterSpacingDemo />

```html theme={null}
<div class="elementor-element text-center">
  <p class="uppercase text-sm tracking-widest text-gray margin-bottom-2">
    Changelog
  </p>
  <h1 class="text-5xl font-black tracking-tightest text-black margin-bottom-4">
    Unified bundled framework
  </h1>
  <button class="button-primary button-lg tracking-wide uppercase">
    Read the release notes
  </button>
</div>
```

<Tip>
  Tracking compounds with uppercase transforms. Start at `.tracking-wide` for `.uppercase` text so characters do not feel cramped.
</Tip>