font-variant

Avatar of Louis Lazaris
Louis Lazaris on (Updated on )

Let’s put those CSS skills to work! Claim $50 in free hosting credit on Cloudways with code CSSTRICKS.

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:

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.

Other resources

Browser support

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.