What is the difference between italic and oblique type?

The difference is in how the letters are made. Italic type is a separately designed style with its own letterforms, usually influenced by handwriting: the a often becomes single-storey, the f may gain a descender, and letters like e and n take on a flowing, cursive shape. Oblique type is the upright design slanted to one side, with the letterforms kept essentially the same. Serif typefaces almost always have true italics, while many sans-serif typefaces, such as Helvetica and Futura, use obliques. In CSS you request them with font-style: italic and font-style: oblique, and the browser falls back between the two, or fakes a slant, if the right file isn't available.

Knowing the difference helps you choose typefaces with a suitable emphasis style, recognise when a browser is faking a slant, and write CSS that gives you the result you designed. In this article you'll learn how italic and oblique styles came about, how to tell them apart at a glance, how browsers match and synthesise them, how variable fonts handle slant, and when to use slanted type at all.

Where Italic and Oblique Come From

Italic type began in Venice around 1500. The printer Aldus Manutius and punchcutter Francesco Griffo cut a typeface based on the quick, slanted humanist handwriting used by scholars and scribes. It was compact, which let Aldus print small, affordable books, and early italics were used for whole texts rather than for emphasis.

Over the following century, italic and roman types became paired. Printers began to set the main text in roman and use italic for contrast, for quotations, prefaces and names. By the time of typefounders such as Claude Garamond and Robert Granjon in sixteenth-century France, a roman and its matching italic were designed to work together as one family.

Obliques are much newer. When sans-serif typefaces spread in the nineteenth and twentieth centuries, many designers felt a cursive, handwritten italic didn't suit a rational, geometric or industrial design. Instead, they slanted the upright forms, sometimes with optical corrections so curves didn't look distorted. Typefaces like Helvetica, Univers and Futura followed this approach, which is why their slanted styles are often labelled Oblique rather than Italic.

How to Tell Italic From Oblique

Look at a few key letters. In a true italic, at least some of these will change shape compared with the upright:

• a: Becomes single-storey, a round bowl with a stem, instead of the double-storey upright form.
• e: Often rounder and more calligraphic, with a slanted or curved crossbar.
• f: May descend below the baseline.
• n, m, h: Often have an entry stroke or exit stroke that echoes a pen joining letters.
• v, w: Sometimes take on rounded bottoms.
• Serifs: In serif italics, the bottom serifs are often replaced with small upward flicks.

In an oblique, the letters keep their upright structure. A double-storey a stays double-storey, just leaning to the right.

You can see the comparison in your own browser with a quick test page:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Italic vs oblique test</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital@0;1&display=swap"
    rel="stylesheet">
  <style>
    body { font-size: 2.5rem; line-height: 1.3; padding: 2rem; }
    .serif { font-family: "EB Garamond", serif; }
    .sans  { font-family: Helvetica, Arial, sans-serif; }
    .slanted { font-style: italic; }
  </style>
</head>
<body>
  <p class="serif">a e f n v — upright</p>
  <p class="serif slanted">a e f n v — italic</p>
  <p class="sans">a e f n v — upright</p>
  <p class="sans slanted">a e f n v — slanted</p>
</body>
</html>

EB Garamond's italic will show completely different letter shapes. Helvetica or Arial will show the upright letters leaning, because their slanted styles are obliques.

Not Every Family Is Clear-Cut

Many modern typefaces sit between the two. Some sans-serifs have italics that are slanted but with a single-storey a and slightly narrower, more fluid curves. Others have an upright design and a slanted style that's officially called Italic but is close to an oblique. Font names aren't a reliable guide: a style called Italic in the font menu can still be structurally oblique. Look at the letters.

Italic, Oblique and Faux Italic in CSS

CSS has three values for font-style:

.normal  { font-style: normal; }
.italic  { font-style: italic; }
.oblique { font-style: oblique; }          /* default angle is 14deg */
.angled  { font-style: oblique 8deg; }     /* explicit angle */

How the browser responds depends on which files are available in the family.

How the Browser Matches Styles

The font matching rules in the CSS Fonts specification work like this:

1. For italic: Use an italic face if there is one. If not, use an oblique face. If neither exists, synthesise one.
2. For oblique: Use an oblique face if there is one. If not, use an italic face. If neither exists, synthesise one.
3. For normal: Use an upright face. If only slanted faces exist, use those.

So in practice, font-style: italic on Helvetica gives you Helvetica Oblique, and font-style: oblique on EB Garamond gives you EB Garamond Italic. The CSS keyword asks for a preference, not a guarantee.

Synthetic (Faux) Italic

If you load only the regular file of a family and set font-style: italic, the browser slants the regular outlines geometrically. This faux italic is a crude oblique: curves are distorted, stroke contrast tilts the wrong way, and spacing isn't adjusted. It's easy to spot in serif fonts, where you expect a true italic and get a leaning roman instead.

The fix is to load the italic file:

@font-face {
  font-family: "Literata";
  src: url("/fonts/literata-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Literata";
  src: url("/fonts/literata-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

To stop the browser faking italics entirely, so missing files are obvious while you're developing:

html {
  font-synthesis-style: none;
}

With this set, text styled as italic stays upright if no italic or oblique face is available. In production you might prefer to allow synthesis as a safety net, but in testing it reveals missing files immediately.

Slant in Variable Fonts

Variable fonts can include two registered axes for slanted styles:

• ital (italic): Usually a switch between 0 (upright) and 1 (italic). Fonts rarely interpolate it smoothly because italic letterforms are a different design.
• slnt (slant): A continuous angle in degrees. By convention negative values lean to the right, so a range of -10 to 0 means up to ten degrees of rightward slant.

When a font has a slnt axis, CSS maps font-style: oblique angles onto it, with the sign flipped. font-style: oblique 10deg sets the slnt axis to -10. To make this work with a self-hosted file, describe the slant range in @font-face:

@font-face {
  font-family: "Recursive";
  src: url("/fonts/recursive-variable.woff2") format("woff2");
  font-weight: 300 1000;
  font-style: oblique 0deg 15deg;
  font-display: swap;
}

.lean-slightly {
  font-family: "Recursive", system-ui, sans-serif;
  font-style: oblique 6deg;
}

.lean-fully {
  font-family: "Recursive", system-ui, sans-serif;
  font-style: oblique 15deg;
}

Prefer font-style over the low-level font-variation-settings property where you can. font-variation-settings sets axis values directly and bypasses font matching, so the browser can't fall back sensibly. It's also inherited as a single value, so setting one axis on a child element wipes out any other axes set on its parent. Use it only for custom axes that have no CSS equivalent.

Some variable fonts, such as Inter and Roboto Flex, ship upright and italic or slanted styles in separate variable files or include a slant axis. Check the font's documentation to see which axes it supports before writing CSS.

When to Use Italic or Oblique

Slanted type is a form of emphasis. It works because it changes the texture of text without changing its weight or colour very much, so it draws attention softly. Typical uses include:

• Emphasis within a sentence: Stressing a word the way you would when speaking.
• Titles of works: Books, films, albums and journals, following most style guides.
• Foreign words and phrases: Terms not yet absorbed into everyday English.
• Scientific names: Genus and species names such as Homo sapiens.
• Captions, notes and asides: Text that should sit back from the main content.

Use the Right HTML Element

The visual style is CSS's job, but the meaning belongs in HTML. Browsers render both em and i in italic by default, but they mean different things:

<p>You <em>must</em> back up the database before upgrading.</p>

<p>The ship was named <i lang="la">Fortuna</i>.</p>

<p>Read <cite>The Elements of Typographic Style</cite> for more detail.</p>

• em: Stress emphasis that changes the meaning of the sentence. Screen readers may convey it.
• i: Text in an alternate voice, such as foreign words, technical terms or ship names, with no added stress.
• cite: The title of a creative work.

Choose the element by meaning, then style it with CSS if you don't want the default italic. For example, if your typeface has a poor italic or none at all, you can use a different treatment for emphasis:

em {
  font-style: normal;
  font-weight: 600;
}

When to Avoid Slanted Text

• Long passages: Whole paragraphs in italic are tiring to read. Keep it to words and short phrases.
• Small sizes: Italic letterforms are often narrower and more detailed, so they suffer first when text is tiny or screens are low resolution.
• User interface labels: Buttons and navigation rarely benefit from italics, and slanted text can look like a disabled or placeholder state.
• Scripts without italic traditions: Chinese, Japanese, Korean and many other writing systems don't use italic for emphasis. Synthetic slanting can look wrong to native readers. Consider bold or other emphasis styles for those languages.

You can scope that last rule with the lang attribute:

:lang(ja) em,
:lang(zh) em,
:lang(ko) em {
  font-style: normal;
  font-weight: 700;
}

Choosing Typefaces With Good Italics

If your content uses a lot of emphasis, titles or citations, the quality of the italic matters as much as the roman. When evaluating a family, check:

1. Does it have a true italic or an oblique? Either can work, but pick deliberately. A warm, literary site often suits a true italic. A technical or geometric brand may suit an oblique.
2. Is there an italic for every weight you use? A bold italic is needed if you ever emphasise inside bold text or headings.
3. Does the italic match in colour? Set a paragraph with a few italic words and check that they don't look noticeably lighter or darker than the surrounding text.
4. Is it distinct enough? At body size, emphasis should be noticeable at a glance. Some obliques with a very small angle are too subtle.

---

FAQ: Italic and Oblique Type

---

Conclusion

Italic and oblique are both slanted styles, but they're made differently. An italic is a separate design with cursive-influenced letterforms such as the single-storey a, while an oblique keeps the upright letters and leans them. Serif families nearly always have true italics, many sans-serifs use obliques, and plenty of modern typefaces sit somewhere in between.

On the web, font-style asks for one or the other and the browser falls back between them, faking a slant only when it has no slanted file at all. Load the italic or oblique files you need, describe them correctly in @font-face, use font-style rather than raw variation settings for variable slant, and choose em, i or cite by meaning. That way your emphasis looks designed rather than distorted.