Font Weight

Definition

Font weight is the thickness of the strokes that make up each letter. It's usually expressed as a number from 100 (the thinnest) to 900 (the heaviest), where 400 is regular and 700 is bold. The interesting part is that you can change the weight alone — without touching the size or the color at all — and a reader can instantly tell which words matter more. Make a single word bold inside a line of same-size, same-color text and that word naturally catches the eye first. Thicker strokes take up more visual weight on the screen, so the eye is drawn to the heavier side almost automatically. That's why font weight is often called the most restrained, effortless tool for creating hierarchy without dramatically changing size or color.

Why does it matter?

On a screen, you really only have three ways to make something stand out: make it bigger, change its color, or adjust its weight. Bumping up the size pushes the rest of the layout around, and changing the color can look like the meaning shifted or clash with your color rules. Weight, by contrast, takes up almost no extra space while still creating a clear sense of strong versus soft — so you can establish hierarchy without disturbing the layout. Set headings bold, body text regular, and small captions a touch lighter, and the order of importance falls into place on its own. This strength really shines in clean, color-restrained designs, letting you build a perfectly clear screen in black and white alone. Weight differences also come through for users with color vision deficiency, so as an emphasis tool that doesn't rely on color, it's reassuring from an accessibility standpoint too.

Common mistakes

• Mixing too many weights on a single screen. When thin, regular, bold, and extra-bold are all scattered around, it gets hard to tell what's actually being emphasized — the emphasis you worked for loses its punch and the screen just looks busy.
• Using very thin weights (300 or below) at small sizes. Thin strokes set small can blur and smear on low-resolution screens or against bright backgrounds, which makes body text and labels noticeably harder to read.
• Setting an entire block of body text in bold. When everything is bold, the parts you meant to emphasize disappear and the page falls flat — and in long passages, the eye tires quickly, so it ends up harder to read.

Practical tips

• Try creating emphasis with weight alone, without touching color or size. You get strong-versus-soft contrast while keeping the layout intact, which suits restrained designs especially well. Just reserve thin weights like 300 for large text — set small, they turn blurry.
• Limit yourself to two or three weights in practice. For example, assign body text to 400, emphasis and subheadings to 600, and large headings to 700. Giving each weight a clear role keeps the screen consistent and easy to maintain.
• When you change a weight, check that the font actually ships that thickness. Values it doesn't support get faked by the browser (a synthetic bold), which can look clumsy and smeared.

Related concepts