BlogsDope image BlogsDope

CSS font-variant

June 8, 2017 CSS FONT 399

The font-variant property specifies if a text should be displayed in small caps. This property should not be confused with text-transform. It is a shorthand property of font.


font-variant: value;

Small caps differ from regular capitals in the way that small caps are the scaled down versions of the regular capitals.


normal : This is the default value which renders normal font.

small-caps : This converts the font into small caps.


See the Pen font-variant: small caps by Aakhya Singh (@aakhya) on CodePen.

In the above example, all the letters except the first one got converted into small caps. This is because the value small-caps converts the lowercase letters into small caps and does not affect the uppercase letters.

Therefore, if you give both the properties font-variant and text-transform to some text and set the value of the former small-caps, then the text will appear in uppercase if the value of the latter is uppercase and in small caps if its value is lowercase.

See the Pen Converting lowercase and uppercase text to small caps by Aakhya Singh (@aakhya) on CodePen.

Browser Support

This property is supported by almost all the browsers.

Liked the post?
Inquisitive and passionate Front-end Developer and Web Designer and Co-Founder of CodesDope.
Editor's Picks

Please login to view or add comment(s).