font-style

Apply italic or oblique styling and reset inherited font style.

Overview

Examples

Italicize emphasis

italic requests an italic face. Use semantic markup such as <em> when the words carry emphasis; font styling alone does not add that meaning.

<!-- Normal surrounding text · italic emphasis --><p id="context" class="m:0 font-md leading-md">Keep the <em id="target" class="italic">important detail</em> in view.</p>

This preview uses an upright Geist face, so the browser synthesizes the slant. A family with a designed italic face can look different.

Use oblique text

oblique requests a slanted face. The visible distinction from italic depends on the available font; neither utility changes the words or their semantics.

<!-- font-style:normal --><p id="target" class="m:0 font-style:normal font-xl leading-sm">Design with clarity.</p>

<!-- oblique --><p id="target" class="m:0 oblique font-xl leading-sm">Design with clarity.</p>

Reset font style

Use font-style:normal on a child to override an inherited slant. The reset changes the child’s appearance; the surrounding text keeps its italic style.

<!-- An upright child inside italic text --><p id="context" class="m:0 italic font-xl leading-md">A slanted phrase with <span id="target" class="font-style:normal">an upright detail</span>.</p>

Apply conditionally

The button becomes italic on hover or keyboard focus. This makes the actual selector state observable without relying on a breakpoint.

<!-- Pointer and keyboard states --><button type="button" id="target" class="font-style:normal font-md italic:hover italic:focus-visible">Focus or hover to compare</button>