Font Weights Explained: Thin to Black
Font weights are the range of stroke thicknesses a typeface offers, from hairline Thin to ink-heavy Black, and each one maps to a numeric value from 100 to 900. Getting weights right is one of the cheapest ways to make type look professional: most amateur work uses only Regular and Bold, while skilled work uses the full range to build clear, calm hierarchy.
This is part of the Made Good Design Collective typography fundamentals cluster. For the surrounding vocabulary, see our typography terms glossary.
The Numeric Weight Scale: 100 to 900
Modern typography standardizes weight on a numeric scale that runs from 100 to 900 in increments of 100. This is the system used by CSS (font-weight), variable fonts, and most design tools, so it’s worth memorizing the canonical mapping.
| Numeric value | Common name | Typical use |
|---|---|---|
| 100 | Thin / Hairline | Large display only; vanishes at small sizes |
| 200 | Extra Light / Ultra Light | Elegant headlines, fashion, luxury |
| 300 | Light | Subheads, airy display; risky for body text |
| 400 | Regular / Normal | The default for body text |
| 500 | Medium | Gentle emphasis, UI labels, subheads |
| 600 | Semi Bold / Demi Bold | Strong subheads without full bold weight |
| 700 | Bold | The standard emphasis weight; headings |
| 800 | Extra Bold / Heavy | Punchy headlines, posters |
| 900 | Black / Heavy | Maximum impact display; never body text |
The two anchor points to lock in: Regular is 400 and Bold is 700. Everything else positions relative to those. Note that naming isn’t perfectly consistent across foundries, one foundry’s “Heavy” might be 800, another’s might be 900, so always check the actual numeric value rather than trusting the name alone.
How Weight Affects Apparent Color and Texture
Typographers talk about the “color” of text, not hue, but the overall gray tone a block of type creates on the page. Weight is the biggest lever on that color. Set a paragraph in Light and it reads as a pale, airy gray; set the same paragraph in Bold and it turns dark and dense.
This is why body text almost always lives at Regular (400): it produces an even, comfortable gray that’s easy to read at length. Light weights look elegant but strain the eye in body copy, especially on screens or against imperfect contrast. Heavy weights overwhelm, dense black text in a paragraph fatigues quickly and screams for attention the whole way down.
Building Hierarchy With Weight
Weight is one of the most efficient tools for hierarchy because it signals importance without changing size or color. A few working patterns:
- Body at Regular (400), headings at Bold (700). The simplest reliable hierarchy.
- Add Medium (500) or Semi Bold (600) for subheads. These intermediate weights give you a third level without jumping all the way to Bold, which keeps the page calmer.
- Use Black (900) sparingly for a single hero element. One ultra-heavy headline can anchor a layout; two competing ones cancel each other out.
- Pair weight with size, not instead of it. The strongest hierarchy combines a size jump and a weight jump together.
Weight hierarchy works hand in hand with a consistent size system. Build the sizes with our type scale calculator, then assign weights to reinforce the levels.
Never Fake Bold (or Light)
A critical rule: use real weights from the font family, not synthetic ones. When you apply “bold” to a font that has no actual Bold cut, the software fakes it by algorithmically thickening the strokes, a “faux bold.” It looks crude, clogs the counters, and distorts the letterforms.
The same goes for faking thin weights by other means. Always load the genuine weight you want. This is one reason it’s worth checking how many weights a typeface ships with before committing to it, a family with only Regular and Bold gives you far less hierarchy to work with than one offering all nine steps.
Variable Fonts Change the Game
Variable fonts are a single font file that contains a continuous weight axis rather than discrete cuts. Instead of choosing only 400 or 700, you can set any value, 437, 612, whatever the design needs, by sliding along the weight axis.
The advantages in 2026 are significant:
- Granular control — fine-tune weight to the exact value a layout wants.
- Performance — one variable file often replaces several static files, cutting load time on the web.
- Smooth interpolation — animate or transition weight smoothly for interactive effects.
Inter is a standout free variable font with a full weight axis and excellent screen rendering; Roboto Flex and Source Sans 3 are other strong open-source options. For body and UI work, a good variable sans is hard to beat in 2026.
Why Weight Names Don’t Always Match
One genuine source of frustration: weight names are not standardized across foundries, and they sometimes don’t line up with the numeric values either. One foundry’s “Book” might be 400, another’s might be 350. “Heavy” might mean 800 in one family and 900 in another. “Semi Bold” and “Demi Bold” are usually the same thing (600), but not always.
On the web, this gets messier still. If a font family only ships Regular (400) and Bold (700), and your CSS requests font-weight: 600, the browser doesn’t have a real 600 cut, so it either rounds to the nearest available weight or, worse, synthesizes a faux weight. The fix is to check exactly which weights a family includes before you design around them, and to load only the genuine cuts you’ll actually use. With variable fonts this problem largely disappears, since any value along the axis is a real, designed weight rather than a guess.
Choosing Weights for Real Projects
Some practical defaults to start from:
- Body text: Regular (400). On low-contrast backgrounds, consider Medium (500) for a touch more presence.
- Subheads: Medium (500) or Semi Bold (600).
- Headings: Bold (700).
- Hero / display: Extra Bold (800) or Black (900), but only at large sizes.
- Light weights (100-300): reserve for large, elegant display, never for anything that has to be read at small sizes.
Weight also carries tone, ultra-thin reads as luxurious and modern, heavy black reads as bold and urgent, which ties directly into font psychology. And the heaviest, most expressive weights belong to the world of display fonts, where impact matters more than sustained readability.
Frequently Asked Questions
What do font weight numbers mean?
Font weight numbers run from 100 to 900 in steps of 100, mapping stroke thickness to a standard scale. Regular is 400 and Bold is 700, the two anchor points. The system is used by CSS and variable fonts, letting you reference weights precisely rather than by inconsistent names.
What is the normal font weight?
The normal, or Regular, font weight is 400. It’s the default weight for body text because it produces an even, comfortable gray “color” on the page that’s easy to read at length. Heavier weights like Medium (500) are sometimes used for body text on low-contrast backgrounds.
What weight is bold?
Bold corresponds to the numeric value 700. It’s the standard weight for emphasis and headings. Some families also offer Semi Bold (600) for strong subheads without full bold weight, and Extra Bold (800) or Black (900) for high-impact display work at large sizes.
What is a faux bold and why avoid it?
A faux bold is a synthetic bold the software fakes by algorithmically thickening strokes when a font has no real Bold cut. It clogs the letterforms and looks crude. Always use the genuine Bold weight shipped with the typeface rather than letting software simulate it.
What are variable fonts?
Variable fonts are single font files containing a continuous weight axis instead of separate static cuts. You can set any weight value along the axis, gaining granular control, smaller file sizes on the web, and smooth weight transitions. Inter and Roboto Flex are popular free examples.
