As there is no real standard for defining a font's darkness, CSS introduced the numerical scale for font weighting.

The scale starts with the number 100 and ends with 900, with 400 being the medium or normal.

The practical usage or appliance of the font weight depends on the browsers and font family and may vary a lot. Ultimately the numbers are only intended to preserve the order of the darkness or boldness within a family.

The following methods apply to the initial weight analyses:

  • if the font family already uses a numerical scale with nine values, the font weight should be mapped directly;
  • if there is a font face labeled Medium and one labeled Book, Regular, Roman or Normal, the Medium will be assigned to the "500";
  • the font face labeled bold is usually equal to the value of "700".

After the agent's mapping to the CSS scale is finished, the missing weights are selected as follows:

  • if the desired weight is less than "400", those weights below the desired one will be checked in descending order followed by the weights above the desired one in ascending order until a proper match is found;
  • if the desired weight is greater than "500", those weights above the desired one will be checked in ascending order followed by the weights below the desired one in descending order until a proper match is found;
  • if the desired weight is "400, 500", it will be checked first and then the rule for desired weights less than "400" will be used;
  • if the desired weight is "500, 400", it will be checked first and then the rule for desired weights less than "400" will be used.

The values bolder and lighter from the property font-weight are used as relative to the weight of the parent element. The further child elements do not inherit the values bolder and lighter but rather the computed value that, as said, depends on the parent element. These values are calculated according following table:

Calculated relative weight values
Inherited value bolder lighter
100 400 100
200 400 100
300 400 100
400 700 100
500 700 100
600 900 400
700 900 400
800 900 700
900 900 700

 

 

 

 

 

 

 

 

›› go to examples ››