<basefont>
Defines a default font, size, and color for text (DEPRECATED)
⚠️ DEPRECATEDQuick Answer
What was the <basefont> tag?
The <basefont> tag was used in HTML4 to set default font properties (face, size, color) for all text in a document. It has been deprecated and removed from HTML5. Use CSS instead: set font properties on the body element or use CSS variables for consistent typography across your site.
Definition and Usage
<basefont> tag
is obsolete and non-conforming in modern HTML. This tag was deprecated in HTML 4.01
and removed completely in HTML5.
The <basefont> tag was used in older versions
of HTML to specify a default font, font size, and text color for
all text in a document.
This tag was placed in the <head> section and
affected all text that came after it in the document.
<basefont>.
Browser support and standards
Browser rendering and modern HTML conformance are different questions. Check the current element reference for the browsers and features your project needs; the older source version table is not a current compatibility guarantee.
Read the MDN element referenceOld Attributes (HTML 4.01)
These attributes were used with the
<basefont> tag in HTML 4.01 but are no longer
valid:
| Attribute | Value | Description |
|---|---|---|
| color | rgb(x,x,x) #xxxxxx colorname |
Specified the default text color |
| face | font_family | Specified the default font family |
| size | number | Specified the default font size (1-7) |
Migration Guide: Use CSS Instead
❌ Old HTML 4 Way (Deprecated)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<basefont color="blue" size="4" face="Arial">
</head>
<body>
<p>This text uses the basefont settings.</p>
</body>
</html>✓ Modern HTML5 Way (Recommended)
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: blue;
font-size: 16px;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<p>This text uses CSS styling.</p>
</body>
</html>CSS Replacement Examples
Setting Default Font Family
Example - CSS Method
<style>
body {
font-family: 'Helvetica', 'Arial', sans-serif;
}
</style>Setting Default Font Size
Example - Multiple Units
<style>
/* Using pixels */
body {
font-size: 16px;
}
/* Using em (relative) */
body {
font-size: 1em;
}
/* Using rem (relative to root) */
body {
font-size: 1rem;
}
/* Using percentage */
body {
font-size: 100%;
}
</style>Setting Default Text Color
Example - Different Color Formats
<style>
/* Using color name */
body {
color: navy;
}
/* Using hexadecimal */
body {
color: #1a1a1a;
}
/* Using RGB */
body {
color: rgb(26, 26, 26);
}
/* Using RGBA (with transparency) */
body {
color: rgba(26, 26, 26, 0.9);
}
</style>Complete Default Styling
Example - Modern CSS Typography
Approved-page light CSS-variable defaults are supplied: --text-primary, --bg-primary. The snippet includes CSS inside its HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modern Typography</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 16px;
line-height: 1.6;
color: var(--text-primary);
background-color: var(--bg-primary);
margin: 0;
padding: 20px;
}
h1, h2, h3 {
font-family: Georgia, 'Times New Roman', serif;
color: #2c3e50;
}
p {
margin-bottom: 1em;
}
</style>
</head>
<body>
<h1>Welcome to Modern Web Design</h1>
<p>This page uses CSS for all typography and styling.</p>
<p>No deprecated tags are used - it's clean, semantic HTML5!</p>
</body>
</html>Using External CSS File
Example - Best Practice
Unavailable or blocked: stylesheet “styles.css”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.
<!-- index.html -->
<!DOCTYPE html>
<html
lang="en"
>
<head
>
<meta charset="UTF-8" />
<link
rel="stylesheet"
href="styles.css"
/>
</head
>
<body>
<p>This uses an external CSS file for styling.</p>
</body>
</html
>
/* styles.css */
body {
font-family: Arial, sans-serif;
font-size: 16px;
color: #333333;
line-height: 1.5;
}Responsive Typography
Example - Modern Responsive Design
<style>
/* Base styles */
body {
font-family: system-ui, -apple-system, sans-serif;
font-size: 16px;
color: #212529;
}
/* Tablet and larger */
@media (min-width: 768px) {
body {
font-size: 18px;
}
}
/* Desktop and larger */
@media (min-width: 1024px) {
body {
font-size: 20px;
}
}
/* Using clamp for fluid typography */
h1 {
font-size: clamp(1.5rem, 5vw, 3rem);
}
</style>Why Was It Deprecated?
- Separation of Concerns: HTML should define structure, CSS should handle presentation
- Maintainability: CSS makes it easier to maintain and update styles across multiple pages
-
Flexibility: CSS offers far more control and
features than the old
<basefont>tag - Accessibility: CSS provides better support for accessibility features like relative sizing
- Responsive Design: CSS enables responsive typography that adapts to different screen sizes
- Performance: CSS can be cached separately, improving page load times
Try it Yourself
Interactive Example
See the difference between old and modern approaches:
Old Way (Don't use this!):
<basefont color="blue" size="4" face="Arial">
Modern Way (Use this!):
body { font-family: Arial, sans-serif; font-size: 16px;
color: blue; }
Best Practices
- Never use <basefont> - It's not supported and your styles won't work
- Use CSS in the <head> - Either inline styles or external stylesheets
- Set defaults on the body element - This cascades to all child elements
- Use relative units - em, rem, or percentages for better accessibility
- Include fallback fonts - Specify multiple font families in order of preference
- Consider readability - Choose appropriate font sizes and line heights
- Use CSS variables - For easier theme management and consistency
- Test across browsers - Ensure your CSS works consistently everywhere