Changing Font Styles

To change font styles in HTML, use CSS properties to control the appearance of your text, such as its typeface, size, weight, and color.

While HTML used to have a <font> tag, it is now obsolete. Modern web design uses CSS (Cascaded Style Sheets) to handle all styling.

Basic Font Styles

The most common font properties are font-family (the typeface), font-size, font-weight (for bolding), and font-style (for italics).

Changing Font Family

The font-family property allows you to specify a list of fonts. The browser will use the first one it finds on the user's computer. It is best practice to include a generic font family like serif or sans-serif at the end of your list as a fallback.

Changing Font Size

You can change the font-size using any of the supported CSS units, such as pixels (px), em, or rem.

Here's an example of using pixels and em:

The font size can be set using the following CSS data types:

• <absolute-size> keywords (e.g., medium, large, xx-small)
• <relative-size> keywords (e.g., larger or smaller)
• <length> values (e.g., 12px, 2em, 0.5in, 10pt)
• <percentage> values (e.g., 80%, which is relative to the parent element's font size)

Additionally, the latest specification also allows for the use of a math value, such as calc(), min(), max(), and clamp(). The global values inherit, initial, revert, revert-layer, and unset are also accepted.

Changing Font Color

Use the color property to change the color of your text. You can use any valid CSS color format, including color names, hex codes, or RGB values. Here's an example of using the color name:

Bonus Tip: The font Shorthand

You can set all font properties at once using the font shorthand property. This helps keep your CSS clean and concise: