Quick Reach
The font-size property of CSS
The font-size property sets the font size of text in HTML elements. This may be required to set the heading size of top heading, for example, to be larger than text that comes underway in your web page. With font size property, you can control the size of the text in different elements.
An example of font-size
Similarly, the font size in paragraphs <p> might be required smaller in certain paragraphs than others.
Following are a few examples of font size CSS property, let us first look at the syntax.
Syntax of font size
The syntax to use CSS font-size property is:
font-size: 15px;
font-size: 15pt;
font-size: medium;
The value of font-size CSS property can be set by the different ways. The font size can be set by using small, large, and medium values. It can also be specified by using the length in pixels (PX), pt, cm etc.
Besides, you can use the x-small, xx-small for even the smaller size and x-large and xx-large for the larger size.
The examples below shows setting the font-size by different ways.
Font-size example by length
This example sets the font-size of heading 1 in px, heading 2 in pt and paragraph in em. Where em is equal to the current font size of the document.
If you set the value as 2em in font size property then it will be double of the size of document default text.
*One pt is equal to 1/72 of an inch.”
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
|
<html>
<head>
<style>
/*Using CSS font*/
h1
{
font-family:Verdana, Arial;
font-size:25px;
}
h2
{
font-family:“Times New Roman”, Arial;
font-weight:700;
font-size:20pt;
}
p
{
font-family:Arial, Verana;
font-weight:400;
font-size:1em;
}
</style>
</head>
<body>
<h1>This is heading 1 with px font-size</h1>
<h2>This is Heading 2 with pt font-size</h2>
<p>This is Paragraph with em font-size</p>
</body>
</html>
|
Font size example by small, large factor
This example uses the small, x small, large, x large in headings and paragraphs to set CSS text size.
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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
|
<html>
<head>
<style>
/*Using CSS font*/
h1
{
font-family:Verdana, Arial;
font-size:xx-large;
}
h2
{
font-family:“Times New Roman”, Arial;
font-weight:700;
font-size:x-large;
}
h3
{
font-family:“Times New Roman”, Arial;
font-weight:700;
font-size:large;
}
.p1
{
font-family:Arial, Verana;
font-weight:400;
font-size:small;
}
.p2
{
font-family:Arial, Verana;
font-weight:400;
font-size:x-small;
}
.p3
{
font-family:Arial, Verana;
font-weight:400;
font-size:xx-small;
}
</style>
</head>
<body>
<h1>This is heading 1 with xx-large font-size</h1>
<h2>This is Heading 2 with x-large font-size</h2>
<h3>This is Heading 3 with large font-size</h3>
<p>This is Paragraph 1 with small font-size</p>
<p>This is Paragraph 2 with x-small font-size</p>
<p>This is Paragraph 3 with xx-small font-size</p>
</body>
</html>
|
You can see, the h1 is given xx-large, h2 is x-large and h3 is given the large value for CSS text size. Similarly, the example shows three <p> tags where p1 is given small, p2 x-small and p3 xx-small values in CSS font size property to make the text size larger or smaller.
Also see CSS font | CSS font-weight
Leave A Comment?