How do I make text bold?
Author: Deron Eriksson
Description: This CSS tutorial describes how to use the font-weight property to make text bold.
Tutorial created using: Windows XP


The font-weight property can be used to control the boldness of text. It can have the following values according to the CSSW 2.1 specification:

normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit

The 'normal' and 'bold' values are the values most commonly seen. Normal obviously specifies to use a normal font-weight, while bold specifies to use a bold font-weight. The 'inherit' value means to use the font-weight inherited from the parent. The 'bolder' value specifies to use a weight bolder than the parent, and 'lighter' specifies to use a weight lighter than the parent. The numerical values specify varying font weights, where 100 is the lightest and 900 is the heaviest. 400 is the same as 'normal', and 700 is the same as 'bold'. Typically, browsers just show 'normal' and 'bold' weights and do not show the fine-grained capabilities offered by the numerical values.

The style-test.html file below demonstrates different font-weight values.

style-test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Style Test</title>
</head>
<body>
<div style="font-weight: normal">font-weight: normal;</div>
<div style="font-weight: bold">font-weight: bold;</div>
<div style="font-weight: bolder">font-weight: bolder;</div>
<div style="font-weight: lighter">font-weight: lighter;</div>
<div style="font-weight: 100">font-weight: 100;</div>
<div style="font-weight: 200">font-weight: 200;</div>
<div style="font-weight: 300">font-weight: 300;</div>
<div style="font-weight: 400">font-weight: 400;</div>
<div style="font-weight: 500">font-weight: 500;</div>
<div style="font-weight: 600">font-weight: 600;</div>
<div style="font-weight: 700">font-weight: 700;</div>
<div style="font-weight: 800">font-weight: 800;</div>
<div style="font-weight: 900">font-weight: 900;</div>
</body>
</html>

The screen capture below shows style-test.html in IE7 and Firefox. Notice that IE7 apparently treats a font-weight of 600 in a strange manner.

font-weight example