Quick Reach
The font weight property of CSS
In your web pages, you need to make specific parts stand out more over the others. The headings should be more prominent along with the certain text within the paragraphs as well.
Font weight example to make text bold
In order to make the text bold or normal, CSS provides the font-weight property. A value between thin and thick or normal to bold can also be given in the CSS font-weight property.
Although, the <b> tag can also be used to make the text bold in HTML elements like paragraphs. However, you should set it by using the font-weight CSS property (which is the preferred method these days).
Syntax of CSS font weight
Following is the general syntax to use the font-weight property:
font-weight: value;
Where the value can be:
- normal
- bold
- a numeric value between normal to bold (see the second example below)
An example of font with bold example
The example sets the font-weight of h1 as bold, h2 to use lighter and makes it normal for the paragraph by using the font-weight property. See the demo by clicking the link or image:
Experience this example online
|
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
|
<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>This is heading 1 with bold font-weight</h1>
<h2>This is Heading 2 with lighter font-weight</h2>
<p>This is Paragraph with normal font-weight</p>
</body>
</html>
|
You can see, the h1 is set to be shown as bold, h2 is lighter while the paragraph is normal. You can apply the bold font to the paragraph or div tag, as well.
A font weight example by number
A number can also be given in the font-weight property to specify from normal to bold range. A value of 400 means its normal and 700 means bold text. That means, to make text bold, use the higher value.
The example below demonstrates using a numeric value for headings and paragraph.
Experience this example online
|
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
|
<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>This is heading 1 with 900 font-weight</h1>
<h2>This is Heading 2 with 700 font-weight</h2>
<p>This is Paragraph with 400 font-weight</p>
</body>
</html>
|
You can see, the h1 is given 900 in CSS font-weight property that makes text bold while the 700 value for the h2 is lesser bold.
Further Reading: CSS font family | CSS font
Leave A Comment?