How to Use Font Weight to Guide Reader Attention?

Look at a pricing table where the plan names, the prices, the feature lists, and the footnotes are all set in the same 400 weight. Your eye has nowhere to land. Now look at the same table with the prices in 700, the plan names in 600, and the footnotes in 400 at a smaller size. Nothing moved, nothing changed size much, and suddenly the table reads itself: price first, plan second, details third.

That is what font weight does. It is one of the most efficient tools for directing attention because it creates contrast without needing more space. This article explains how weight works in CSS and in type families, how to assign weights across body text, headings, and interface elements, how to use bold emphasis without diluting it, and how to load weights so they render correctly and quickly.

What Is Font Weight?

Font weight is the thickness of a typeface's strokes relative to its height. Type families come in a range of weights from very thin to very heavy, and CSS maps them to numeric values from 1 to 1000, with the traditional named stops in hundreds.

CSS value	Common name	Typical use
100	Thin / Hairline	Very large display text only
200	Extra Light	Large display text
300	Light	Large headings, rarely body text
400	Regular / Normal	Body text (the normal keyword)
500	Medium	UI labels, navigation, small headings
600	Semibold	Subheadings, buttons, emphasis in UI
700	Bold	Headings, strong emphasis (the bold keyword)
800	Extra Bold	Hero headlines
900	Black / Heavy	Display and brand moments

Not every family includes every weight. A family might ship only 400 and 700, or a variable font might cover any value from 100 to 900. Our article on type families and how many weights you need explains how to choose a set.

Why Weight Is So Effective for Attention

Our eyes are drawn to areas of higher visual density. A heavier weight puts more ink in the same space, so it pops out of a field of regular text even at the same size. That gives weight three advantages over size:

1. It does not reflow layout. A bold word in a sentence takes only slightly more width; a larger word disrupts line height.
2. It works at small sizes. In UI text at 14px, you cannot make a label much bigger, but you can make it semibold.
3. It combines well. Weight plus a modest size change creates a clearer step than a large size change alone.

The flip side: because heavy weights are so attention-grabbing, overusing them quickly creates noise.

Assigning Weights Across a Page

A typical content site needs only three or four weights. A reliable starting system:

• Body text: 400. Regular is designed for extended reading.
• Strong emphasis in body: 600 or 700. Enough contrast to notice at reading speed.
• Subheadings (h3, h4): 600. Distinct from body without shouting.
• Section headings (h2): 700.
• Hero or page headlines (h1): 700–800. Larger size carries much of the weight here.
• UI labels, navigation, buttons: 500–600.

body {
  font-weight: 400;
}

strong,
b {
  font-weight: 650;
}

h1 {
  font-weight: 800;
}

h2 {
  font-weight: 700;
}

:is(h3, h4) {
  font-weight: 600;
}

.btn,
.nav-link {
  font-weight: 550;
}

Values like 550 and 650 only render as intermediate weights with a variable font. With static fonts, the browser picks the nearest available weight using the font matching algorithm.

Weight and Size Work Together

Weight and size are partly interchangeable: larger text looks heavier because strokes are physically thicker. This has practical consequences.

Big Headings Can Be Lighter

A 64px headline at 700 can look heavy-handed. The same headline at 500 or 600 still dominates because of its size and often looks more refined. Many modern sites use medium or semibold for very large display text.

Small Text Needs More Weight

At 12–14px, a 300 weight loses stroke detail on standard-density screens and effectively reduces contrast. Keep small text at 400 or above, and consider 500 for small UI labels.

Weight Changes Perceived Contrast

Thin strokes show less of the text color, so light gray text in a light weight looks fainter than the measured contrast ratio suggests. WCAG 1.4.3 measures color only, not weight, so meet 4.5:1 for normal text and 3:1 for large text, then check that light weights are still comfortably readable. Large text for WCAG is at least 24px regular or about 18.66px bold — weight changes the threshold.

Using Bold for Emphasis in Body Text

Bold inside paragraphs is a scanning aid. Readers skimming a page see bold words first, so they should form a useful summary.

Do:

• Bold a key term the first time you define it.
• Bold one critical warning or instruction in a section.
• Bold the lead-in of list items when each item has a label and an explanation.

Do not:

• Bold entire sentences or paragraphs.
• Bold more than one or two phrases per paragraph.
• Use bold and italic and underline together.
• Use bold as a substitute for a heading.

Semantic vs. Visual Bold

Use strong for text with strong importance and b for text you want to draw attention to without extra importance, such as key terms or product names. Both render bold by default. If you only need a visual style, a class is fine:

<p>
  <strong>Back up your database</strong> before running the migration.
  The <b>schema</b> file lives in the project root.
</p>

Weight in Interface Design

Interfaces rely heavily on weight because space is tight and size options are limited.

Navigation and Active States

Changing weight on hover or for the active item draws attention, but static weight changes cause text to shift width and nudge neighboring items. Two fixes:

1. Use a variable font with an equal-width (uniwidth) design, where weight changes do not alter character widths. Some families are designed specifically for this.
2. Reserve the bold width with a hidden pseudo-element:

.nav-link {
  display: inline-flex;
  flex-direction: column;
  font-weight: 400;
}

.nav-link::after {
  content: attr(data-text);
  height: 0;
  visibility: hidden;
  overflow: hidden;
  font-weight: 700;
  user-select: none;
  pointer-events: none;
}

.nav-link[aria-current="page"] {
  font-weight: 700;
}

<a class="nav-link" href="/blog" data-text="Blog" aria-current="page">Blog</a>

Data and Prices

In tables and cards, make the value users compare heavier than its label. A price at 700 with "per month" at 400 reads instantly.

Forms

Labels at 500–600 and input text at 400 help users distinguish the question from their answer. Error messages benefit from weight plus color, never color alone.

Loading Weights Correctly

Weight choices have a performance cost. Each static weight and style is a separate file, often 20–50 KB in WOFF2.

Load Only What You Use

Audit your CSS for weights in use. If you declare 400, 600, and 700, load exactly those, plus italics only if you use them.

Consider a Variable Font

A variable font with a weight axis covers the full range in one file, often smaller than three or four static files combined. Our guide on what variable fonts are covers the trade-offs.

@font-face {
  font-family: "Inter";
  src: url("/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

The font-weight: 100 900 range tells the browser this single file supports every weight in between.

In Next.js

With next/font, variable fonts need no weight option. For static fonts, list the weights explicitly:

import { Inter, Merriweather } from "next/font/google";

export const inter = Inter({
  subsets: ["latin"],
  variable: "--font-sans",
});

export const merriweather = Merriweather({
  subsets: ["latin"],
  weight: ["400", "700"],
  style: ["normal", "italic"],
  variable: "--font-serif",
});

Prevent Faux Bold

If the browser cannot find a bold file, it synthesizes one by smearing the regular weight, which looks muddy. During development, disable synthesis to catch missing weights:

html {
  font-synthesis: none;
}

Defining Weights as Tokens

Keep weights consistent by naming them by role, not by number. In Tailwind CSS v4, define them in @theme:

@import "tailwindcss";

@theme {
  --font-weight-body: 400;
  --font-weight-ui: 550;
  --font-weight-subheading: 600;
  --font-weight-heading: 700;
  --font-weight-display: 800;
}

This generates utilities like font-heading and font-ui, so changing your heading weight later is a one-line edit. The same pattern works with plain CSS custom properties.

Common Font Weight Mistakes

1. Light weights for body text. 300 looks elegant in mockups and tiring on real screens.
2. Bold everywhere. If every label, heading, and link is bold, nothing stands out.
3. Too little contrast between levels. 400 next to 500 is barely distinguishable at body size. Use at least a 200-unit step for emphasis.
4. Loading weights you never use. Every unused file costs bandwidth and render time.
5. Synthesized bold and italic. A sign that the right files are not loaded.
6. Layout shift on hover. Weight changes on navigation items without reserved width.

---

Font Weight FAQ

Conclusion

Font weight is a precise tool for guiding attention. It creates emphasis without moving layout, works where size cannot, and combines with size and spacing to build hierarchy. The key is restraint: a small set of weights assigned by role, bold used for genuinely important words, and enough contrast between levels for the difference to register.

Load only the weights you actually use, prefer a variable font when you need several, and disable font synthesis during development to catch missing files. With weights defined as tokens, your emphasis stays consistent as the site grows, and readers' eyes go exactly where you intend.

Here are some useful references for going deeper on font weight:

1. MDN Web Docs: font-weight — numeric values, keywords, and the fallback weight matching algorithm.
2. Google Fonts Knowledge: Introducing variable fonts — how weight axes work in variable fonts.
3. W3C: Understanding Success Criterion 1.4.3: Contrast (Minimum) — includes the definition of large and bold text.
4. Next.js Docs: Font Optimization — loading static and variable fonts with next/font.
5. Butterick's Practical Typography: Bold or italic — guidance on when to use each kind of emphasis.