font-weight

The font-weight property sets the weight, or thickness, of a font and is dependent either on available font faces within a font family or weights defined by the browser.

span {
    font-weight: bold;
}

The font-weight property accepts either a keyword value or predefined numeric value. The available keywords are:

• normal
• bold
• bolder
• lighter

The available numeric values are:

• 100
• 200
• 300
• 400
• 500
• 600
• 700
• 800
• 900

The keyword value normal maps to the numeric value 400 and the value bold maps to 700.

In order to see any effect using values other than 400 or 700, the font being used must have built-in faces that match those specified weights.

If a font has a bold (“700”) or normal (“400”) version as part of the font family, the browser will use that. If those are not available, the browser will mimic its own bold or normal version of the font. It will not mimic the other unavailable weights. Fonts often use names like “Regular” and “Light” to identify any alternate font weights.

The following demo demonstrates the use of the alternate weight values:

<link href='http://fonts.googleapis.com/css?family=Open Sans:400,600,700,800,300' rel='stylesheet' type='text/css'>
  
  <p class="w100">This is 100 weight</p>
  
  <p class="w200">This is 200 weight</p>
  
  <p class="w300">This is 300 weight (available)</p>
  
  <p class="w400">This is 400 weight (available)</p>
  
  <p class="w500">This is 500 weight</p>
  
  <p class="w600">This is 600 weight (available)</p>
  
  <p class="w700">This is 700 weight (available)</p>
  
  <p class="w800">This is 800 weight (available)</p>
  
  <p class="w900">This is 900 weight</p>

body {
  padding: 0 20px;
  font-family: 'Open Sans';
}

.w100 {
  font-weight: 100;
}

.w200 {
  font-weight: 200;
}

.w300 {
  font-weight: 300;
}

.w400 {
  font-weight: 400;
}

.w500 {
  font-weight: 500;
}

.w600 {
  font-weight: 600;
}

.w700 {
  font-weight: 700;
}

.w800 {
  font-weight: 800;
}

.w900 {
  font-weight: 900;
}

The above demo is using the free font Open Sans, embedded using the Google Web Fonts API. The font is loaded with all the available font weights and so, using the font-weight property, the different available weights are displayed as described by each paragraph’s text. The unavailable weights simply display the logically closest weight.

Common fonts like Arial, Helvetica, Georgia, etc. do not have weights other than 400 and 700. So the same demo displayed with one of those fonts would display only two weights in the nine paragraphs.

Using “bolder” and “lighter” keywords

The keyword values bolder and lighter are relative to the computed font weight of the parent element. The browser will look for the closest “bolder” or “lighter” weight, depending on what is available in the font family, otherwise it will simply choose “400” or “700”, depending on which makes the most sense.

Child elements will not inherit the “bolder” and “lighter” keyword values, but instead will inherit the computed weight.

Related Properties

• font
• font-stretch
• font-variant
• font-style
• line-height
• font-size
• font-family

Browser Support