Font Size, Weight, and Line Height Utilities

Tailwind provides a complete typographic scale through utility classes covering font size, weight, line height, letter spacing, and font family. Font sizes range from text-xs (0.75rem) through text-9xl (8rem), each paired with a default line height that maintains readability. You can override line height independently with leading-none, leading-tight, leading-snug, leading-normal, leading-relaxed, and leading-loose. Font weight utilities from font-thin (100) through font-black (900) map directly to the CSS font-weight scale. The most used values are font-normal (400), font-medium (500), font-semibold (600), and font-bold (700). For display headings and hero sections, font-extrabold (800) and font-black (900) add visual impact. These utilities work with any font that provides the corresponding weight variants. Letter spacing (tracking-tighter, tracking-tight, tracking-normal, tracking-wide, tracking-wider, tracking-widest) helps with brand typography and readability. Wide tracking on uppercase text (uppercase tracking-widest text-xs) is a classic technique for labels, badges, and section headers. Font family utilities (font-sans, font-serif, font-mono) swap the entire font stack and can be customised in tailwind.config.js to use your brand fonts.

Example

<!-- Complete typographic hierarchy example -->
<article class="max-w-2xl mx-auto px-4 py-8 space-y-4">

  <!-- Overline / category label -->
  <p class="text-xs font-semibold uppercase tracking-widest text-blue-600">
    Tutorial
  </p>

  <!-- Hero heading -->
  <h1 class="text-4xl lg:text-5xl font-extrabold leading-tight text-gray-900">
    Mastering Tailwind CSS Typography
  </h1>

  <!-- Subtitle / lead -->
  <p class="text-xl text-gray-500 leading-relaxed font-light">
    A comprehensive guide to building beautiful typographic layouts
    using Tailwind's utility classes.
  </p>

  <!-- Divider -->
  <hr class="border-gray-200" />

  <!-- Body copy -->
  <p class="text-base text-gray-700 leading-7">
    Tailwind ships a carefully tuned type scale. Each step on the scale
    is designed to pair well with the spacing and sizing values throughout
    the rest of the framework, keeping your designs consistent by default.
  </p>

  <!-- Subheading -->
  <h2 class="text-2xl font-bold text-gray-800 mt-6">Font Weight Examples</h2>

  <!-- Weight showcase -->
  <ul class="space-y-1 text-gray-700">
    <li class="font-thin">font-thin — 100</li>
    <li class="font-extralight">font-extralight — 200</li>
    <li class="font-light">font-light — 300</li>
    <li class="font-normal">font-normal — 400</li>
    <li class="font-medium">font-medium — 500</li>
    <li class="font-semibold">font-semibold — 600</li>
    <li class="font-bold">font-bold — 700</li>
    <li class="font-extrabold">font-extrabold — 800</li>
    <li class="font-black">font-black — 900</li>
  </ul>
</article>

HTML

Full Editor

Related Resources

Tailwind CSS Reference

Complete tag & property list

Tailwind CSS How-To Guides

Step-by-step practical guides

Tailwind CSS Exercises

Practice what you've learned