Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to change the font size in HTML?

  • Last Updated : 15 Mar, 2021

In this article, we will learn how one can change the font size in HTML. This can be used in situations where a text has to be highlighted due to its importance or made smaller for a caption. This can be achieved using the following approaches.

Approach 1: The <font> tag in HTML can be used for making changes to the font that is enclosed within the tags. It has various attributes that can be used to specify the size, color, or face of the font. This tag was deprecated in HTML5, therefore this approach may not work in modern browsers.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

Syntax:

<font size="24">Your Text</font>

Example:



HTML




<html>
<body>
  <!-- Using <font> tag to set font size -->
  <font size="6">
    Welcome to GeeksforGeeks
  </font>
  <font size="24">
    Aman Rathod
  </font>
</body>
</html>

Output:

Approach 2:  The <big> tag in HTML can be used for increasing the font size by one level that is enclosed within the tags. It does not have any attributes. This tag was deprecated in HTML5, therefore this approach may not work in modern browsers.

Syntax:

<big>Your Text</big>

Example:

HTML




<html>
<body>
    
<p>
    <!-- Using the <big> tag for increasing
    the font size -->
    Welcome to <big>GeeksforGeeks</big>
  </p>
  
</body>
</html>

Output:

Approach 3: Using the inline style attribute to change the font-size of the tag it is used on. The usage of this attribute overrides any style set globally.



Syntax:

<p style="font-size: 24px;">Your Text</p>

Example:

HTML




<html>
<body>
  <!--- Using Inline style
  attribute to edit font size -->
  <p style="font-size:20px">
    GeeksforGeeks
  </p>
  
  <p style="font-size:25px">
    Courses
  </p>
  
</body>
</html>

Output:

Approach 4: Using separate CSS to select the required text and using the font-size property to change the font size. The size value can be set using length units or keywords like x-small, small or large.

Syntax:

<style>
p
{
  font-size: large;
}
</style>

Example:

HTML




<html>
<head>
    
  <!-- Using CSS to change
  the font size -->
  <style>
    body {  
      font-size: 60px;
    }
  
    p {
      font-size:xx-large;
    }  
  </style>  
</head>
<body>
  Perfect Portal for Geeky
    
<p>Welcome to GeeksforGeeks</p>
  
</body>
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :