In This Tutorial
Font weight
Font weight property is used to set the “weight” of specified text in HTML document. A value can be set straightaway to bold or a value can be set between thin to thicker, we will show you how!
You can also use simple <b> tag to make text bold however using CSS is recommend.
Two example are shown below for how to use font-weight property of CSS in HTML document. One with simple values: bold, lighter and normal – normal is default value.
Second example uses numeric value to set “weight” of specified text.
Font-weight example to make text bold, lighter and normal
This example sets the font-weight of heading1 as bold, heading 2 to use lighter and makes it normal for paragraph.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
<!DOCTYPE html>
<html>
<head>
<style>
/*Using CSS font*/
h1
{
font-family:Verdana, Arial;
font-weight:bold;
font-size:25px;
}
h2
{
font-family:“Times New Roman”, Arial;
font-weight:lighter;
font-size:20px;
}
p
{
font-family:Arial, Verana;
font-weight:normal;
font-size:15px;
}
</style>
</head>
<body>
<h1>heading 1 with bold font-weight</h1>
<h2>Heading 2 with lighter font-weight</h2>
<p>Paragraph with normal font-weight</p>
</body>
</html>
|
Font weight example with numeric value
A number can also be given in font-weight property to specify from normal to bold range. A value of 400 means its normal and 700 means bold. You can use between or less and higher to make text look more thinner or thicker. The example below demonstrates using numeric value for headings and paragraph.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
<!DOCTYPE html>
<html>
<head>
<style>
/*Using CSS font*/
h1
{
font-family:Verdana, Arial;
font-weight:900;
font-size:25px;
}
h2
{
font-family:“Times New Roman”, Arial;
font-weight:700;
font-size:20px;
}
p
{
font-family:Arial, Verana;
font-weight:400;
font-size:15px;
}
</style>
</head>
<body>
<h1>Heading 1 with 900 font-weight</h1>
<h2>Heading 2 with 700 font-weight</h2>
<p>Paragraph with 400 font-weight</p>
</body>
</html>
|
Also see HTML table | CSS font | HTML form | HTML Font
Leave A Comment?