Tailwind Font Weight Utilities

What Are Font Weight Utilities?

font-* weight utilities map to numeric CSS font-weight values, from font-thin (100) to font-black (900), matching standard web font weight numbering.

Not every font includes every weight; if a specific weight isn't loaded, the browser will substitute the closest available weight instead, so check your loaded font files when picking weight utilities.

<h2 class="text-2xl font-bold">Bold Heading</h2>
<p class="font-normal text-slate-700">Regular weight paragraph text.</p>
<p class="font-medium text-slate-900">Slightly emphasized medium-weight text.</p>

Three different weights create hierarchy between a heading, body text, and emphasized text, all at the same font size.

Font Weight Utility Syntax

class="font-thin | font-light | font-normal | font-medium"
class="font-semibold | font-bold | font-extrabold | font-black"

• font-normal (400) is the default body text weight.
• font-medium (500) and font-semibold (600) work well for labels and subtle emphasis.
• font-bold (700) is the standard weight for most headings.
• font-extrabold (800) and font-black (900) suit large display headings.

Font Weight Scale Cheatsheet

The complete Tailwind font-weight scale with numeric values.

Building Hierarchy With Weight, Not Just Size

Increasing font size for every level of hierarchy can quickly make a page feel cluttered. Mixing weight changes with size changes creates a more refined hierarchy, since subtle weight shifts communicate importance without dominating the layout.

<div>
  <p class="text-sm font-semibold uppercase tracking-wide text-blue-600">Category</p>
  <h2 class="text-2xl font-bold text-slate-900">Article Title</h2>
  <p class="text-base font-normal text-slate-600">Supporting description text.</p>
</div>

Combining Weight With Other Utilities

Font weight utilities combine naturally with size, color, and responsive prefixes to fine-tune emphasis at different breakpoints, for example making a heading bolder only on larger screens where it has more visual room.

<h1 class="text-3xl font-semibold md:font-bold">
  Slightly bolder heading on larger screens
</h1>

Font Weight With Variable Fonts

Modern variable fonts support a continuous range of weights in a single file, which pairs perfectly with Tailwind's full weight scale, letting you use precise weights like font-medium or font-semibold without loading multiple separate font files.

• Variable fonts reduce the number of font files your site needs to load.
• Tailwind's weight utilities work identically whether you load static or variable font files.
• Always test which weights are actually available in your chosen font before relying on them.

Common Mistakes

• Using a weight utility that isn't included in the loaded font file, causing the browser to fake or substitute a different weight.
• Relying only on font size for hierarchy and ignoring weight, resulting in oversized headings.
• Applying font-bold to large amounts of body text, which reduces readability for long passages.
• Not testing font weight rendering across different operating systems, since font rendering can vary subtly.
• Forgetting font-semibold and font-medium exist and jumping straight from font-normal to font-bold for every emphasis need.

Key Takeaways

• Font weight utilities map directly to numeric CSS font-weight values from 100 to 900.
• Mixing weight with size creates more refined visual hierarchy than size changes alone.
• Not every loaded font supports every weight; verify availability before relying on a specific class.
• font-medium and font-semibold are excellent for subtle emphasis without full bold weight.
• Variable fonts pair naturally with Tailwind's full weight scale in a single font file.