Font-Style: Italic VS Oblique in CSS

font-style: italic vs oblique in CSS

In the purest (type designer) sense, an oblique is a roman font that has been skewed a certain number of degrees (8-12 degrees, usually). An italic is created by the type designer with specific characters (notably lowercase a) drawn differently to create a more calligraphic, as well as slanted version.

Some type foundries have arbitrarily created obliques that aren't necessarily approved by the designers themselves... some fonts were meant not to be italicized or obliqued... but people did anyway. And as you may know, some operating systems will, upon clicking the 'italic' icon, skew the font and create an oblique on the fly. Not a pleasant sight.

It's best to specify an italic only when you're sure that font has been designed with one.

Force the browser to use Faux italic (oblique) and not the real italic

To force a browser to use faux italic, use font settings that request for italic or oblique when the font family specified does not contain an italic or oblique typeface, given the parameters of the situation.

You are doing this if you request for bold italic Bell MT. The Bell MT font family has normal, bold, and italic typeface, but no bold italic. So the browser has to refuse to do what you request for or fake it by algorithmically slanting bold typeface or by algorithmically bolding italic typeface.

As biziclop’s answer demonstrates, you can do your own fake (faux) italic, or rather fake oblique, using CSS transforms. But there’s no way to force a browser use its own faking mechanism in a situation where the requested italic or oblique is available to the browser.

Update: @JonHanna’s answer shows that browsers can be tricked into to using fake italic by specifying a font in a @font-face rule without specifying an italic typeface. So “is available to the browser” is relative.

P.S. Fake italic/oblique is not the same as oblique. A typographer can design an oblique typeface, as something that is not simply a normal font slanted but neither classic italic style. Whether a typeface is classified as italic or oblique is largely a matter of taste and naming. For most practical purposes, the CSS keywords italic and oblique are synonymous, as browsers use italic when oblique has been requested for but does not exist, and vice versa. They would be really different only when the font has both an italic typeface and an oblique typeface, which is rare.

font-style and text-decoration proerties in css

text-decoration: italic is invalid markup.

Underneath you find valid values for both text-decoration and font-style.

text-decoration can have the following values:

• none
• underline
• line-through
• overline

Where font-style can have:

• normal
• italic
• oblique

Demo of the styles:

<p style="text-decoration: none">This is a text (text-decoration: none)</p>

<p style="text-decoration: underline">This is a text (text-decoration: underline)</p>

<p style="text-decoration: line-through">This is a text (text-decoration: line-through)</p>

<p style="text-decoration: overline">This is a text (text-decoration: overline)</p>

<p style="font-style: normal">This is a text (font-style: normal)</p>

<p style="font-style: italic">This is a text (font-style: italic)</p>

<p style="font-style: oblique">This is a text (font-style: oblique)</p>

Is it usual to use transform skew instead of font-style italic

In order to avoid Browser Compatibility issue and to avoid hassle of handling for different browsers, I strongly suggest you to go with old classic italic unless it fulfill your requirement.

---

Related Topics