Grow your CSS skills. Land your dream job.

font-variant

Last updated on:

The font-variant property allows you to change the targeted text to small caps. This property has been extended in CSS3.

p:first-line {
    font-variant: small-caps;
}

Before CSS3, this property accepted one of two possible values: normal (how text is rendered by default) and small-caps.

A value of small-caps will render the text in uppercase letters that are smaller than regular uppercase letters. This does not override uppercasing set in the content, inside the markup. For example:

Check out this Pen!

In the above demo, both paragraphs are set to font-variant: small-caps. The first paragraph has only the first letter uppercase in the markup, so it appears as expected (first letter uppercase, remainder in small caps).

The second line is written in all uppercase in the markup, which overrides the small-caps value, setting everything in regular uppercase.

Taking this further, if these paragraphs are set to font-variant: small-caps and text-transform: lowercase, then they will appear in all small caps. Similarly, if these paragraphs are set to font-variant: small-caps and text-transform: uppercase, then they will appear in all regular uppercase.

font-variant can be included as part of a font shorthand declaration.

New Additions in CSS3

In CSS3, font-variant becomes a shorthand and can accept multiple values, including all-small-caps, petite-caps, all-petite-caps, titling-caps, and unicase, among others.

Related Properties

Other Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
Works Works Works Works Works Works Works

The new values added in CSS3 have no browser support, so the table above represents support for a value of small-caps.

In IE6/7, setting font-variant: small-caps will cause any text set to text-transform: uppercase or text-transform: lowercase to appear like text-transform: none.

Comments

  1. Permalink to comment#

    Chris,

    It should be noted that there is presently a Webkit bug that stops font-variant from working properly on non-system fonts. I’m sure they’re working on a fix, but 2 years after release, Google fonts still look atrocious in Chrome. ;)

    • Josh,

      Do you have a link to a bug report or an article describing this? I can’t find anything via Google for font-variant specifically, and I haven’t heard of this bug before.

      I’m helping Chris with some of these Almanac entries and I’ll be happy to update this if you have something specific with a link or even just a demo for comparison with other browsers.

      Thanks!

    • Permalink to comment#

      Louis,

      Glad you’re working on this almanac. It’s very useful! I realize now that I have this bug and another bug on the brain, and I got my streams crossed.

      It’s actually in Webkit with text-rendering: optimizeLegibility…

      https://code.google.com/p/chromium/issues/detail?id=51973

      Sorry about the confusion. Not sure if it’s a big enough deal to note or not. Caused me some heartburn today.

    • Ah ok, no prob. Interesting, because I don’t know much about that property. And now that I check on it:

      https://developer.mozilla.org/en-US/docs/Web/CSS/text-rendering

      It says:

      “The text-rendering property is an SVG property that is not defined in any CSS standard”, but it still works in general HTML.

    • Ima RockStar
      Permalink to comment#

      simply not true. Maybe a Microsoft employee? :)

  2. Andy
    Permalink to comment#

    Josh,

    Thanks for the info re: the optimizeLegibility bug in webkit. I couldn’t figure out why font-variant wasn’t working and it was driving me nuts.

  3. Max
    Permalink to comment#

    The font-variant property isn’t crossborwser. In webkit letters are smaller than other browsers. Is there a way to fix it?

    • Max
      Permalink to comment#

      I mean small-caps of course.

    • Permalink to comment#

      No, probably not. The example in CodePen should be using Normalize.css, so if there was any way to fix that, I’m sure it would be in there. I think it’s just a minor browser difference that you’ll have to deal with.

  4. Chris/Louis, I’ve got my suspicions that font-variant is more broken than this. I’ve only done some quick tests on Chrome but font-variant doesn’t produce ‘proper’ small-caps (in the sense of different glyphs) but rather it just produces small uppercase glyphs; which isn’t really what small caps are all about. I’ve written a quick article which highlights the problem and a potential solution. It’s by no means a rigorous browser survey but hopefully it shines a little light.

  5. Eva
    Permalink to comment#

    I think it’s kind of awkward that font-variant: small-caps won’t apply to caps written text. I like to keep my original texts as meaningful as possible, so whenever I write an acronym as HTML, I like to keep it in caps but display it in small caps via CSS. But regarding my logic, it does not work, as mentioned above, it only works on lowercase. Would there be any workaround for it? Perhaps just use a class on the acronym with a lower font-size? :-S

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".