HTML, the backbone of the World Wide Web, has evolved significantly over the years, and so have the ways we style and present text on web pages. In the early days of web development, HTML font tags played a crucial role in defining the appearance of text. However, with the advent of Cascading Style Sheets (CSS), the landscape of web typography has transformed, ushering in more sophisticated and flexible approaches to font styling.
In this article, we'll dive deep into syntax of HTML font tags, understand their usage in the context of contemporary web development.
HTML Fonts
In the early versions of HTML, font tags were the primary means of specifying text styling. Fonts are very important for any website. It enhances the readability of the content and makes the website more user-friendly.
The <font> tag allowed developers to define various attributes such as size, color, and face directly within the HTML document. Normally, the size, face, and color of the font are dependent on the browser, but you can change the format of the text on the web page.
<font> tag is used to change the style, size and color of the text on the web page.
HTML <font> tag has various attributes to add style to the text. They are discussed below
Set Font Color
Color attribute is used to specify the color of the text.
You can specify the font color either as color name or 6 digits hexadecimal code.
Example
<font color = “red”> Hello </font>
<font color = “#ff0000”> Hello </font>
Setting Font Face
Face attribute is used to specify the face (a type of font) of the text.
Common fonts are “Times New Roman”, “Verdana” and “Helvetica”.
If the user who views your web page does not have that font installed on his/her computer than the user will not see the text in that font. Instead, it displays the text in default font which is “Times New Roman”. This font is found on all computers.
Example
<font face = “Century Gothic”> Hello </font>
You can specify multiple font faces by separating each by a comma.
Example
<font face = “Arial, Century Gothic, Comic Sans MS”> Hello </font>
When page loads in a web browser, the browser will display the text in first font face that is available. If none of the font faces are available then default font face “Times New Roman” is used.
Set Font Size
Size attribute is used to specify the size of the text.
It is specified in number. The range is from 1 (smallest) to 7 (largest).
The default size is 3.
Example
<font size = “4”> Hello </font>
Full Example
<!DOCTYPE html>
<html>
<head>
<title>Font Example</title>
</head>
<body>
<font face = "Comic sans MS"> Text is in comic sans ms, size = 3</font><br />
<font color = "red" size="4">Red text with size = 4</font><br />
<font size = "5">Text in default font with size = 5</font><br />
<hr />
<font face = "Verdana" color = "#ff0000" size="6"> Red text, size = 6 and face = Verdana </font>
<hr />
<font face = "Times New Roman, Verdana" size="7"> Text with size = 7 and multiple face </font>
</body>
</html>
Output
Conclusion
HTML font tags plays a crucial role in defining the appearance of text. It helped developers to define size, color and type of the text direclty in HTML document itself.
