HTML Font Tag: Read Legacy Markup and Replace It with CSS

The HTML Standard lists font among obsolete, non-conforming elements and directs authors toward appropriate elements or CSS. MDN documents its historical role: applying a face, size and colour to enclosed content. Encountering the tag in an old page therefore calls for a migration decision, rather than copying it into new templates. Preserve the wording and any meaningful surrounding structure while separating the appearance into styles. See the HTML Standard’s obsolete-features section.

In MDN’s legacy reference, face contains font names, color supplies a text colour, and size uses values from 1 to 7 or relative values. A size of 3 is the legacy default; it does not mean three CSS pixels. Before replacing a tag, record the actual rendered appearance and the page’s surrounding styles. Do not mechanically append px to every old size number. Naming a family also does not supply its font file; consult the HTML and CSS font guide.

For an original notice, use ordinary markup and choose explicit CSS properties:

<p class="notice">Booking closes Friday.</p>

.notice {
  font-family: Arial, sans-serif;
  font-size: 1rem;
  color: #234538;
}

This is a new treatment to evaluate, not a promise to reproduce every historical size attribute exactly. A class lets repeated notices share the same rule. If only part of a paragraph needs a purely visual treatment, a span with the class can preserve the existing paragraph instead of splitting its content.

Compare a short label, a full paragraph and the narrowest intended layout before applying the replacement widely. Inspect wrapping, inherited colour and any nested legacy tags. When text communicates a heading or emphasis, retain the appropriate meaningful element rather than choosing markup solely for its default appearance. Check the final colour against its real background with the colour guide, and use the CSS size guide for a deliberate sizing system.