CSS / Reference / font-weight: Numeric Weights, Relative Weights, and Font Matching

font-weight requests text weight. normal corresponds to 400 and bold to 700; numeric values from 1 to 1000 are allowed, but the font need not provide every requested weight.

Syntax and value choices

Initial values are not necessarily the values assigned to HTML elements by the browser’s stylesheet. Inspect the actual result in developer tools’ Computed panel.

body { font-weight: 400; }
strong { font-weight: 700; }
.title { font-weight: 650; }

For supported values and conditions, see MDN font-weight.

Run the example and compare results

Save this complete code as css-reference-10553-example.html in UTF-8 and open it in a browser. Keep its demonstration styles in that file rather than pasting them into a site-wide stylesheet.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>font-weight comparison example</title>
<style>
body { margin: 0; color: #20242b; background: #fff; font: 16px/1.7 "Malgun Gothic", sans-serif; }
#demo { padding: 24px; max-width: 820px; margin: auto; }
h1 { font-size: 22px; margin: 0 0 20px; }
.samples { display: flex; flex-wrap: wrap; gap: 24px; }
.label { margin: 0 0 8px; font-weight: 700; }
.target { font-weight: 400; font-size: 26px; }
.reference { font-weight: 700; font-size: 26px; }
</style>
</head>
<body>
<main id="demo">
<h1>font-weight comparison</h1>
<section class="samples"><div class="a"><p class="label">400</p><div class="target">Font weight / Text weight</div></div><div class="b"><p class="label">700</p><div class="reference">Font weight / Text weight</div></div></section>
</main>
</body>
</html>

Compare the 400 and 700 requests. A missing weight can lead to font matching or synthesized bold rather than a distinct supplied face.

Static and variable fonts

A static family usually offers discrete weight files. A variable font may provide values across its supported weight-axis range. Match @font-face weight descriptors to the actual files; not every variable font has the same range.

Relative weights and meaningful emphasis

bolder is not a fixed number added to the parent. Use a numeric weight when a design requires an explicit request. The semantic meaning of strong is separate from a visual bold face, so CSS alone does not replace meaningful emphasis.

Change one setting at a time

Use the complete example file above. Change only the specified selector or value rather than several comparison conditions at once.

1. Change only font-weight among 400, 650, and 700, inspecting Computed and Rendered Fonts. Three requests need not create three different faces.
2. A parent request of 400 with a bolder child demonstrates a 700 request. Distinguish the relative request from the selected face, then restore the numeric rules.

The table shows relative requests for representative inherited weights, not the selected face or synthesis outcome. In the original example set .samples to font-weight:400, change only .target to bolder/lighter, inspect 700/100 in Computed, then remove the temporary rules.

For coordinated font sizing, line heights, and typeface choices, see CSS Fonts, Font Sizes, and Line Height. Related properties to compare alongside these conditions are font-family.

When the result is missing or unexpected

• Inspect both the computed request and the font face actually rendered.
• If several numeric requests look identical, check the available weights and loading.