The font-weight property defines the weight of the chosen font in terms of value from 100 to 900 where 400 is equivalent to normal and 700 to bold.

Beside numbers 100 to 900 and keywords normal and bold there are also keywords bolder and lighter referring to the parent element's font-weight selection. Considering that numbered values and bolder / lighter keywords still encounter issues in rendering, it is suggested to use only regular or normal value or bold if needing to emphasize.

Font-weight property

The font-weight property contains following information:

  1. value: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 or inherit;
  2. initial: normal;
  3. applies to: all elements;
  4. inherited: yes;
  5. percentages: N/A;
  6. media: visual;
  7. computed value: as specified by the font family.

To get better understanding of the weight property applied in different situations please refer to the "Advanced CSS" chapter.


CSS font-weight property example:


›› go to examples ››