HTML – FONTS
Fonts play a very important role in making a website more user friendly and increasing
content readability. Font face and color depends entirely on the computer and browser
that is being used to view your page but you can use HTML <font> tag to add style, size,
and color to the text on your website. You can use a <basefont> tag to set all of your
text to the same size, face, and color.
The font tag is having three attributes called size, color, and face to customize your fonts.
To change any of the font attributes at any time within your webpage, simply use the
<font> tag. The text that follows will remain changed until you close with the </font> tag.
You can change one or all of the font attributes within one <font> tag.
Note: The font and basefont tags are deprecated and it is supposed to be removed in a
future version of HTML. So they should not be used rather, it's suggested to use CSS styles
to manipulate your fonts. But still for learning purpose, this chapter will explain font and
basefont tags in detail.
Setting Font Size with CSS
1. Using the font-size Property
The font-size property in CSS allows you to specify the size of text. You can define font sizes in various units like pixels (px), ems (em), rems (rem), percentages (%), or points (pt).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Set Font Size</title>
<style>
h1 {
font-size: 36px; /* Font size in pixels */
}
p {
font-size: 1.2em; /* Relative to parent element */
}
small {
font-size: 80%; /* Percentage of parent element size */
}
</style>
</head>
<body>
<h1>Large Heading</h1>
<p>Regular paragraph text.</p>
<small>Smaller text size.</small>
</body>
</html>
Units for Font Size
Absolute Units:
- px (pixels): Fixed size regardless of screen size.
- pt (points): Typically used for print but not recommended for web.
font-size: 16px;
Relative Units:
- em: Relative to the font size of its parent element.
- rem: Relative to the font size of the root element (<html>).
- %: Relative to the font size of the parent element.
font-size: 1.5em; /* 1.5 times the parent element's size */
font-size: 120%; /* 120% of the parent element's size */
Setting Font Size Globally
Use the font-size property in the body or html tag to set a global size for the entire webpage.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Global Font Size</title>
<style>
body {
font-size: 16px; /* Default font size for the whole page */
}
h1 {
font-size: 2rem; /* Twice the root font size */
}
p {
font-size: 1rem; /* Same as root font size */
}
</style>
</head>
<body>
<h1>Global Font Sizing Example</h1>
<p>This paragraph is styled relative to the global font size.</p>
</body>
</html>
Setting Font Size Inline (Not Recommended)
Although you can set font size directly within the HTML using the style attribute, this is discouraged because it mixes content with presentation.
<p style="font-size: 20px;">This text is styled inline.</p>
Responsive Font Sizes
For responsive web design, consider using relative units (em, rem, %) or CSS features like clamp() or media queries.
font-size: clamp(16px, 2.5vw, 24px);
This ensures the font size:
- Is at least
16px - Scales with the viewport width (
2.5vw) - Does not exceed
24px.
<!DOCTYPE html>
<html>
<head>
<title>Setting Font Size</title>
</head>
<body>
<font size="1">Font <p style="float: right;">size="1"</p></font><br />
<font size="2">Font <p style="float: right;"> size="2"</p></font><br />
<font size="3">Font <p style="float: right;"> size="3"</p></font><br />
<font size="4">Font <p style="float: right;"> size="4"</p></font><br />
<font size="5">Font <p style="float: right;"> size="5"</p></font><br />
<font size="6">Font <p style="float: right;"> size="6"</p></font><br />
<font size="7">Font size="7"</font>
</body>
</html>
This will produce the following result
Setting Font Face
You can set font face using face attribute but be aware that if the user viewing the page
doesn't have the font installed, they will not be able to see it. Instead user will see the
default font face applicable to the user's computer.
Example
<!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="Comic sans MS" size="5">Comic Sans MS</font><br />
<font face="WildWest" size="5">WildWest</font><br />
<font face="Bedrock" size="5">Bedrock</font><br />
</body>
</html>
This will produce the following result
Setting Font Color
You can set any font color you like using color attribute. You can specify the color that you
want by either the color name or hexadecimal code for that color.
Example
<!DOCTYPE html>
<html>
<head>
<title>Setting Font Color</title>
</head>
<body>
<font color="#FF00FF">This text is in pink</font><br />
<font color="#800080">This text is in pink</font><br />
<font color="#228B22">This text is in pink</font><br />
<br />
<font color="Magenta">This text is Magenta</font><br />
<font color="red">This text is red</font><br />
<font color="Green">This text is green</font><br />
</body>
</html>
This will produce the following result
The <basefont> Element:
The <basefont> element is supposed to set a default font size, color, and typeface for any
parts of the document that are not otherwise contained within a <font> tag. You can use
the <font> elements to override the <basefont> settings.
The <basefont> tag also takes color, size and face attributes and it will support relative
font setting by giving size a value of +1 for a size larger or -2 for two sizes smaller.
Example
<!DOCTYPE html>
<html>
<head>
<title>Setting Basefont Color</title>
</head>
<body>
<basefont face="arial, verdana, sans-serif" size="2" color="#ff0000">
<p>This is the page's default font.</p>
<h2>Example of the <basefont> Element</h2>
<p><font size="+2" color="darkgray">
This is darkgray text with two sizes larger
</font></p>
<p><font face="courier" size="-1" color="#000000">
It is a courier font, a size smaller and black in color.
</font></p>
</body>
</html>
This will produce the following result
FAQ (Frequently Asked Questions) HTML – FONTS
Q 1. What is the <font> tag in HTML?
Answer: The <font> tag was used in older versions of HTML to define the font face, size, and color of text. However, it is now deprecated in HTML5. Modern websites use CSS to control font styling.Q 2. How can I set the font style in HTML?
Answer: To set font styles in HTML:1.Deprecated Method: Use the <font> tag (not recommended)
<font face="Arial" size="4" color="blue">Hello, World!</font>
2.Modern Method: Use CSS with the font-family, font-size, and color properties
<p style="font-family: Arial; font-size: 16px; color: blue;">Hello, World!</p>
Q 3. Why is the <font> tag deprecated?
Answer: The <font> tag is deprecated because:
- It mixes content with presentation, making code harder to maintain.
- CSS provides a more powerful and flexible way to style fonts.
- It is not supported in modern HTML5.
Q 4. How do I set global font styles for my website?
Answer: You can use CSS to define global font styles. For example:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
font-family: Arial, sans-serif;
font-size: 16px;
color: #333;
}
</style>
</head>
<body>
<p>This text follows the global font style.</p>
</body>
</html>
5. What units can I use for font sizes?
Answer: Font sizes can be specified using:- Absolute Units: px, pt (e.g., font-size: 16px;)
- Relative Units: em, rem, %, vw (e.g., font-size: 1.5em; or font-size: 120%;)
Q 6. Can I use custom fonts on my website?
Answer: Yes, you can use custom fonts by:- Using web-safe fonts (like Arial, Times New Roman).
- Integrating web fonts like Google Fonts
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Roboto', sans-serif;
}
</style>
7. What are web-safe fonts?
Answer: Web-safe fonts are fonts that are pre-installed on most devices, ensuring consistent display across browsers. Examples include:- Arial
- Times New Roman
- Courier New
- Verdana
Q 8. How do I make font sizes responsive?
Answer: To create responsive font sizes, use relative units like em or rem, or use the CSS clamp() function:
font-size: clamp(16px, 2.5vw, 24px);
Q 9. Can I use multiple font faces in a single line?
Answer: Yes, you can combine multiple font faces by using CSS classes or inline styles:
<p>
<span style="font-family: Arial;">This is Arial</span> and
<span style="font-family: Georgia;">this is Georgia.</span>
</p>
Q 10. How do I style text for accessibility?
Answer:
- Use sufficient font sizes (16px or larger).
- Ensure good color contrast between text and background.
- Use readable fonts (sans-serif for body text).
- Avoid using only color to convey information