In This Tutorial
Font size in HTML
The font size attribute sets the size of text in the headings, div, paragraphs, links etc. You can specify the size in the font tag of HTML or by using the CSS.
You should avoid using the font tag for future developments as this is not supported in HTML 5. Instead of that, you should use CSS properties to set the size of text on your web pages.
Following are examples to set the font size by using both ways.
Example of HTML font size by font attribute
The following example shows how to set the font size in the <font> tag of HTML. The example sets the font for h1 and h2 headings along with a paragraph.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<html>
<head>
<title>HTML Font </title>
</head>
<body>
<h1><font size=“6” color=“red”>This is heading 1 </font></h1>
<h2><font size=“4” color=“blue”>This is Heading 2 </font></h2>
<p> <font size=“4” color=“#003399”>This is Paragraph </font></p>
</body>
</html>
|
Font size with CSS example
The following example sets the font by using the font-size property inside the CSS block. We used <h1>, <h2> and <div> tags of HTML where font is applied. The <p> tag size is in em while <h1>’s size in pixels and <h2> size is set with the points.
|
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
|
<!DOCTYPE html>
<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> heading 1 with px font-size</h1>
<h2> Heading 2 with pt font-size</h2>
<p> Paragraph with em font-size</p>
</body>
</html>
|
You can see, we have defined the font size properties in the CSS block, under the head section of the document.
You can also create external CSS files and create classes or IDs to apply the font size and other font properties to different elements of the document.
Leave A Comment?