CSS For More Dramatic Italics

With standard font-style in CSS, it is not possible to customise the italic state.

The slant angle of italicized text is primarily determined by the font you’re using (and to a lesser extent, individual browser idiosyncrasies). And note that some fonts don’t even have the italic variant at all.

So, if the slant angle is your primary concern, your best bet is to switch to a new font that has a more pronounced slant.

If this is not an option for you, you can use CSS3’s “skew” property to apply a class to the italicized text (with some caveats — see below).

Here is a sample CSS code (customized from this StackOverflow question):

.slant {
    -moz-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(-30deg, 0deg);
    -webkit-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(-30deg, 0deg);
    -o-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(-30deg, 0deg);
    -ms-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(-30deg, 0deg);
    transform: scale(1) rotate(0deg) translate(0px, 0px) skew(-30deg, 0deg);
}

Now you need to remember to add this class to any text you want to be italicized, like:

<p class="slant">Some text</p>

Now the caveats I mentioned:

1. This will not look as good compared to a real italic font.
2. This will not work in older browsers that don’t support CSS3 skew
3. It appears the CSS3 skew property only works on block-level elements. What this means is you can’t apply this inline to a part of a paragraph while keeping the rest of the paragraph non-italicized.

Now, if your goal is broader — to emphasize and grab attention, not just increase slant angle — then you could explore other ways to do this (e.g. make the text bolder, change color or background, increase font size, etc).