Title: CSS For More Dramatic Italics
Last modified: August 30, 2017

---

# CSS For More Dramatic Italics

 *  [Jes2000](https://wordpress.org/support/users/jes2000/)
 * (@jes2000)
 * [8 years, 8 months ago](https://wordpress.org/support/topic/css-for-more-dramatic-italics/)
 * The font my theme uses doesn’t display italics very well; you can barely see.
   Is there any code I can throw into a style sheet to increase the slant of italics?

Viewing 1 replies (of 1 total)

 *  [George Appiah](https://wordpress.org/support/users/gappiah/)
 * (@gappiah)
 * [8 years, 8 months ago](https://wordpress.org/support/topic/css-for-more-dramatic-italics/#post-9452865)
 * 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](https://stackoverflow.com/questions/7999015/adding-more-slant-to-italic-text/7999132#7999132)):
 *     ```
       .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).

Viewing 1 replies (of 1 total)

The topic ‘CSS For More Dramatic Italics’ is closed to new replies.

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)
 * [italics](https://wordpress.org/support/topic-tag/italics/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 1 reply
 * 2 participants
 * Last reply from: [George Appiah](https://wordpress.org/support/users/gappiah/)
 * Last activity: [8 years, 8 months ago](https://wordpress.org/support/topic/css-for-more-dramatic-italics/#post-9452865)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics