CSS Font Weight Explained

CSS normal corresponds to 400 and bold to 700. Numeric requests can range from 1 to 1000, but the selected font must support the requested value or a matching behavior is needed. The number is a selection input, not a universal promise that different families look equally dark.

In the Inter specimen, compare the same phrase at 400 and 700. Then compare Archivo at those values. Describe what changes in the counters, width and visual density rather than judging the number by itself.

A CSS weight request cannot supply a missing font file by itself. For static families, include the required weight files; variable families can expose a supported range when declared appropriately. A browser may match another available weight if the exact request is missing.

For a small project, list the weights your heading, body and emphasis actually use. Keep that list with the font source. Start from the specimen’s Copy web font CSS action, then adapt the class name to your own layout.

HTML structures the content; CSS controls its appearance. A style declaration such as font-weight: 700 requests bold weight. A framework utility is another way to generate or apply CSS, so the underlying font files still matter.

For Tailwind or Bootstrap, consult the documentation for the version your project uses rather than assuming every numeric utility or configuration is identical. This guide explains the CSS concept and does not claim to list each framework’s current classes.

Compare a paragraph with one emphasized phrase and a separate heading. If emphasis becomes too dark or narrow, try a different designed weight instead of increasing the whole text size. Keep light text sufficiently visible against its background.

Use font pairing ideas when heading and body roles need a broader contrast. Read typeface versus font if family names, styles and files are becoming mixed together in the handoff.