<font> - Font Styling (Deprecated)

The <font> Element

Deprecated HTML 3.2

Caution

This element is deprecated and should not be used in new projects. The <font> element was removed from the HTML specification in HTML5. Use CSS properties like color, font-size, and font-family instead. This documentation is provided for historical reference and legacy code maintenance only.

The <font> element was used in early HTML to change the color, size, and typeface of text. It was one of the presentational elements that mixed content with styling, which modern web development separates using CSS.

Historical Syntax

<font color="red" size="5" face="Arial">Styled text</font>

Historical Attributes

The <font> element supported three main attributes for controlling text appearance:

Attribute	Description	Values
color	Text color	Color name (e.g., red, blue) or hex value (e.g., #FF0000)
size	Font size on a scale	1 to 7 (default: 3), or relative values (+1, -2)
face	Font typeface	Comma-separated list of font names (e.g., Arial, Helvetica)

Note

The size attribute used an arbitrary scale from 1 (smallest) to 7 (largest), with 3 being the default browser text size. This was replaced by CSS pixel, point, em, and rem units which provide precise control.

Historical Example

This example shows how the <font> element was used in older HTML documents:

HTML

<p> <font color="blue" size="5" face="Arial"> This is blue, large Arial text </font> </p> <p> <font color="#FF0000" size="2"> This is small red text </font> </p> <p> Normal text with <font size="+2" color="green"> larger green text </font> in the middle. </p>

Result ▶ Run

Why It’s Deprecated

The <font> element was deprecated and removed for several important reasons:

1. Separation of Concerns

HTML should describe the structure and meaning of content, not its presentation. Mixing styling directly into HTML makes code harder to maintain and update.

2. Poor Maintainability

Changing the appearance of a site required editing every single <font> tag. With CSS, you can update styles site-wide by changing a single stylesheet.

3. Limited Flexibility

The <font> element offered only basic styling options. CSS provides hundreds of properties for precise control over typography, including line-height, letter-spacing, font-weight, text-shadow, and more.

4. Accessibility Issues

The arbitrary size scale (1-7) didn’t respect user preferences for text size. Modern CSS units like em and rem scale with user settings, improving accessibility.

5. Performance

Inline styles in HTML increase page size. External CSS files can be cached by browsers, improving load times.

Modern Alternatives

Use CSS properties to achieve the same effects with better control and maintainability.

CSS Color Property

Replace color attribute with the CSS color property:

HTML

<style> .blue-text { color: blue; } .red-text { color: #FF0000; } </style> <p class="blue-text"> This is blue text using CSS </p> <p class="red-text"> This is red text using CSS </p> <p> Normal text with <span style="color: green;">green text</span> inline. </p>

Result ▶ Run

CSS Font Size

Replace size attribute with the CSS font-size property:

HTML

<style> .large-text { font-size: 24px; } .small-text { font-size: 12px; } .relative-larger { font-size: 1.5em; /* 1.5x parent size */ } </style> <p class="large-text"> This is large text (24px) </p> <p class="small-text"> This is small text (12px) </p> <p> Normal text with <span class="relative-larger">larger text</span> inline. </p>

Result ▶ Run

Tip

Use relative units like em, rem, or percentages for better accessibility. These units scale with user preferences, while fixed pixel sizes do not.

CSS Font Family

Replace face attribute with the CSS font-family property:

HTML

<style> .arial-text { font-family: Arial, Helvetica, sans-serif; } .serif-text { font-family: Georgia, "Times New Roman", serif; } .monospace-text { font-family: "Courier New", Courier, monospace; } </style> <p class="arial-text"> This text uses Arial font family </p> <p class="serif-text"> This text uses Georgia serif font </p> <p class="monospace-text"> This text uses monospace font </p>

Result ▶ Run

CSS Font Shorthand

Combine multiple font properties using the CSS font shorthand:

HTML

<style> .styled-heading { /* font: [style] [weight] size/line-height family */ font: italic bold 24px/1.4 Georgia, serif; color: #333; } .styled-paragraph { font: normal 16px/1.6 Arial, sans-serif; color: #666; } </style> <h2 class="styled-heading"> Styled Heading </h2> <p class="styled-paragraph"> This paragraph has custom font size, family, line height, and color all defined with CSS. </p>

Result ▶ Run

Migration Guide

Here’s how to convert common <font> patterns to modern CSS:

Old (Deprecated)

<!-- Color only -->
<font color="red">Red text</font>

<!-- Size only -->
<font size="5">Large text</font>

<!-- Font face only -->
<font face="Arial">Arial text</font>

<!-- All attributes -->
<font color="blue" size="4" face="Verdana">
  Styled text
</font>

<!-- Nested fonts (common but messy) -->
<font size="6">
  <font color="green">
    <font face="Arial">
      Multiple attributes
    </font>
  </font>
</font>

Modern (CSS)

<!-- Color only -->
<span style="color: red;">Red text</span>

<!-- Size only -->
<span style="font-size: 24px;">Large text</span>

<!-- Font family only -->
<span style="font-family: Arial, sans-serif;">Arial text</span>

<!-- All properties combined -->
<span style="color: blue; font-size: 18px; font-family: Verdana, sans-serif;">
  Styled text
</span>

<!-- Better: use classes -->
<style>
  .highlight {
    color: green;
    font-size: 28px;
    font-family: Arial, sans-serif;
  }
</style>
<span class="highlight">Multiple properties</span>

External CSS (Best)

<!-- HTML file -->
<link rel="stylesheet" href="styles.css">

<p class="intro">This is introductory text</p>
<p class="highlight">This is highlighted text</p>
<p class="warning">This is warning text</p>

styles.css

.intro {
  font-size: 18px;
  font-family: Georgia, serif;
  color: #333;
  line-height: 1.6;
}

.highlight {
  font-size: 20px;
  font-family: Arial, sans-serif;
  color: #0066cc;
  font-weight: bold;
}

.warning {
  font-size: 16px;
  font-family: Arial, sans-serif;
  color: #cc0000;
  font-weight: bold;
}

Tip

External stylesheets are the best practice for production sites. They enable caching, reduce HTML file size, and make global style changes easy. Use semantic class names that describe the purpose of the styling (like warning or intro) rather than the appearance (like red-text).

Font Size Conversion Table

The <font> element’s size attribute used values 1-7. Here’s an approximate conversion to modern CSS:

<font size>	Approximate CSS	Relative to Default
1	10px or 0.63em	Smallest
2	13px or 0.82em	Small
3	16px or 1em	Default
4	18px or 1.13em	Medium-large
5	24px or 1.5em	Large
6	32px or 2em	Larger
7	48px or 3em	Largest

Note

These conversions are approximate. The actual rendering varied between browsers. Modern CSS gives you precise control with units like px, em, rem, %, vw, and more.

Historical Browser Support

The <font> element was supported by all major browsers during its lifetime:

Browser	Supported	Removed
Chrome	1-Current	Still renders (legacy support)
Firefox	1-Current	Still renders (legacy support)
Safari	1-Current	Still renders (legacy support)
Edge	12-Current	Still renders (legacy support)
IE	3-11	Still rendered in IE11

Caution

While modern browsers still render <font> elements for backward compatibility, this support could be removed in the future. Always use CSS for styling to ensure your sites remain functional.

Related Elements

Generic inline container for styling text with CSS. The modern replacement for <font>. Learn more →