Chapter 27: Font Weight

You can set font weight or boldness using the CSS font-weight property. Setting the font weight allows you to make text as bold or as light as you like. The variations for the font-weight property are:

  • normal - regular looking text
  • lighter - less bold then regular text (may appear regular)
  • bold - bold text
  • bolder - very bold text (may just appear as bold)

Setting the font for an element with the ID "small-print" to lighter so that your innocent visitors don't realise what cursed, evil contract they're entering into would be done like this:

#small-print
{
 font-weight: lighter;
}

For a more specific boldness level you can also set the level of boldness numerically. The lightest text starts at 100, going up to 400 for regular text, up to 700 for bold text, and finally up to 900 for the boldest text.

#small-print
{
 font-weight: 100;
}

Try it yourself if you want to be bold, and then take a light quiz on this chapter.