256

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?

3
  • 34
    Message from the future: Wikipedia has a very nice example showing the difference between italic and oblique.
    – Cornstalks
    Commented Jul 4, 2013 at 22:29
  • Late follow-up question (or maybe this should go into UX?): What wolud be a real-world use case for specifically choosing the oblique variant? Isn't the italic variant "always" preferable?
    – KlaymenDK
    Commented Nov 16, 2016 at 9:58
  • 1
    @KlaymenDK: Admittedly, this is a narrow use case, but I can envision preferring an oblique font for legibility in certain small font sizes on pixelated outputs: Example: using a 6pt to 8pt font on a small form-factor screen; some italic forms have thinner strokes and more ornaments that may decrease legibility compared to a simple "slant".
    – Dan H
    Commented Aug 30, 2017 at 12:40

5 Answers 5

318

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.

7
  • 53
    It may be helpful to note that almost no font families in the wild specify both Italic and Oblique faces, and most rendering engines will supply the other face if the specified face is unavailable for that font. Commented Nov 6, 2010 at 3:16
  • 9
    This answer doesn't address the functional differences, the mutual exclusivity, or semantic differences.
    – ahnbizcad
    Commented Oct 23, 2014 at 16:41
  • 4
    With Cyrillic fonts for example, the italic characters will often be very different, much more like the cursive form, the oblique form will just be oblique. Commented Apr 3, 2016 at 15:39
  • 1
    What is a rendering engine supposed to do if I say "italic" but there is only an "oblique" version of the font available? Or vice versa?
    – Michael
    Commented Feb 11, 2018 at 10:27
  • 2
    @SingleNegationElimination Your comment should've been the answer because it addresses the real technicality at place when it comes to CSS in particular. The "answer" chosen here is more on typography. Commented Sep 26, 2018 at 7:23
88

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?)

1
  • 1
    Latin Modern is a well-known example of a font that has distinct oblique and italic styles. In this tex.stackexchange question, the styles are demonstrated.
    – Bolpat
    Commented Dec 1, 2023 at 13:52
31

As with italic and oblique, the same difference is visible when comparing italic with faux italic.

You will see faux-italics wherever a normal font is skewed with font-style: italic; whereas a true italic font is designed to be slanted.

enter image description here

The bottom of the two ll​s shows the difference clearly.

See Example

3
  • 9
    Do you mean oblique equals faux-italic?
    – zwcloud
    Commented Jun 26, 2018 at 14:13
  • 1
    Yes, if neither an oblique nor a italic font are available the results will appear the same (at least in chrome for this example) next.plnkr.co/edit/SpaDzXmSb1oADxUfKVg1?preview Commented Aug 12, 2018 at 16:17
  • 1
    could NOT have done this answer without a visual aid, thanks Commented Dec 10, 2019 at 15:55
25

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

0
4

According to mozilla developer CSS tutorial :

  • italic: Sets the text to use the italic version of the font if available; if not available, it will simulate italics with oblique instead.
  • oblique: Sets the text to use a simulated version of an italic font, created by slanting the normal version.

  • From here, we deduce that if an italic version of the font is not available, both italic and oblique behave the same way. Since the W3Schools code snippet does not specify any particular font-family, I believe a default font is used; a default font which probably does not have an italic version.

    But how to make an italic version of the font available?

    This means that we have at least two versions of the same font, a "regular" one, and an italic one. These can be specified in the <style> section with the @font-face rule. Please read briefly : developer.mozilla, w3schools, tympanus.net. As you can see, the font is loaded as a file, which can have the following extensions: eot, otf, woff, truetype.

    So far, i found two ways of linking the font file

  • absolute URL of the font file: (code snippet from tympanus.net)

    `@font-face {
     font-family: 'Open Sans';
     font-style: normal;
     font-weight: 400;
     src: local('Open Sans'), local('OpenSans'), 
     url (http://themes.googleusercontent.com/static/fonts/opensans/v8/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
    }
    
     @font-face {
     font-family: 'Open Sans';
     font-style: italic;
     font-weight: 400;
     src: local('Open Sans Italic'), local('OpenSans-Italic'), 
     url 
     (http://themes.googleusercontent.com/static/fonts/opensans/v8/
     xjAJXh38I15wypJXxuGMBobN6UDyHWBl620a-IRfuBk.woff)
     format('woff');
     }`
    

    Please notice that in both cases we have font-family: 'Open Sans', which basically defines the same font; but in the first case we have font-style: normal;, while in the second case we have font-style: italic;. Also note that the URLs point to different files. Now, going back to the w3schools code snippet, that's how the browser can distinguish between font-style: normal and font-style: italic

  • using the relative path to the font file : (code snippet from metaltoad.com)

    Instead of defining separate font-family values for each font, You can use same font-family name for each font, and define the matching styles, like so:

    `@font-face {
    font-family: 'Ubuntu';
    src: url('Ubuntu-R-webfont.eot');
    font-weight: normal;
    font-style: normal;
    }
    @font-face {
    font-family: 'Ubuntu';
    src: url('Ubuntu-I-webfont.eot');
    font-weight: normal;
    font-style: italic;
    }`
    

    In this case, the .eot files must be stored in the same folder as the html page. Again, notice that the font-family is the same, the font-style is different, and also the urls are different: Ubuntu-R-webfont vs Ubuntu-I-webfont.

    Example of an italic version of the font:

    ctan.org :this is an example of how there are provided different files for different styles/weights of the same font. Neither bold or italic are computed on the spot, they are retrieved from their specific file.

  • 1
    • 1
      my answer addresses the second part of the question: "... but was unable to tell the difference. What am I missing?" Commented Nov 5, 2019 at 16:48

    Your Answer

    By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

    Not the answer you're looking for? Browse other questions tagged or ask your own question.