Tailwind CSS Font Weight Cheatsheet

All Tailwind v4 font weight utilities from thin to black.
Click any class to copy it to your clipboard.

Font Weight Utilities

font-thin(100)The quick brown fox

font-extralight(200)The quick brown fox

font-light(300)The quick brown fox

font-normal(400)The quick brown fox

font-medium(500)The quick brown fox

font-semibold(600)The quick brown fox

font-bold(700)The quick brown fox

font-extrabold(800)The quick brown fox

font-black(900)The quick brown fox

Visual Comparison

Aa100

Aa200

Aa300

Aa400

Aa500

Aa600

Aa700

Aa800

Aa900

CSS Reference

Class	CSS Value	Description
font-thin	font-weight: 100;	Thinnest weight, extremely light
font-extralight	font-weight: 200;	Extra light, delicate text
font-light	font-weight: 300;	Light weight, subtle emphasis
font-normal	font-weight: 400;	Default body text weight
font-medium	font-weight: 500;	Medium weight, slight emphasis
font-semibold	font-weight: 600;	Semi-bold, strong emphasis
font-bold	font-weight: 700;	Bold, high emphasis
font-extrabold	font-weight: 800;	Extra bold, very heavy
font-black	font-weight: 900;	Heaviest weight, maximum impact

Common Patterns

Headings

<h1 class="text-4xl font-bold">
  Bold Heading
</h1>
<h2 class="text-2xl font-semibold">
  Semi-bold Subheading
</h2>

Body Text

<p class="font-normal">
  Regular paragraph text
</p>
<p class="font-light text-gray-600">
  Lighter secondary text
</p>

Button Text

<button class="font-medium">
  Medium Weight Button
</button>
<button class="font-semibold">
  Semibold Button
</button>

Hover Effects

<a class="font-normal
    hover:font-semibold transition">
  Link with weight change
</a>

Arbitrary Values

Need a weight not in the default scale? Use arbitrary values with square brackets:

font-[550]

Custom weight between medium and semibold

Custom 550 weight

font-[350]

Custom weight between light and normal

Custom 350 weight

Variable Fonts

Most fonts only support a subset of these weights (typically 400 and 700). For all 9 weights to render correctly, use a variable font or a font family that includes all weight variations.

Popular variable fonts: Inter, Roboto Flex, Source Sans 3

See Tailwind classes on any website

Frontend Hero's Tailwind Scanner shows you all Tailwind classes of any element. Inspect typography, colors, spacing, and more with just one click.

Get Frontend Hero now →

Explore more Tailwind tools

Tailwind Grid Generator

Create grid layouts visually

Tailwind Flexbox Generator

Create flex layouts visually

Tailwind Gradient Generator

Create custom gradients

Tailwind Text Gradient

Gradient text effects

Tailwind Gradients Collection

275+ ready-to-use gradients

Tailwind Colors

Complete 240+ color palette

Tailwind Box Shadow Generator

Design multi-layer shadows

Tailwind Text Shadow

Add depth to text with shadows

Tailwind Filter Generator

Apply blur, brightness & more

Tailwind Transform Generator

Rotate, scale & translate elements

Tailwind Animation Generator

Create built-in & custom animations

Tailwind Transition Generator

Smooth hover transitions

Tailwind Config Generator

Generate your config file

Tailwind Input Generator

Design form inputs visually

Tailwind Class Sorter

Organize classes in order

Flexbox Cheatsheet

All flex utilities visualized

Overflow Cheatsheet

Control content overflow

Browse all free Tailwind tools →