View Categories

HTML – Fonts

Table of Contents

Fonts are crucial for enhancing the readability and overall appearance of a website. They can make a significant difference in how users interact with and absorb your content. In HTML, the <font> tag was once used to style text, allowing changes to font face, size, and color. However, the <font> and <basefont> tags have been deprecated in modern HTML, meaning they should no longer be used. Instead, CSS is the preferred way to manage fonts on web pages.

That being said, for learning purposes, we’ll explore the <font> tag, its attributes, and how it works to customize fonts on a webpage.

Web Safe Fonts #

Web safe fonts are a collection of fonts that are universally available across most browsers and devices. In modern web design, CSS font stacks are used to provide alternative fonts in case the first one is unavailable. Here’s a list of common web-safe fonts: Arial, Helvetica, Times New Roman, Verdana, Georgia, and Courier New.

Examples of HTML Fonts #

We will cover various examples of how fonts can be styled using the deprecated <font> tag and the <basefont> tag for learning purposes. Remember, it is highly recommended to use CSS for production websites.

1. Setting Font Size

You can set the font size of text using the size attribute of the <font> tag. The size can be set between 1 (smallest) to 7 (largest). The default size is 3.

<!DOCTYPE html>
<html>
<head>
   <title>Setting Font Size</title>
</head>
<body>
   <font size="1">Font size = "1"</font><br />
   <font size="3">Font size = "3"</font><br />
   <font size="5">Font size = "5"</font>
</body>
</html>

2. Relative Font Size

Relative font size allows you to specify font size in relation to the current size. You can use +n or -n to increase or decrease the font size.

<!DOCTYPE html>
<html>
<head>
   <title>Relative Font Size</title>
</head>
<body>
   <font size="-1">Font size = "-1"</font><br />
   <font size="+2">Font size = "+2"</font>
</body>
</html>

3. Setting Font Face

The face attribute allows you to specify the font type. If the user doesn’t have the specified font installed, their browser will fall back to the default font.

<!DOCTYPE html>
<html>
<head>
   <title>Font Face</title>
</head>
<body>
   <font face="Times New Roman" size="5">Times New Roman</font><br />
   <font face="Verdana" size="5">Verdana</font><br />
   <font face="Arial" size="5">Arial</font>
</body>
</html>

4. Specifying Alternate Font Faces

You can specify multiple font faces in case the primary one is unavailable. The browser will use the first available font in the list.

<!DOCTYPE html>
<html>
<head>
   <title>Alternate Font Faces</title>
</head>
<body>
   <font face="Arial, Helvetica, sans-serif">This is a fallback font example</font>
</body>
</html>

5. Setting Font Color

The color attribute allows you to set the font color using either color names or hexadecimal codes.

<!DOCTYPE html>
<html>
<head>
   <title>Setting Font Color</title>
</head>
<body>
   <font color="#FF00FF">This text is pink</font><br />
   <font color="red">This text is red</font>
</body>
</html>

6. The <basefont> Element

The <basefont> tag is used to set a default font for an entire page. It defines the base size, color, and font family for all text on the page unless overridden by the <font> tag.

<!DOCTYPE html>
<html>
<head>
   <title>Basefont Example</title>
</head>
<body>
   <basefont face="Arial" size="3" color="#0000FF">
   <p>This paragraph uses the default base font.</p>
   <p><font size="+2" color="green">This is larger, green text.</font></p>
</body>
</html>

Important Notes #

  • Deprecated Tags: The <font> and <basefont> tags are deprecated and should not be used in modern web development.
  • Use CSS Instead: Always use CSS to manage font styling, as it offers better flexibility and control.

For example, here’s how you can achieve font customization using CSS:

p {
   font-family: Arial, sans-serif;
   font-size: 16px;
   color: #333;
}

By using CSS, you ensure that your website is responsive, modern, and easily maintainable.

Want to learn HTML with an instructor, either offline or online? Find experienced tutors near you and join Coaching Wallah—completely free for students!

What are your Feelings

Leave your comment