The font-style property

The font-style property defines whether or not your text is italic or oblique. But what is the difference between italic and oblique? If typography is a part of your everyday work-life you probably know this, otherwise, here is an explanation: oblique is normally a roman font that has been skewed a certain number of degrees (from 8-12 degrees normally) automatically whereas an italic is created by the font designer to achieve a more calligraphic and slanted version of the font. This affects you only if you want to use an italic - you have to make sure that the font you are using actually have been designed with one, otherwise you get the oblique version and you risk a rather unpleasant sight.

Below is an example of how italic vs oblique is rendered (as you can see, it is same, which means that the font I am using does not have an italic and therefore the result isn't as pleasing for the eye as one might have hoped)

<style>
.styleItalic {font-style: italic }
.styleOblique {font-style: oblique }
</style>
<p class="styleItalic">To travel is to live - H. C. Andersen </p>
<p class="styleOblique"> To travel is to live - H. C. Andersen </p>

If you want to dig deeper into typography and the history hereof, might I propose you continue to ILoveTypography as they are some of the best in the field and write terrific articles!

What you have learned

• You use font-weight to define whether or not your text should be bold
• You use font-style to determine whether or not your text should be italic
• Not all of CSS's font-weight property's values are useful, as most free webfonts does not contain nine different weights
• A lot of Google's fonts have three weights and therefore they might be just what you need for headings and such
• Unfortunately not all webfonts have an italic and therefore you might end up with the oblique which is automatically generated whereas the italic is designed specifically to be skewed towards the right