HTML Font Size

The HTML <font> tag uses the size attribute to specify the size of the text. We can set the size attribute’s value from 1 to 7. The default size of the font is 3.

You should not use the font size to display paragraphs as headings or to display headings as paragraphs. Every tag in HTML has a purpose, so use the HTML tag as per the requirement.

Use appropriate HTML tags, such as <h1> to <h6> for headings and <p> for paragraphs. The <h1> tag represents the main heading or important heading of the page once used in a web page, and the <h6> tag represents a less important heading.

We do not specify heading tags for size, but we use them for specifying the titles and importance of something.

We can also use the style attribute to change the font size of an HTML document. We can also use font-size property and define it inside the <style> tag.

Syntax:

There are three ways in which we can provide font size to the element:

• Using <font> tag with size attribute:

<font size="value"> Some text </font>

• Using style attribute with font-size property:

<element_name style="font-size: value"> Some text </ element_name>

• Using font-size property inside the <style> tag:

<style> font-size: 20px; </style>

Examples of HTML Font Size

Example 1:

This example demonstrates the use of the <font> tag with the size attribute. We are using font sizes from 1 to 7.

<!DOCTYPE html>
<html>
<head>
    <title>
        Example 1 of HTML Font Size
    </title>
</head>


<body>
<div> 
    <font size="1"
          <p> The size of this text is 1. </p>
    </font>
</div>
<div> 
    <font size="2"
          <p> The size of this text is 2. </p>
    </font>
</div>
<div> 
    <font size="3"
          <p> The size of this text is 3. </p>
    </font>
</div>
<div> 
    <font size="4"
          <p> The size of this text is 4. </p>
    </font>
</div>
<div> 
    <font size="5"
          <p> The size of this text is 5. </p>
    </font>
</div>
<div> 
    <font size="6"
          <p> The size of this text is 6. </p>
    </font>
</div>
<div> 
    <font size="7"
          <p> The size of this text is 7. </p>
    </font>
</div>
</body>
</html>

Output:

The output shows the text of different font sizes.

Example 2:

This example shows the use of HTML font sizes. We are using font size as inline style attribute to provide the size to <h1> and <p> element.

<!DOCTYPE html>
   <html>    
      <head>      
         <title> Example 2 of HTML Font Size </title>    
      </head>    
      <body>      
         <h1 style="color: purple; font-size:55px;"> Font Size </h1>      
         <p style="color: blue; font-size:35px;"> This is paragraph 1. </p>
         <p style="color: red; font-size:65px;"> This is paragraph 2. </p>    
         <p style="color: green; font-size:33px;">This is paragraph 3. </p>    
         <p style="color: pink; font-size: 45px;">This is paragraph 4. </p>    
      </body>
</html>

Output:

The output shows text of different sizes applied to them by using the font-size property inside the style attribute.

Example 3:

In this example, we are using the font size inside the <style> tag to provide size to the HTML form elements.

<!DOCTYPE html>  
<html>  
<head>  
<title> Example 3 of HTML Font Size </title>  
<style>
body {  
font-family: Arial, Helvetica, sans-serif;  
background-color: violet;  
font-size:20px;
}   
.container {  
padding: 50px;  
background-color: #a3eaea;
font-size:20px;  
}  
input[type=text] {  
  padding: 12px; 
  width: 100%;  
  border: none;  
  margin: 2px 0 20px 0;  
  font-size:20px;
  background: lavenderblush;  
}  
input[type=text]:focus {  
background-color: rgb(164, 183, 189);  
font-size:20px;
outline: none;
}  
</style>
</head>  
<body bgcolor="cyan">  
<center>  
<h1> Applying Font size in the form </h1>  
</center>  
<form class="container"> 
    <label for="firstname"> First Name: </label>  <input type="text" name="firstname" value="First name">
    <br> 
    <br>
    <label for="lastname"> Last Name: </label>  
    <input type="text" name="lastname" value="Last name">
    <br>
    <br>
    <label for="Email-id"> Email Id: </label> 
    <input type="text" name="Email-id" value="Email-id">
    <br>
    <br>
    <label for="Employee-Id"> Employee Id: </label>
    <input type="text" name="Employee-Id" value="Employee-id">
    <br>
    <br>
    <label for="Gender"> Gender: </label>
    <select name="Gender">
        <option value="Male"> MALE </option>
        <option value="Female"> FEMALE </option>
        <option value="Other"> OTHER </option>
    </select>
    <br>
    <br>
    <label for="Phone Number"> Phone Number: </label>
    <input type="text" name="Phone Number" value="Phone Number">
    <br>
    <br>
   <button type="Submit"> SUBMIT </button>
   <button type="Reset"> RESET </button>
  </form>
</body>  
</html>

Output:

The output shows a form with different font sizes applied on the elements.

Browser Support:

The following browsers support it:

• Google Chrome
• Internet Explorer
• Microsoft Edge
• Opera
• Mozilla Firefox
• Safari