Tailwind Font Size Utilities

What Is the Tailwind Font Size Scale?

Tailwind's default type scale runs from text-xs (0.75rem) to text-9xl (8rem), with each step also setting a matching default line-height so text looks balanced without extra configuration.

Using this shared scale across a project, instead of arbitrary pixel values, keeps heading and body text sizes consistent and predictable everywhere.

<h1 class="text-4xl font-bold">Heading 1</h1>
<h2 class="text-2xl font-bold">Heading 2</h2>
<h3 class="text-xl font-semibold">Heading 3</h3>
<p class="text-base">Body paragraph text.</p>
<span class="text-xs text-slate-500">Caption text</span>

Five distinct sizes create a clear visual hierarchy from largest heading to smallest caption.

Font Size Utility Syntax

class="text-xs | text-sm | text-base | text-lg | text-xl"
class="text-2xl | text-3xl | text-4xl ... text-9xl"

• text-base (1rem/16px) is the default body text size.
• Sizes below base (text-xs, text-sm) suit captions, labels, and helper text.
• Sizes above base (text-lg through text-9xl) suit headings and display text.
• Each size utility also sets a default line-height, which you can override with leading-*.

Font Size Scale Cheatsheet

The complete default Tailwind font-size scale.

Responsive Heading Sizes

Large display headings often look oversized on mobile screens. Pair a smaller base size with larger sizes at bigger breakpoints so headings scale naturally with the viewport.

<h1 class="text-3xl font-bold md:text-5xl lg:text-6xl">
  Responsive Display Heading
</h1>

Overriding the Default Line Height

Larger font sizes default to a tighter relative line height for headings, which usually looks correct, but you can always override it with an explicit leading-* utility when a design calls for something different.

<h1 class="text-5xl font-bold leading-tight">
  Tight Custom Line Height
</h1>

Setting Size and Line Height Together

Tailwind also supports a combined syntax like text-lg/7, which sets both font size and line height in one utility, useful when you want a specific line height paired with a specific size without a separate leading-* class.

<p class="text-lg/7 text-slate-700">
  Sets font-size to 1.125rem and line-height to 1.75rem in a single utility.
</p>

Common Mistakes

• Using arbitrary pixel values like text-[17px] for headings instead of the closest scale value, breaking visual consistency.
• Not scaling heading sizes responsively, leaving oversized text on small screens.
• Setting body text below text-sm for primary content, hurting readability and accessibility.
• Forgetting that larger font-size utilities have tighter default line-heights, which can look cramped in multi-line headings.
• Overriding font size with inline styles instead of using the combined text-{size}/{leading} syntax when both need to change.

Key Takeaways

• Tailwind's font-size scale runs from text-xs to text-9xl, each with a matching default line height.
• text-base (16px) is the standard size for primary body text.
• Responsive size utilities (text-3xl md:text-5xl) keep headings proportional across screen sizes.
• The combined text-lg/7 syntax sets size and line height in a single class.
• Stick to the built-in scale for consistency; reserve arbitrary values for rare edge cases.