Designating Font Weight Using CSS

HTML provided the bold tag for changing the weight of your text. With CSS you can easily use a series of different font weights for different attributes of your site without changing any HTML code! And you can do more than bold your text too!

Font weights are defined within CSS for any HTML element that contains text. This means that you can define font-size styles for paragraphs, headings, tables, divs, blockquotes, etc.

Let's take a look at some CSS font-weight style settings.

p      {font-weight:bolder;}
span   {font-weight:lighter;}
ol     {font-weight:normal;}
ul     {font-weight:800;}

Our first three HTML elements above showcase some of the statements we can make to change the boldness of our text. Two of these statements are absolute. These statements are normal and bold. Used as font weight styles, these render your fonts either not-bold (normal) or bold (bold). These are called "absolute" designations because the font-weight of whatever came before that statement doesn't matter. Previous styles have no effect on these designations.

Other font weight statements, specifically bolder and lighter are relative. If a paragraph was bold and we wanted a text span to be even bolder, we could apply the style bolder to make that span even bolder than the rest of the paragraph. If the next span shouldn't be as bold, we could use the style lighter to decrease the font-weight. As with all relative values, it is important to monitor our font-weights carefully when applying the lighter and bolder variables.

Finally we have numeric font-weight values. These are 100, 200, 300, 400, 500, 600, 700, 800, and 900. As you might expect, the higher the number, the bolder the font.

When designating font weights, it is important to remember that each level of weight actually calls up a different font. For example, normal weight Arial font is the font "Arial"; bold Arial font might be the font "Arial Bold"; bolder Arial font "Arial Extra-Bold". Obviously not all fonts come in nine different boldness settings. In cases like this some of the numeric font-weight values may end up being identical. Computers displays are limited by what fonts are available. Bear that in mind when programming your pages.

You should now be able to manipulate font weight settings using both absolute and relative style values.