CSS font-style

CSS font-style allows using italic and oblique text. When set to italic, an italic font face is used if available. If not, normal glyphs are sloped to create an oblique face, which is used in place. Italics is normally used to emphasize words, phrases and titles. In fact, the HTML <em> (for emphasized text) makes text italic by default.

font-style: normal|italic|oblique
font-style: italic;

Browser Support: Full

italic vs oblique Style

Oblique and italics are both font faces which look however the typeface designer created them. It can be said, though, that oblique refers to a sloped version of the regular font face while italic text is cursive. The browser can simulate oblique text by sloping the glyphs but fully italic text cannot be simulated. However, when there is no italic font face, the oblique face is used (simulated or not).

font-style: italic;

font-style: oblique;

The letter "f" has the most noticeable difference. Many fonts use sloped characters for the italic face. This could be a reason to prefer auto sloping over a separate italic face, which adds another file to the page.

Defining an Italic Font Face

Italic and oblique faces are in a file different from the normal font. Define italic and oblique webfont faces using a separate @font-face rule. Here's for Open Sans Light Italic font:

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300;
  src: local('Open Sans'), local('OpenSans'), url(path_to_font_file.woff) format('woff');
}

font shorthand

The CSS font property is a shorthand for several other properties including font-style. Use it to save lines and time. However, keep in mind that values not provided will be set to initial.

div.italic {
font: italic 28px serif;
}
This text is set to italic using the font shorthand.

Italics or Bold

Bold text is used to emphasize text as well. Some sources recommend bold instead of italics text for emphasis, for accesibility reasons. Bold italic text is also quite readable and gives even more emphasis. Whatever you use, be sure that it's clearly readable and distinct from the rest of the copy. In the case of quotes for example, making the text bigger can make up for the slight loss of readability due to italics.

Useful Resources

One comment

  1. I discovered your CSS font-style | Properties by Example page and noticed you could have a lot more visitors. I have found that the key to running a popular website is making sure the visitors you are getting are interested in your niche. There is a company that you can get traffic from and they let you try their service for free. I managed to get over 300 targeted visitors to day to my site. Visit them today: http://la7.org/8cpa

Leave a Reply

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>