Font Style

CSS Font Style

The CSS font-style property controls whether text is displayed using a normal, italic, or oblique typeface. It is commonly used when text needs a slanted appearance without changing its meaning or HTML structure.

The font-style Property

The CSS font-style property specifies the style of the typeface used to display text. Its most commonly used values are normal, italic, and oblique.

p {
  font-style: italic;
}

This rule requests an italic style for paragraph text.

Normal Text

The normal value displays text using the normal face of the selected font family. It is the initial value of the font-style property.

p {
  font-style: normal;
}

The normal value can also be used to override an italic or oblique style inherited from a parent element.

Italic Text

The italic value requests the italic face of the selected font family. A true italic face is usually a separately designed version of the typeface rather than simply a slanted copy of the normal characters.

p {
  font-style: italic;
}

If the font does not provide an appropriate italic face, the browser may synthesize a slanted version of the available font.

Oblique Text

The oblique value requests an oblique face. Oblique text generally uses slanted forms of the normal typeface rather than the specially designed character shapes commonly found in an italic face.

p {
  font-style: oblique;
}

The exact appearance depends on the font being used and the styles it provides.

Italic vs. Oblique

Italic and oblique text can look similar, but they are not necessarily the same. An italic font may contain specially designed letterforms, while an oblique font is generally based on slanted forms of the regular typeface.

With some fonts, italic and oblique may appear nearly identical because the available font faces determine what the browser can display.

Try Different Font Styles

Edit the font-style values in the example to compare normal, italic, and oblique text.

Font Style and Inheritance

The font-style property is inherited. Child elements generally use the font style of their parent unless another CSS rule specifies a different value.

section {
  font-style: italic;
}

section p {
  font-style: normal;
}

Text inside the section inherits the italic style, while paragraphs return to a normal style because they have their own font-style declaration.

Font Style and HTML Elements

Browsers normally display elements such as <em> and <i> using italic text in their default styles. CSS can change their visual appearance, but changing the font style does not change the meaning of the HTML element.

em {
  font-style: normal;
}

The <em> element still represents stress emphasis even if CSS changes its appearance to normal text. HTML provides meaning and structure, while CSS controls presentation.

When to Use Font Style

Use font-style when the design calls for normal, italic, or oblique text. It can be useful for visual styling in headings, captions, quotations, labels, or other content.

Do not use italic styling alone when the content requires semantic emphasis. Use the appropriate HTML element for meaning, and use CSS to control how that element appears.

Summary

The CSS font-style property controls whether text uses a normal, italic, or oblique typeface. The exact appearance depends on the styles provided by the selected font family, and browsers may synthesize a slanted appearance when a requested face is unavailable.

The next tutorial covers Line Height and how CSS controls the vertical spacing between lines of text.