Font Weight

Definition

Utilities for controlling the font weight (thickness) of an element.

Explain Like I'm New

How bold the text is. `font-thin` looks like a spiderweb. `font-normal` is standard. `font-bold` is thick. `font-black` is incredibly massive and heavy.

Real World Example

Making a user's name `font-bold` in a comment section so it stands out against the `font-normal` comment text.

Common Use Cases

•Emphasis
•Visual hierarchy

Interactive Example

Interview Questions

basic

What Tailwind class corresponds to standard `<b>` bold text (weight 700)?

intermediate

If you apply `font-black` (weight 900) but your imported web font doesn't support that weight, what happens?

Flash Cards

Question

Standard bold?

Click to reveal answer

Answer

`font-bold`

Question

Unsupported weight?

Click to reveal answer

Answer

The browser will try to 'fake' it by mathematically smudging/thickening the font, which usually looks terrible. Always ensure you import the correct weights from Google Fonts.