Letter Spacing

Controls the spacing between letters (characters) in text. Letter spacing can enhance readability, create a more modern look, or add emphasis to specific text elements. Tailwind provides utilities for adjusting letter spacing from tighter to looser settings. In Tailwind v4, letter spacing utilities are optimized for variable fonts and better integration with custom typefaces.

Typography1 variant4 examples

Official Docs Open Playground

Basic usage:

<p class="tracking-tight">Tight letter spacing</p>
<p class="tracking-normal">Normal letter spacing</p>
<p class="tracking-wide">Wide letter spacing</p>

Examples

Different letter spacing options

<p class="tracking-tight">Tight letter spacing</p>
<p class="tracking-normal">Normal letter spacing</p>
<p class="tracking-wide">Wide letter spacing</p>

Edit in playground

Letter spacing used in a modern card design

<!-- Letter spacing in a modern card design -->
<div class="max-w-sm mx-auto bg-white rounded-lg shadow-md overflow-hidden">
  <div class="bg-blue-600 p-6 text-white">
    <h2 class="text-2xl font-bold mb-2 tracking-wide">Modern Card Design</h2>
    <p class="text-lg font-medium tracking-normal italic">Subtitle with normal tracking and italic style</p>
  </div>
  <div class="p-6">
    <p>This card uses different letter spacings to create a clear hierarchy.</p>
    <button class="mt-4 px-4 py-2 bg-blue-600 text-white rounded-lg font-semibold">
      Call to Action
    </button>
  </div>
</div>

Edit in playground

Responsive typography with varying letter spacing

<!-- Responsive typography with varying letter spacing -->
<h1 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-4 tracking-tight">
  Responsive Heading
</h1>
<p class="text-base md:text-lg lg:text-xl font-normal mb-4 tracking-normal">
  This paragraph uses normal letter spacing, but you can adjust it based on screen size.
</p>
<p class="text-sm md:text-base lg:text-lg font-semibold tracking-wide">
  This text has wide letter spacing and adjusts size responsively.
</p>

Edit in playground

Letter spacing used in a modern interface

<!-- Letter spacing in a modern interface -->
<div class="max-w-lg mx-auto bg-white rounded-lg shadow-md overflow-hidden">
  <div class="bg-gradient-to-r from-purple-500 to-blue-500 p-8 text-white">
    <h2 class="text-2xl font-extrabold mb-4 tracking-tight">Dashboard Overview</h2>
    <p class="font-semibold tracking-normal">Welcome back to your analytics dashboard</p>
  </div>
  <div class="p-6">
    <div class="mb-6">
      <h3 class="text-lg font-semibold mb-2 tracking-wide">Statistics</h3>
      <div class="grid grid-cols-3 gap-4 text-center">
        <div>
          <p class="font-bold text-xl tracking-tight">1,234</p>
          <p class="font-normal text-sm text-gray-600 tracking-normal">Views</p>
        </div>
        <div>
          <p class="font-bold text-xl tracking-tight">$5,678</p>
          <p class="font-normal text-sm text-gray-600 tracking-normal">Revenue</p>
        </div>
        <div>
          <p class="font-bold text-xl tracking-tight">90%</p>
          <p class="font-normal text-sm text-gray-600 tracking-normal">Satisfaction</p>
        </div>
      </div>
    </div>
    <div>
      <h3 class="text-lg font-semibold mb-2 tracking-wide">Recent Activity</h3>
      <div class="text-sm space-y-2">
        <p class="font-normal tracking-normal">New comment on your post</p>
        <p class="font-normal tracking-normal">Invoice #12345 paid</p>
        <p class="font-normal tracking-normal">New subscriber to your newsletter</p>
      </div>
    </div>
  </div>
</div>

Edit in playground