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.
Table of Content
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.
<!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:
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
<!DOCTYPE html><html>
<body>
<p>
<!-- Using the <big> tag for increasing
the font size -->
Welcome to <big>GeeksforGeeks</big>
</p>
</body>
</html>
|
Output:
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.
<!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:
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>
<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:
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.