If you are learning CSS and want to tilt your text for emphasis or style, you are in the right place. In this guide, I will show you exactly how to italicize text in CSS, why there are a few different ways to do it, and when to choose each one. I will also explain the difference between semantic emphasis, the font-style property, and the small but important difference between “italic” and “oblique.” By the end, you will be able to style text with confidence, and you can test everything using the two HTML examples I provide.
What “italic” means in CSS?
In CSS, italics are controlled by the font-style property. It has three common values:
normal: the default, text is upright.italic: uses the italic face of the font when available.oblique: slants the text artificially, or uses a dedicated oblique face when provided by the font.
If the font on your page has a real italic variant, font-style: italic; will use it. If not, the browser may simulate a slant. That is why sometimes italics look elegant, and other times they look slightly skewed. When you care about appearance, pick a font family that includes true italic.
The core CSS property to italicize text
The simplest way to italicize text in CSS is to add font-style: italic; to a selector. For example, if you want to style any element with the class tilt, you can write:
font-style: italic;tells the browser to render that selection in italics.- You can reset italics with
font-style: normal;if you want a child element to be upright again.
I often use a small utility class like .italic when I want quick control over a word or sentence.
Semantic italics with HTML elements
There are two HTML elements that commonly show italic behavior:
<em>: semantic emphasis. Screen readers convey emphasis, and browsers render it in italics by default. You can style it with CSS if needed. For example:em { font-style: italic; }.<i>: presentational italics. Use it only for titles, foreign words, or stylistic offsets. The<i>tag does not imply emphasis, so screen readers treat it as normal text.
When I want meaning, I reach for <em>. When I just want a different tone or style, I use a class or <i>.
Italic vs oblique in CSS
You might see font-style: oblique; or even font-style: oblique 10deg;. The oblique value slants the text. A few fonts ship with a dedicated oblique face that is different from the italic face. If your font has no italic, using oblique can sometimes look slightly cleaner than a synthesized italic. If you want a stronger slant, the angle form can help. For example: font-style: oblique 10deg; makes the slant more noticeable.
Do fonts matter for italic text?
Yes. If you are picky about typography, choose a font family that includes an italic face. When using custom fonts with @font-face, make sure you provide both normal and italic sources and declare them correctly, for example: font-style: italic; in the @font-face block for the italic file. If you do not provide an italic source, the browser may fake the slant.
Example 1: Italicizing a single element with CSS
Below is a minimal page you can paste into a file and open in your browser. It shows a simple div styled with font-style: italic;, plus one normal line for comparison.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Italicize Text in CSS - Example 1</title>
<style>
:root {
--bg: #fafafa;
--fg: #1f2937;
--accent: #0ea5e9;
}
html, body {
margin: 0;
padding: 0;
}
body {
font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
color: var(--fg);
background: var(--bg);
line-height: 1.6;
padding: 1rem;
display: grid;
place-items: start center;
}
.wrap {
width: 100%;
max-width: 680px;
}
.title {
font-size: 1.25rem;
margin-bottom: 0.75rem;
color: var(--accent);
}
.tilt {
font-style: italic;
padding: 0.75rem 1rem;
background: white;
border: 1px solid #e5e7eb;
border-radius: 8px;
margin-bottom: 0.75rem;
}
.normal {
padding: 0.75rem 1rem;
background: #fff;
border: 1px dashed #e5e7eb;
border-radius: 8px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="title">Italicize text with CSS using font-style</div>
<div class="tilt">This sentence is italic because the CSS rule uses font-style: italic;</div>
<div class="normal">This sentence is normal. No italic styling is applied here.</div>
</div>
</body>
</html>
Output:
Key line to notice is font-style: italic; inside the .tilt class. That one declaration is enough to italicize the entire element.
Example 2: Italic styles across a page, with emphasis and overrides
This fuller page shows several approaches. I use <em> for meaning, <i> for stylistic names, a reusable .italic class, an oblique variant, and the font shorthand that bundles style, size and line height.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>How to Italicize Text in CSS - Example 2</title>
<style>
:root {
--bg: #0b1220;
--card: #111827;
--fg: #e5e7eb;
--muted: #93a2b7;
--accent: #60a5fa;
--ring: #1f2a44;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
background: radial-gradient(1000px 600px at 50% -200px, #1f2937, #0b1220) no-repeat fixed;
color: var(--fg);
line-height: 1.65;
padding: 1rem;
display: grid;
place-items: start center;
}
.container {
width: 100%;
max-width: 820px;
}
header {
margin-bottom: 1rem;
}
h1 {
font-size: clamp(1.25rem, 2.5vw, 1.75rem);
margin: 0;
color: var(--accent);
}
.card {
background: linear-gradient(180deg, #0f172a, #0b1220);
border: 1px solid var(--ring);
border-radius: 12px;
padding: clamp(1rem, 2.5vw, 1.25rem);
box-shadow: 0 8px 30px rgba(0,0,0,0.35);
}
p { margin: 0.5rem 0; color: var(--fg); }
small { color: var(--muted); }
code {
background: #0f172a;
color: #cbd5e1;
padding: 0.1rem 0.35rem;
border-radius: 6px;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
/* Reusable italics via class */
.italic { font-style: italic; }
/* Show oblique with adjustable angle */
.oblique { font-style: oblique 10deg; }
/* Use semantic emphasis */
em { font-style: italic; }
/* Presentational italics for titles or foreign words */
i { font-style: italic; color: #cbd5e1; }
/* Pull quote using the font shorthand, sets italic, size and line-height */
.pullquote {
font: italic 1.125rem/1.7 Georgia, "Times New Roman", serif;
color: #f3f4f6;
padding-left: 0.75rem;
border-left: 3px solid #334155;
margin: 0.75rem 0;
}
/* Override inside an italic block */
.italic .no-italic { font-style: normal; }
/* Layout niceties */
.row {
display: grid;
gap: 0.75rem;
}
@media (min-width: 640px) {
.row { grid-template-columns: 1fr 1fr; }
}
.block {
background: var(--card);
border: 1px solid var(--ring);
border-radius: 10px;
padding: 0.75rem;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>How to italicize text in CSS with real world patterns</h1>
<small>Try selecting and editing the CSS to see how <code>font-style</code> works.</small>
</header>
<section class="card">
<p>Use <code>font-style: italic;</code> when you want a reliable italic look. For meaning, wrap the words in <code><em></code> so assistive tech can detect emphasis.</p>
<div class="row" style="margin-top:0.75rem;">
<div class="block italic">
<p>This whole block is italic because of <code>font-style: italic;</code> on the wrapper.</p>
<p class="no-italic">This line cancels it with <code>font-style: normal;</code> inside.</p>
</div>
<div class="block">
<p>Semantic emphasis with <em>this important phrase</em> reads well and sounds right in screen readers.</p>
<p>Presentational styling with <i>La vita è bella</i> keeps the meaning neutral.</p>
</div>
</div>
<div class="row" style="margin-top:0.75rem;">
<div class="block oblique">
<p>Oblique angle via <code>font-style: oblique 10deg;</code> gives a controlled slant.</p>
</div>
<div class="block">
<p class="pullquote">Design is the silent ambassador of your brand.</p>
<p>This pull quote uses the <code>font</code> shorthand, for example <code>font: italic 1.125rem/1.7 Georgia, "Times New Roman", serif;</code>, which sets style, size and line height together.</p>
</div>
</div>
</section>
</div>
</body>
</html>
Highlights from this example:
.italic { font-style: italic; }applies italics to a whole block, then.no-italic { font-style: normal; }shows how to override it for a line inside.<em>is used for meaning. I also styled<i>for decorative italics..oblique { font-style: oblique 10deg; }shows an angled slant. You can tryoblique 0degor remove the angle to compare..pullquoteuses thefontshorthand, for examplefont: italic 1.125rem/1.7 Georgia, "Times New Roman", serif;, so I can set italic, size and line height in one line.
Best practices and common mistakes
- Prefer
<em>for emphasis when the meaning matters. It is better for accessibility and SEO. - Use
font-style: italic;via classes or selectors for visual style. Avoid using<i>for meaning. - Do not rely on synthetic italics for brand critical text. Choose a font family with a real italic face.
- Reset with
font-style: normal;when you need a non italic snippet inside an italic block. - Be careful with the
fontshorthand. For example,font: italic 16px/1.6 Arial, sans-serif;replaces size, line height and family, not just style. If you only want italics, usefont-stylealone.
Closing thoughts
Now you know how to italicize text in CSS, how to choose between italic and oblique, and how to use semantic emphasis with <em>. Start with font-style: italic; for a quick win, use classes for consistency, and pick fonts that include italic faces when design quality matters. If you keep meaning and styling separate, your pages will read better and look more professional.
See also: How to Make Text Bold in CSS
