CSS font-weight

The font-weight CSS property sets the thickness of a font from nine possible options. The nine step scale ranges from 100 (thinnest) to 900 (heaviest). The normal and bold keywords always refer to 400 and 700 weights respectively.

font-weight: normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900
font-weight: bold;   /* equal to 400 */
font-weight: 600;

bolder and lighter make the font heavier/lighter relative to the parent's font weight.

Browser Support: Full

Font Weights

When a font weight is not available, a close one is used in place. Most standard fonts have two or three weights available, but webfonts may have more.

The following are the results for the nine possible font weights (not all are available):

100 - Thin

200 - Extra Light (Ultra Light)

300 - Light

400 - Normal

500 - Medium

600 - Semi Bold (Demi Bold)

700 - Bold

800 - Extra Bold (Ultra Bold)

900 - Black (Heavy)

Try changing the font family (Helvetica, monospace, Georgia, Tahoma, Verdana ...) of the example above to see the available weights for different fonts:

.example {
font-family: arial;
}

Note: The descriptions in the example don't correspond to valid values of font-weight, except for normal and bold.

Defining a bold font face

Define a bold webfont using a separate @font-face rule for the same font-family. Here's for Open Sans Bold font:

@font-face {
  font-family: 'Open Sans';
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(path_to_font_folder/OpenSans-Bold.woff) format('woff');
}

Because every font weight is in a separate file, you'll have to add new @font-face rule for each. Keep the font-family name, the only things that should change are the font-weight rule and the URL of the font files. Using a different family name for bold will work but is less effective and makes it easier to mess things up later.

The font property is shorthand

The CSS font property is a shorthand for several other properties including font-weight. Keep in mind that values not provided will be set to initial.

div.bold {
font: bold 28px serif;
}
This text was bolded using the "font" shorthand property.

See the font's page for more information.

Useful Resources

Leave a Reply

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>