HTML <basefont> Tag

What You’ll Learn

By the end of this tutorial, you’ll understand legacy basefont markup and the CSS approach used in modern web development.

What Was the <basefont> Tag?

The basefont element (<basefont>) was a void tag placed in the document body that established default font properties for all subsequent text. Before widespread CSS adoption, it offered a quick way to set page-wide typography.

body {
  font-size: 16px;
  color: #334155;
  font-family: system-ui, Arial, sans-serif;
}

📝 Syntax (Historical)

Legacy HTML combined all three attributes on one <basefont> tag:

<basefont size="3" color="blue" face="Arial, sans-serif">

• size used a 1–7 scale (3 was default) → CSS font-size
• color accepted color names or hex values → CSS color
• face listed font families with fallbacks → CSS font-family

⚖️ <basefont> vs CSS

CSS replaced basefont entirely. Here is how the two approaches compare:

Examples Gallery

Modern CSS replacements and historical basefont patterns. Do not use basefont in new code.

<style>
  body {
    font-size: 16px;
    color: #334155;
    font-family: system-ui, Arial, sans-serif;
  }
</style>

<basefont size="4">

<basefont color="green">

<basefont face="Helvetica, Arial, sans-serif">

<style>
  body {
    font-size: 16px;
    color: #166534;
    font-family: Arial, sans-serif;
  }
</style>

🔄 Migrating Legacy Code

When you find <basefont> in old HTML files, remove the tag and add equivalent CSS:

<!-- Legacy (remove) -->
<basefont size="4" color="green" face="Arial, sans-serif">

<!-- Modern replacement -->
<style>
  body {
    font-size: 1.125rem;
    color: #16a34a;
    font-family: Arial, sans-serif;
  }
</style>

💡 Best Practices