Do you think IIT Guwahati certified course can help you in your career?
Introduction
The <font> tag in HTML was widely used in earlier versions of HTML to define the style of text, such as its size, color, and typeface. Though it has been deprecated in modern HTML5 in favor of CSS, understanding the <font> tag can help beginners grasp how text styling evolved.
In this article, we will discuss the features of the <font> tag, including font size, font type, and font color, with examples and code.
Font Size
What is Font Size?
Font size determines how large or small the text appears on a webpage. With the <font> tag, the size attribute is used to specify the font size.
Syntax
<font size="value">Your Text</font>
value: An integer between 1 and 7, where 1 is the smallest and 7 is the largest.
Example 1: Using Font Size to Style Text
<!DOCTYPE html>
<html>
<head>
<title>Font Size Example</title>
</head>
<body>
<font size="2">This text is small.</font><br>
<font size="4">This text is medium-sized.</font><br>
<font size="7">This text is large.</font>
</body>
</html>
Output
Output Explanation
Text with size="2" will appear smaller than the default text.
Text with size="4" is slightly larger.
Text with size="7" is the largest size possible with the <font> tag.
Why Font Size Matters?
Font size helps create visual hierarchy, ensuring that the most important text stands out. While the <font> tag is useful for learning, CSS provides a more modern way to handle font sizes.
Font Type
What is Font Type?
Font type, also known as font family, defines the style or design of the text. The <font> tag uses the face attribute to specify the font type.
Syntax
<font face="font_name">Your Text</font>
font_name: Name of the font you want to apply, e.g., Arial, Times New Roman, Verdana.
Example 2: Using Font Type to Change Text Style
<!DOCTYPE html>
<html>
<head>
<title>Font Type Example</title>
</head>
<body>
<font face="Arial">This text is in Arial font.</font><br>
<font face="Times New Roman">This text is in Times New Roman font.</font><br>
<font face="Verdana">This text is in Verdana font.</font>
</body>
</html>
Output
Explanation
The face="Arial" renders text in the Arial font style.
Similarly, Times New Roman and Verdana change the text style to the respective font types.
Importance of Font Type
Using the right font type enhances readability and sets the tone for the content. Professional documents often use Times New Roman, while casual designs may use Verdana or Comic Sans.
Font Color
What is Font Color?
Font color determines the color of the text displayed on a webpage. The <font> tag uses the color attribute to define this property.
Syntax
<font color="color_name_or_code">Your Text</font>
color_name_or_code: Can be a color name (e.g., red, blue) or a hex code (e.g., #FF0000).
Example 3: Changing Font Color
<!DOCTYPE html>
<html>
<head>
<title>Font Color Example</title>
</head>
<body>
<font color="red">This text is red.</font><br>
<font color="#00FF00">This text is green using a hex code.</font><br>
<font color="blue">This text is blue.</font>
</body>
</html>
Output
Explanation
Text with color="red" will appear red.
Text with color="#00FF00" will appear green, demonstrating the use of hex codes.
Text with color="blue" will display as blue.
Why Font Color is Useful?
Choosing appropriate colors for text ensures better readability and visual appeal. It also helps highlight important content on a webpage.
What to Use Instead?
While the <font> tag still works, it is considered outdated & is not the best practice for styling text on web pages. Instead, you should use Cascading Style Sheets (CSS) to specify font properties. CSS allows you to separate the presentation & styling of a web page from its HTML structure.
Let’s look at some examples of how to style text using CSS instead of the <font> tag:
To set the font family:
<p style="font-family: Arial, sans-serif;">This is some text.</p>
To set the font size:
<p style="font-size: 16px;">This is some text.</p>
To set the text color:
<p style="color: blue;">This is some text.</p>
You can also define CSS styles in a separate stylesheet & apply them to HTML elements using the class or id attributes:
<head>
<style>
.blue-text { color: blue; }
</style>
</head>
<body> <p class="blue-text">This is some blue text.</p>
</body>
If you use CSS to style text, it is much more flexible & maintainable than using the old <font> tag. It allows you to change the styling of text across an entire website by editing a single CSS file.
DOM interface
The <font> element is represented in the Document Object Model (DOM) by the HTMLFontElement interface. This interface inherits properties & methods from the HTMLElement interface, which is the base class for all HTML elements in the DOM.
The HTMLFontElement interface provides a few properties specific to the <font> element:
color - gets or sets the color of the text
face - gets or sets the font face (font family)
size - gets or sets the font size
Let’s discuss an example of how you can access & modify these properties using JavaScript:
After running this script, the text will be displayed in blue color with a smaller size & a different font family.
Note that modifying these properties via the DOM is still not recommended, as it mixes presentation with content. It's better to use CSS classes & modify styles through the style property or by toggling class names.
Note: While the HTMLFontElement interface exists for backward compatibility, it's generally not used in modern web development, as CSS provides a more powerful & flexible way to style text content.
Specifications
The <font> tag was first introduced in HTML 3.2 and was part of the HTML 4.01 specification. However, it has been deprecated in HTML 4.01 and obsoleted in HTML5.
Here are the relevant specifications that mention the <font> element:
HTML 3.2 (1997)
Introduced the <font> tag with the face, size, and color attributes.
HTML 4.01 (1999)
Deprecated the <font> tag in favor of using CSS for styling text.
Defined the <font> tag as a phrase element that specifies a font size, font face, and color for its content.
XHTML 1.0 (2000)
Included the <font> tag for backward compatibility, but recommended using CSS instead.
HTML5 (2014)
Obsoleted the <font> tag, stating that it must not be used by authors.
Recommends using CSS properties like font, font-family, font-size, and color to style text.
Although the <font> tag is obsolete in HTML5, web browsers still support it for backward compatibility reasons. However, web developers are strongly encouraged to use CSS for all text styling purposes.
Let’s look at an example of how to achieve the same styling as the <font> tag using CSS:
<font color="red" face="Arial" size="4">This is some text.</font>
<!-- CSS equivalent -->
<span style="color: red; font-family: Arial; font-size: 1em;">This is some text.</span>
Frequently Asked Questions
Why is the <font> tag deprecated?
The <font> tag is deprecated because modern web design prefers using CSS for text styling. CSS provides more flexibility and maintains a clean separation between content and design.
What are the alternatives to the <font> tag?
You can use CSS properties like font-size, font-family, and color to achieve the same effects.
Can I still use the <font> tag in modern HTML?
Yes, you can use it, but it is not recommended. Modern browsers still support the <font> tag, but relying on CSS ensures better compatibility and maintainability.
Conclusion
The <font> tag was a simple and effective way to style text in earlier HTML versions. This article covered its key attributes: font size, font type, and font color, with practical examples. While it’s now considered outdated, understanding the <font> tag is helpful for learning the basics of text styling in web development.
24+ registered 
