This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.



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
Applies to
All elements
Computed value
The keyword or the numerical value as specified, with bolder and lighter transformed to the real value.
CSS Object Model Property


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


Normal font weight. Same as 400.
Bold font weight. Same as 700.
One font weight lighter than the parent element (among the available weights of the font).
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.


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


 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

See also

External resources


  • Mozilla Developer Network cc-by-sa-small-wpd.svg: Article