font-weight

Summary

The font-weight property specifies the weight or boldness of the font (their degree of blackness or stroke thickness). Note that some fonts are not available in all weights; some are available only on normal and bold.

Overview table

Initial value: normal
Applies to: All elements
Inherited: Yes
Media: visual
Computed value: The keyword or the numerical value as specified, with bolder and lighter transformed to the real value.
Animatable: Yes
CSS Object Model Property: fontWeight
Percentages: N/A

Syntax

font-weight: 100, 200, 300, 400, 500, 600, 700, 800, 900
font-weight: bold
font-weight: bolder
font-weight: lighter
font-weight: normal

Values

normal: Normal font weight. Same as 400.
bold: Bold font weight. Same as 700.
lighter: One font weight lighter than the parent element (among the available weights of the font).
bolder: One font weight darker than the parent element (among the available weights of the font).
100, 200, 300, 400, 500, 600, 700, 800, 900: Numeric font weights for fonts that provide more than just normal and bold. If the exact weight given is unavailable, a face with a nearby weight is used.

Examples

A selection of examples showing some typical uses of the font-weight property. In practise, you most probably won’t see much difference when using any values except for normal and bold.

<p class="example-one">Set text to be bold.</p>
<p class="example-two">Set text to two step darker than normal but less than a standard bold.</p>
<p class="example-three">Sets text to be one step lighter than the parent.</p>

p { font-size: 150%; }

p.example-one { font-weight: bold; }
p.example-two { font-weight: 600; }
p.example-three { font-weight: lighter; }

View live example

Usage

 Quite often there are only a few weights available for a particular font family. When a weight is specified for which no face exists, a face with a nearby weight is used:

600-900 use the closest available darker weight (or, if there is none, the closest available lighter weight).
100-500 use the closest available lighter weight (or, if there is none, the closest available darker weight).
This means that for fonts that provide only normal and bold, 100-500 are normal, and 600-900 are bold.

Although the practice — also called “Faux bold” — is not well-loved by typographers, bold faces are often synthesized by user agents for faces that lack actual bold faces.

100 to 900
These values form an ordered sequence, where each number indicates a weight that is at least as dark as its predecessor. These roughly correspond to the commonly used weight names below:

100 - Thin
200 - Extra Light (Ultra Light)
300 - Light
400 - Normal
500 - Medium
600 - Semi Bold (Demi Bold)
700 - Bold
800 - Extra Bold (Ultra Bold)
900 - Black (Heavy)

Related specifications

CSS Fonts Module Level 3: W3C Working Draft
CSS Transitions: W3C Working Draft

Attributions

Mozilla Developer Network : Article