CSS font-style: oblique vs italic

by Zubair on November 5, 2010

css font-style: oblique vs italic

What’s the difference between CSS’s oblique vs italic?

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. (Wikipedia)

I was very curious to find out what’s the real difference between an Oblique style and a Italic style used in font-style CSS property. I’ll be sharing what i found about the differences. Visually, the difference can be sometime hard to notice.

The Oblique Style uses the same font as Normal (non-italic version of the font-type / font-face) but skews (slants) it to the right a-little before presenting it to the screen – it looks less readable than the true Italic version.

While the Italic Style uses a Italic type/version of the font, most of the time almost all fonts have a Italic version of the font which has special characters defined for it. But that is not Always the case, some times the Font Designer doesn’t provide those and only provides the Normal version of the font.

css font-style oblique vs italic example

So if you are using Italic on a font-type (font-face) that doesn’t have its own true Italic version of the font, it will automatically use the Oblique version which just uses the regular version of the font but skews / slants it a-little to the right so it appear as if it were the Italic version but i think it would be called more like a fake Italic.

Please comment and let me know if i missed something or if you found this post helpful – OR if there is anything i can do to improve the post :)

Share

{ 7 comments… read them below or add one }

Jeremy Williams November 7, 2010 at 9:25 pm

Thanks, it was just the piece of info i was looking for.
came across your site on Google :)

I wasn’t able to make the difference between these two styles until now, when i used either Oblique or Italic they resulted in the same italicized text, after carefully going over your post 2 times i understand now that when using Oblique or Italic css automatically uses the regular version of the font after slanting it, if the italic version of the font is not present.

It doesn’t matter if you use italic or oblique if the font doesn’t have a italic verison of the font css will automatically use Oblique which uses the regular font and slants it.

Thank you for the helpful post & examples :)

Reply

Zubair November 7, 2010 at 10:55 pm

@Jeremy Williams:
Glad to hear you found the post useful, I’m glad to be of assistance :)

Reply

Mati May 5, 2011 at 1:09 am

Tnks!

Reply

mdinis May 24, 2011 at 4:55 pm

Exactly what I was looking for. Just googled it and your site came up!

the font-type i’m using doesn’t have an italic version. Testing the css I couldn’t tell the difference between oblique and italic font-style!

thought my eyes we’re deceiving me! now I know…thank you for explaning!

greetings!

Reply

Zubair May 24, 2011 at 5:01 pm

@mdinis: I’m glad you found this useful, and thanks for dropping by :)

Reply

Zain July 23, 2011 at 9:53 am

Very Good Info Zubair!! Good research work!

Reply

ric November 14, 2011 at 2:41 am

very good info. thanks alot!

Reply

Leave a Comment

{ 1 trackback }

Previous post:

Next post: