HTML Font Size

In HTML, various tags are used to create web documents; one of them is the tag. The tag includes several attributes such as color, face, and size. In this article, we will understand the "size" attribute of tag.

The "size" is an attribute defined inside the tag, which specifies the size of the text contained in it. Previous versions of HTML supported it.

Syntax

In the above syntax, the number is the value of the "size" attribute, which denotes the text size.

The value for the font size lies between 1 and 7. By default, the font size of text on a web page is 3. A "size" attribute with a value of "1" assigns the smallest size to the text, and a "size" attribute with a value of "7" specifies the largest size for the text.

Note: The "size" attribute of the tag is not supported in HTML5 in favor of CSS (Cascading Style Sheets), so we can use CSS instead of the HTML tag.

Description of Font Sizes from 1 to 7

1. :

It is used to set the size of the text to the smallest.

2. :

It is used to make the text size slightly larger than the font size value of "1". You can use this size for the caption.

3. :

It is the standard size that is applied by default to all elements containing text if the font size is not defined manually.

4. :

It is used to make the text size bigger than the value "3" font size. You can use it for important text.

5. :

It is used to set the size of the text to even larger than the value "4" font size. You can use it for headings.

6. :

It is used to set the size of the text to extra-large.

7.

It is used to set the size of the text to the largest.

Let us understand HTML font size properly with the help of examples:

Example 1

In this example, we will apply the font size to the value "1" to see the behavior of an HTML element containing text.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of HTML Font Size with Value "1"</title>
</head>
<body>
    <div>
        <font size="1">Welcome to JavaTpoint!</font>
    </div>
    <div>
        <font size="1">Learn HTML online.</font>
    </div>
</body>
</html>

Output:

As you can see in the output below, the text size of the HTML element is the smallest.

Example 2

In this example, we will apply the font size to the value "7" to see the behavior of an HTML element containing text.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of HTML Font Size with Value "7"</title>
</head>
<body>
    <div>
        <font size="7">Welcome to JavaTpoint!</font>
    </div>
    <div>
        <font size="7">Learn HTML online.</font>
    </div>
</body>
</html>

Output:

As you can see in the output below, the text size of the HTML element is the largest.

Example 3

The following example uses different values of the size attribute from 1 to 7 to adjust the size of the text:

Code:

<!DOCTYPE html>  
<html>  
<title>
Example of Size attribute 
</title>  
<body>  
<Center>   
<font size="1">   
JavaTpoint Size = "1"  
</font>  
<br>  
<font size="2">   
JavaTpoint Size = "2"  
</font>  
<br>  
<font size="3">   
JavaTpoint Size = "3"  
</font>  
<br>  
<font size="4">   
JavaTpoint Size = "4"  
</font>  
<br>  
<font size="5">   
JavaTpoint Size = "5"  
</font>  
<br>  
<font size="6">   
JavaTpoint Size = "6"  
</font>  
<br>  
<font size="7">  
JavaTpoint Size = "7"  
</font>  
</Center>  
</body>  
</html>

Output:

In the above code, text is written inside each tag with different "size" attribute values from 1 to 7.

So, in the output, as you can see below, the text inside each tag appears to be different in size.

Browsers that Support the HTML Tag

Here are the browsers that support the HTML tag:

Firefox
Chrome
Microsoft Edge
Safari
Opera
Firefox Mobile
Opera Mobile
Microsoft Edge Mobile
Safari Mobile

Conclusion

In HTML, the tag has a "size" attribute that is responsible for the size of the text.
In earlier versions of HTML, the tag was used to specify the size of the text. Now, the CSS font-size property is used for setting text size.
Many browsers support the tag, such as Firefox, Chrome, Microsoft Edge, Safari, Opera, Firefox Mobile, Opera Mobile, Microsoft Edge Mobile, and Safari Mobile.

Next TopicHTML Image Button

← prev next →