CSS Reference Property

font-weight

Some font families usually come with different faces that have varying amounts of thickness or boldness; this thickness is referred to as the font weight in CSS.

The font-weight property is used to select the font thickness of the font (their degree of blackness or thickness).

The weight of the font is usually described by a keyword or a number. The numbers are an ordered sequence starting at 100 through 900, where each number indicates a weight that is at least as dark as its predecessor. Keywords are mapped to appropriate numbers, for example, the keyword normal is synonymous with ‘400’, and bold is synonymous with ‘700’. The keywords are: normal, bold, bolder, and lighter.

raleway-font-weights-example
Raleway is an example for a font family that contains all possible font weights.

The bolder and lighter keywords select font weights that are relative to the weight inherited from the element’s parent. The computed weight is calculated based on the inherited font-weight value using the table below.

font-weight-chart
Table showing the computed value of the bolder and lighter keywords based on the font weight of the element’s parent.

Quite often there are font families that don’t come with all the possible font weights, and come with only a few face weights available. When a weight is specified for which no face exists, a face with a nearby weight is used. In general, bold weights map to faces with heavier weights and light weights map to faces with lighter weights.

weight-mappings
Weight mappings for a font family with 400, 700 and 900 weight faces.

This means that sometimes, using the keywords lighter and bolder, may not give the expected result if the font family used does not have a wide range of font weights. The bolder version of a bold face can, a lot of times, look exactly the same as the bold face.

When a certain font family is used that does not have a normal or a bold face, the browser will synthesize these faces. For the purposes of style matching, these faces must be treated as if they exist within the family. Web developers can, however, disable this feature using the font-synthesis property.

Official Syntax

  • Syntax:

    font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
  • Initial: normal
  • Applies To: all elements
  • Animatable: yes

Values

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

The Mozilla docs describe these numbers best:

“Numeric font weights for fonts that provide more than just normal and bold. If the exact weight given is unavailable, then 600-900 use the closest available darker weight (or, if there is none, the closest available lighter weight), and 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.”

There are often value names that are commonly used and that correspond to each of the 9 weights respectively: ‘Thin’, ‘Extra Light (Ultra Thin)’, ‘Light’, ‘Normal’, ‘Medium’, ‘Semi Bold (Demi Bold)’, ‘Bold’, ‘Extra Bold (Ultra Bold)’, and ‘Black (Heavy)’.

normal
Same as ‘400’.
bold
Same as ‘700’.
bolder
Specifies a font that is bolder than the element’s parent’s font weight (among the list of available weights).
lighter
Specifies a font that is lighter than the element’s parent’s font weight (among the list of available weights).

Examples

The following are all valid font-weight declarations.

font-weight: 300;
font-weight: 900;
font-weight: normal
font-weight: bold;
font-weight: bolder;
font-weight: lighter;
                

Live Demo

Change the font weights and try different font families in the following demo to see how the font weights are rendered.

View this demo on the Codrops Playground

Browser Support

The font-weight property is supported in all major browsers: Chrome, Firefox, Safari, Opera, Internet Explorer, and on Android and iOS.

Written by

Last updated February 4, 2015 at 3:28 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.