How to change the font size in HTML ?
Changing the font size in HTML refers to adjusting the displayed text size on a webpage. This can be achieved inline using the style attribute within HTML tags, specifying a font-size property value, or globally by defining styles in CSS.
Table of Content
- Change Text Size with HTML font Tag
- Change Text Size with HTML big Tag
- Change Text Size with Inline CSS
- Change Text Size with Internal or External 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.
<!DOCTYPE html>
<html>
<body>
<!-- Using <font> tag to set font size -->
<font size="6">
Welcome to w3wiki
</font>
<font size="24">
Beginner
</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>w3wiki</big>
</p>
</body>
</html>
Output:
Explanation:
- In this example we uses <big> tag to increase font size of “w3wiki”.
- <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">
w3wiki
</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 “w3wiki” 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 w3wiki</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 w3wiki” appears larger than the surrounding text due to the applied font size.
Contact Us