Tailwind CSS - Letter Spacing

Modern Tailwind CSS: Typography and Letter Spacing

Letter spacing, known as tracking in typography, is the uniform adjustment of space between all characters in a block of text. Tailwind’s tracking-* utilities provide an easy and consistent way to control this property, significantly impacting your design’s readability and aesthetic appeal.

Letter Spacing (Tracking) Utilities

Tailwind includes a set of default tracking utilities that range from tighter to looser spacing.

Class	CSS Property	Effect
tracking-tighter	letter-spacing: -0.05em;	Reduces space
tracking-tight	letter-spacing: -0.025em;	Slightly reduces space
tracking-normal	letter-spacing: 0em;	Default, no change
tracking-wide	letter-spacing: 0.025em;	Slightly increases space
tracking-wider	letter-spacing: 0.05em;	Increases space
tracking-widest	letter-spacing: 0.1em;	Greatly increases space

Practical Examples

To follow these examples, ensure you have a modern Tailwind CSS project set up. See the setup guide in other chapters for instructions.

Example 1: Enhancing Headings

Adjusting letter spacing is a common technique for refining headings. Large, bold headings often look better with slightly tighter tracking, while uppercase or small-cap headings can be enhanced with wider tracking for a more elegant, airy feel.

<link href="/dist/output.css" rel="stylesheet">

<body class="font-sans p-8 bg-gray-50">
  <!-- Tighter tracking for a strong, compact heading -->
  <h1 class="text-4xl font-bold tracking-tighter text-gray-900">
    The Modern Web Stack
  </h1>

  <!-- Wider tracking for an elegant, uppercase subheading -->
  <p class="text-lg uppercase text-indigo-600 font-semibold tracking-widest mt-2">
    A Developer's Guide
  </p>

  <!-- Normal tracking for readable body text -->
  <p class="mt-4 max-w-prose tracking-normal text-gray-700">
    This guide explores the powerful combination of frameworks and tools that define modern application development. Proper typography, including letter spacing, is key to a professional user experience.
  </p>
</body>

Responsive and State-Based Tracking

Like most Tailwind utilities, you can apply tracking classes conditionally for different screen sizes or states like hover.

<link href="/dist/output.css" rel="stylesheet">

<div class="p-8">
  <a href="#"
    class="
      text-lg font-semibold text-blue-600
      tracking-wide
      hover:tracking-widest
      transition-all duration-300">
    Hover me to see tracking change
  </a>

  <p class="mt-4 text-base tracking-normal md:tracking-wide">
    This text has normal tracking on mobile, but wider tracking on larger screens.
  </p>
</div>

Advanced: Arbitrary Values & Customization

Using Arbitrary Values

If the default utilities aren’t precise enough, you can use Tailwind’s square bracket notation to generate a class with any value on the fly. This is a powerful feature of the Just-In-Time (JIT) engine, which is standard in Tailwind CSS v3+.

<!-- Create a class for a very specific tracking value -->
<p class="tracking-[-0.015em]">
  This text has custom, slightly negative tracking.
</p>

<p class="tracking-[.25em]">
  This text has extremely wide tracking.
</p>

Customizing Your Theme

For values you reuse often, it’s best to add them to your tailwind.config.js file. This keeps your design system consistent.

tailwind.config.js

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {
      letterSpacing: {
        'extra-loose': '.2em',
        'super-tight': '-0.075em',
      }
    },
  },
  plugins: [],
}

Headline

Accessibility & Readability

While adjusting letter spacing is a great design tool, be mindful of readability. Extreme values—both tight and loose—can make text difficult to read, especially for long paragraphs and for users with visual impairments. Reserve dramatic tracking for headings or short decorative text, and use more subtle values for body copy.