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; /* default is `normal` */

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.


  1. Josh
    Permalink to comment#


    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. ;)

    • Louis
      Permalink to comment#


      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.


    • Josh
      Permalink to comment#


      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…

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

    • Louis
      Permalink to comment#

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

      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#


    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.

    • Louis
      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. Mike Higginbottom
    Permalink to comment#

    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

    • Paul A.
      Permalink to comment#

      The workaround is mentioned in the article: “text-transform: lowercase”. You can write the acronym in caps in the HTML source, and when the CSS is applied it is transformed to lowercase before being converted to small caps.

  6. monty
    Permalink to comment#

    Can this font variant tool be used in Adobe Photoshop CC to reduce the file size of a logo that will be saved in “.png” or “gif format, since google has a 30kb size limit for their logo size in their G suite app?


Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.