Yugien
Theme

font

The HTML <font> element was once used to set a typeface, size, or color directly in markup. It is obsolete; use CSS for presentation instead.

What you will learn

Historical syntax

<!-- Old markup: do not use for new work. -->
<font color="red" size="5">Important text</font>

This mixes design decisions into the document content and is difficult to update consistently. Different pages can end up using different colors and sizes for the same purpose.

Use CSS instead

<p class="warning">Important text</p>

.warning {
  color: firebrick;
  font-size: 1.25rem;
}

CSS can change the appearance of every element with the same class, while the HTML remains focused on the content's structure. Use a semantic element such as strong when the text is important, and CSS when you only need to style it.

Migration tip

When updating an old page, replace the visual attributes with a class and move the styles into a stylesheet. Check contrast, responsive layout, and any meaning that was previously communicated only by color.

Related pages