font-style: italic vs oblique in CSS

What is the difference between these two:

font-style:italic
font-style:oblique

I tried using the W3Schools editor but was unable to tell the difference.

What am I missing?

Solution 1:

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.

Solution 2:

Generally, an italic is a special version of the font, whereas an oblique version is just the regular version inclined a bit. So both are slanted and related to the regular font, but an italic will have special letterforms made especially for it.

Most fonts have either an italic or an oblique version; I've never seen one that has both. (If you have an italic version, why bother with an oblique version?)

Solution 3:

Oblique type (or slanted, sloped) is a form of type that slants slightly to the right, used in the same manner as italic type. Unlike italic type, however, it does not use different glyph shapes; it uses the same glyphs as roman type, except distorted.

Futher Reading: css font style oblique vs italic