Open In App

How to change the font size in HTML ?

Improve
Improve
Like Article
Like
Save
Share
Report

Changing the font size in HTML refers to adjusting the size of text displayed on a webpage. This adjustment can be done inline using the style attribute or globally using CSS.

Change Text Size with HTML font Tag

HTML <font> tag 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.

Syntax:

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

Example: In this example, we will use <font> tag.

HTML




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


Output:

Changing the font size using <font> tag in HTML

Explanation:

  • In the above example font sizes are adjusted using the deprecated <font> tag.
  • Specific sizes like 6 and 24 are assigned to text within the <font> tag.
  • This method is outdated and not recommended for modern web development.

Change Text Size with HTML big Tag

HTML <big> tag 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: In this example, we will use the <big> tag

HTML




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


Output:

Changing the font size using <big> tag in HTML

Explanation:

  • In this example we uses <big> tag to increase font size of “GeeksforGeeks”.
  • <big> tag is a presentational element but outdated for styling.
  • Modern approach prefers CSS for font size adjustment.
  • Using CSS offers better control and separation of concerns.

Bellow mentioned approaches are using CSS Properties.

Change Text Size with Inline CSS

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: In this example, we will use inline style attribute.

HTML




<!DOCTYPE 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:

Changing the font size using Inline style attribute

Explanation:

  • Inline style attributes are applied directly within HTML elements.
  • The font-size property is set to 20px for “GeeksforGeeks” and 25px for “Courses”.
  • Inline styling offers specific control over font sizes.
  • Provides a quick and direct way to style text within HTML elements.

Change Text Size with Internal or External CSS

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. You can use a separte CSS file in similar way.

Syntax:

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

Example: In this example, we will use separate CSS.

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:

Changing the font size using separate CSS 

Explanation:

  • In this example the body’s font size is set to 60px using the body selector.
  • The paragraph (p) element’s font size is specifically set to “xx-large” using the paragraph selector.
  • As a result, the paragraph “Welcome to GeeksforGeeks” appears larger than the surrounding text due to the applied font size.


Last Updated : 04 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads