Fonts

Font families, sizes, weights, line height and letter spacing — plus how to build a type scale with @theme and load custom fonts properly.

Type is the highest-leverage part of a design system. Tailwind gives you a scale for each axis and lets you redefine all of them from @theme.

Font family#

@theme {
  --font-display: "Satoshi", ui-sans-serif, sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
}

That generates font-display and overrides font-sans.

Loading a web font#

@import "tailwindcss";

@font-face {
  font-family: "Satoshi";
  src: url("/fonts/Satoshi-Variable.woff2") format("woff2-variations");
  font-weight: 300 900;
  font-display: swap;
}

@theme {
  --font-display: "Satoshi", ui-sans-serif, sans-serif;
}

font-display: swap renders fallback text immediately instead of leaving a blank gap. Always include a real fallback stack.

For Next.js, see React & Next.js — it needs @theme inline.

Font size#

Each size ships with a sensible line height, so text-lg alone is usually complete.

Overriding line height inline#

<p class="text-lg/7">Font size lg, line height 1.75rem</p>
<p class="text-2xl/tight">Font size 2xl, tight leading</p>

The slash modifier sets line-height in one class.

Custom sizes#

@theme {
  --text-hero: 4rem;
  --text-hero--line-height: 1.05;
  --text-hero--letter-spacing: -0.03em;
  --text-hero--font-weight: 700;
}

class="text-hero" now applies all four properties.

Font weight#

Line height#

The rule of thumb: larger text needs tighter leading, smaller text needs looser.

Letter spacing#

<div class="space-y-4 p-4">
  <p class="text-xs font-semibold tracking-widest text-indigo-600 uppercase">Case study</p>
  <h2 class="text-4xl font-bold tracking-tight text-gray-900">Typography that reads well</h2>
  <p class="max-w-prose leading-relaxed text-gray-600">
    Larger text wants tighter tracking and leading. Body copy wants looser leading and a
    constrained measure so the eye can find the next line.
  </p>
</div>

Font features#

v4.2 font-features-* controls font-feature-settings for OpenType features.

<table class='font-features-["tnum"]'>…</table>

Tabular numerals keep digits the same width, so figures in a table line up.

Tailwind also ships dedicated numeric utilities:

Building a type scale#

@import "tailwindcss";

@theme {
  --font-display: "Satoshi", ui-sans-serif, sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;

  --text-eyebrow: 0.75rem;
  --text-eyebrow--line-height: 1rem;
  --text-eyebrow--letter-spacing: 0.1em;
  --text-eyebrow--font-weight: 600;

  --text-display: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
  --text-display--line-height: 1.05;
  --text-display--letter-spacing: -0.03em;
}

<p class="text-eyebrow text-indigo-600 uppercase">Introducing</p>
<h1 class="font-display text-display">A scale you only define once</h1>

The clamp() makes the display size fluid without a single breakpoint.

Common mistakes#

• font-lg or text-bold. It is text-lg and font-bold. Size is text-*, weight is font-*, family is also font-*.
• Setting line height separately when the size already sets it. text-lg leading-7 is fine, but text-lg/7 is clearer.
• No fallback stack. --font-display: "Satoshi" alone leaves nothing to render while the font loads.
• Unbounded line length. Body text without max-w-prose (or similar) becomes unreadable on wide screens.
• Using font-thin for body copy. 100-weight text at 14px fails contrast expectations for many readers, even when the colour ratio passes.

Related topics#

• Text Styling — colour, alignment, decoration, wrapping
• Theme & Design Tokens — the --text-* and --font-* namespaces
• Plugins — the typography plugin for long-form content