CSS / Reference / font-style: Italic, Oblique, and Available Font Faces
font-style requests normal, italic, or oblique letterforms. Italic and oblique need not always look different: available font faces, matching, and synthesis affect the displayed result.
Syntax and value choices
| Property | Initial value | Inherited | Main application conditions |
|---|---|---|---|
font-style |
normal | Yes | All elements; visible effects depend on the text, image, or box conditions below |
Initial values are not necessarily the values assigned to HTML elements by the browser’s stylesheet. Inspect the actual result in developer tools’ Computed panel.
.emphasis { font-style: italic; }
.slanted { font-style: oblique 12deg; }
| Value or category | Behavior and choice |
|---|---|
normal |
Request the normal face. |
italic |
Request italic forms. |
oblique |
Request slanted forms. |
oblique 12deg |
Request an angle; inspect browser and font support. |
For supported values and conditions, see MDN font-style.
Run the example and compare results
Save this complete code as css-reference-10548-example.html in UTF-8 and open it in a browser. Keep its demonstration styles in that file rather than pasting them into a site-wide stylesheet.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>font-style comparison example</title>
<style>
body { margin: 0; color: #20242b; background: #fff; font: 16px/1.7 "Malgun Gothic", sans-serif; }
#demo { padding: 24px; max-width: 820px; margin: auto; }
h1 { font-size: 22px; margin: 0 0 20px; }
.samples { display: flex; flex-wrap: wrap; gap: 24px; }
.label { margin: 0 0 8px; font-weight: 700; }
.target, .reference { font: 28px/1.6 Georgia, serif; }
.target { font-style: italic; }
.reference { font-style: oblique; }
</style>
</head>
<body>
<main id="demo">
<h1>font-style comparison</h1>
<section class="samples"><div class="a"><p class="label">italic</p><div class="target">Hello CSS typography</div></div><div class="b"><p class="label">oblique</p><div class="reference">Hello CSS typography</div></div></section>
</main>
</body>
</html>
Compare italic and oblique using the same family. If dedicated faces are unavailable, fallback or synthesis can produce similar appearances.
Real faces versus synthesis
A genuine italic face can change letter shapes rather than simply skewing the upright form. Match the @font-face style descriptor to the supplied file. A failed font request is not necessarily an invalid font-style value.
Semantic emphasis versus presentation
em conveys stress emphasis independently of its default italic styling. Setting font-style: normal does not remove that meaning. Check readability before applying long stretches of slanted text, especially with mixed scripts.
Change one setting at a time
Use the complete example file above. Change only the specified selector or value rather than several comparison conditions at once.
- Select the samples and inspect Elements → Computed → Rendered Fonts. The requested font-style and rendered face are different information.
- Change only font-style to normal and restore italic/oblique. A name without a supplied file is not evidence of a successful web-font download.
For coordinated font sizing, line heights, and typeface choices, see CSS Fonts, Font Sizes, and Line Height. Related properties to compare alongside these conditions are font-family.
When the result is missing or unexpected
- Inspect whether italic or oblique faces are actually available.
- Check whether a later font shorthand resets the style to normal.
CSS / Reference / list-style-type: Change List Markers and Numbering
Style list markers while keeping ordered and unordered semantics. Compare numbering styles, starting values, marker removal, and shorthand resets.
CSS / Reference / quotes: Choose Nested Quotation Marks
Choose generated quotation pairs for nested text and distinguish them from literal punctuation. Compare automatic marks, none, and quotation-depth operations.
CSS / Reference / text-indent: First-Line Indents and Hanging Paragraphs
Create first-line and hanging indents, distinguish them from paragraph padding, and check inheritance, writing direction, and narrow-screen clipping.
CSS / Reference / content: Generate Pseudo-Element Text and Decoration
Generate strings, attribute labels, counters, and decorative pseudo-elements. Compare none with an empty string and retain important information in real HTML.
CSS / Reference / font-style: Italic, Oblique, and Available Font Faces
Request italic or oblique forms while accounting for real faces and synthesis. Separate visual styling from emphasis semantics and inspect font-loading failures.
CSS / Reference / background-size: Cover, Contain, and Background Sizing
Compare background cover and contain using a known image ratio. Account for positioning areas, percentages, cropping, repeated tiles, and the element’s own size.
CSS / Reference / font-size: Understand px, em, rem, and Text Enlargement
Choose text-size units by their reference and test nested em scaling. Check the actual root size, browser enlargement, and layout constraints.
CSS / Reference / empty-cells: Show or Hide Empty Table Cells
Control empty-cell borders and backgrounds in a separated table while preserving its structure. Compare show, hide, whitespace, and the collapsed-border exception.
CSS / Reference / calc(): Calculate CSS Values and Understand Their Types
Combine percentages and lengths with calc(), inspect the actual parent width, and distinguish invalid expressions from newer typed arithmetic and special numeric results.
CSS / Reference / letter-spacing, word-spacing: Compare Character and Word Spacing
Adjust character and word gaps independently using the same text and a normal baseline. Account for inheritance, language, wrapping, and excessive negative spacing.