If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

In the previous section on font styles, we explored the em and strong elements. While these elements let you apply simple styling (italic and bold), CSS gives us much more control over fonts.

CSS font styling is divided into several key properties:

• font-family: The name of the font to use.
• font-size: The size of the font.
• font-weight: How bold the text appears.
• font-style: Whether the text is italic or normal.
• text-decoration: Adds underlines, strikes, or other decorations.

We’ll go through each property step by step.

The font-family Property

The font-family property specifies the font you want to use:

body {
  font-family: "Times New Roman";
}

You can specify multiple fonts as fallbacks in case a user’s system doesn’t have your preferred font:

body {
  font-family: Georgia, Palatino, "Times New Roman", serif;
}

The browser will try each font in order until it finds one installed. At the end, you can use a generic font as a final fallback.

Generic Fonts

There are five main generic font types:

• sans-serif: No strokes or decorations. Example: Arial, Verdana.
• serif: Decorative strokes. Example: Times New Roman, Georgia.
• monospace: Each character has equal width. Example: Courier, Consolas.
• cursive: Script-like fonts. Example: Comic Sans MS.
• fantasy: Decorative or display fonts. Example: Impact, Copperplate.

The font-size Property

You can define font size using:

• Points: font-size: 12pt;
• Pixels: font-size: 14px;
• Percentages: font-size: 120%; (relative to parent)
• Em units: font-size: 1.2em; (relative to parent)
• Absolute keywords: small, medium, large, etc.
• Relative keywords: larger, smaller

Additional Font Styling

Beyond font-family and size, CSS lets you control weight, style, and decorations.

Font Weight

The font-weight property controls boldness: normal, bold, bolder, lighter, or numeric values 100–900.

Font Style

The font-style property controls italics. Common values are normal and italic.

Text Decoration

The text-decoration property adds underlines, strikes, or other decorations:

• none: no decoration
• underline: underlined text
• overline: line above text
• line-through: strike-through text

Example: Styling the em Element

You can override default element styling. For example, making em elements bold, red, and slightly larger:

<style>
p {
  font-family: Courier, monospace;
  font-size: 12pt;
}
em {
  font-style: normal;
  font-weight: bold;
  font-size: 14pt;
  color: #ff0000;
}
</style>

The em element inherits most styles from p but overrides font-style, weight, size, and color.

Font Shorthand

You can combine multiple font properties using the font shorthand:

1. font-style / font-weight
2. font-size
3. font-family

Other properties, like text-decoration, are specified separately.

p {
  font: 12pt Verdana, sans-serif;
}
p.styled {
  font: bold italic 14pt Verdana, sans-serif;
  color: #008000;
  text-decoration: underline;
}