<basefont>

Defines a default font, size, and color for text (DEPRECATED)

⚠️ DEPRECATED

Definition and Usage

⚠️ Warning: The <basefont> tag is NOT supported in HTML5. 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.

Important: Do NOT use this tag! Use CSS instead to style your text. Modern browsers do not support <basefont>.

Browser Support

The <basefont> tag is NOT supported in any modern browser:

Chrome

Not Supported

Firefox

Not Supported

Safari

Not Supported

Edge

Not Supported

Opera

Not Supported

Old 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

✓ Modern Approach: Use CSS to set default fonts, sizes, and colors. This is the standard, supported method in HTML5.

❌ 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
<!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
<!-- 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; }

Try Modern CSS in Code Playground

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

Related Tags and Concepts

<font>
Also deprecated - use CSS instead
<style>
Contains CSS for the document
<link>
Links external CSS files