HTML Font Size
Web structure starts with solid HTML. Learn how HTML Font Size contributes to accessible and semantic web pages in the tutorial below.
In HTML, various tags are used to create web documents; one of them is the < font> tag. The < font> tag includes several attributes such as color, face, and size. In this article, we will understand the "size" attribute of <font> tag.
The attribute "size" is declared within the < font> tag to indicate the text size within it. This feature was supported in earlier releases of HTML.
Syntax
<font size="number">
In the provided syntax, the numeric value represents the "size" attribute, indicating the font size for the text.
The font size value ranges from 1 to 7, with the default font size for text on a webpage set at 3. When using a "size" attribute with a value of "1", the text is assigned the smallest size, while a "size" attribute with a value of "7" indicates the largest size for the text.
Note: The "size" attribute of the < font> tag is not supported in HTML5 in favor of CSS (Cascading Style Sheets), so we can use CSS instead of the HTML < font> tag.
Description of Font Sizes from 1 to 7
1. ### 1. 1. ::
It is utilized to establish the minimum size for the text.
2. 2.:
This size adjustment is applied to increase the text size slightly above the font size defined as "1". It is commonly utilized for captions.
3. 3. 2.5::
It is the standard size that is applied by default to all elements containing text if the font size is not defined manually.
4. 4. 3.:
This feature enables increasing the font size beyond a value of "3", which can be utilized for emphasizing important text.
5. 5. <h5>::
This property is utilized to increase the font size beyond the default value of 4. It is commonly employed for creating headings.
6. 6. 5.:
This property is utilized to specify the text size as extra-large.
7. ### 7. 3.
It is utilized to adjust the font size to the maximum.
Let's delve into the concept of HTML font size with the aid of some illustrative examples:
Example 1
In this instance, we will set the font size to "1" to observe how an HTML element with text behaves.
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 our tutorial!</font>
</div>
<div>
<font size="1">Learn HTML online.</font>
</div>
</body>
</html>
Output:
As evident from the output displayed below, the font size of the HTML <p> element appears to be the most diminutive.
Example 2
In this instance, we will set the font size to "7" to observe how an HTML element that includes text reacts.
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 our tutorial!</font>
</div>
<div>
<font size="7">Learn HTML online.</font>
</div>
</body>
</html>
Output:
As evident from the displayed output, the font size of the HTML <p> tag is the most significant.
Example 3
In this illustration, various values of the size property ranging from 1 to 7 are utilized to control the text's size.
Code:
<!DOCTYPE html>
<html>
<title>
Example of Size attribute
</title>
<body>
<Center>
<font size="1">
C# Tutorial Size = "1"
</font>
<br>
<font size="2">
C# Tutorial Size = "2"
</font>
<br>
<font size="3">
C# Tutorial Size = "3"
</font>
<br>
<font size="4">
C# Tutorial Size = "4"
</font>
<br>
<font size="5">
C# Tutorial Size = "5"
</font>
<br>
<font size="6">
C# Tutorial Size = "6"
</font>
<br>
<font size="7">
C# Tutorial Size = "7"
</font>
</Center>
</body>
</html>
Output:
Within the provided code snippet, content is enclosed within individual tags labeled as < font>, each assigned with distinct "size" attribute values ranging from 1 to 7.
In the displayed output below, it is evident that the content enclosed within each < font> tag varies in length.
Browsers that Support the HTML < font> Tag
Here are the browsers that support the HTML < font> tag:
- Firefox
- Chrome
- Microsoft Edge
- Safari
- Opera
- Firefox Mobile
- Opera Mobile
- Microsoft Edge Mobile
- Safari Mobile
- In HTML, the <font> tag has a "size" attribute that is responsible for the size of the text.
- In earlier versions of HTML, the <font> 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 <font> tag, such as Firefox, Chrome, Microsoft Edge, Safari, Opera, Firefox Mobile, Opera Mobile, Microsoft Edge Mobile, and Safari Mobile.
