CSS font-variant Property

Description

The font-variant CSS property is used to control various typographic variations in text, primarily related to the rendering of small caps and alternate glyphs within a font family. It allows web developers to specify whether a font should use small capital letters instead of full capital letters, and it can also enable the use of alternate characters or ligatures provided by the font. This property offers fine-grained control over text styling, enhancing the aesthetics and readability of web content by providing options to adjust letterforms to match the desired design or typographic conventions.

Initial value

normal

Applies to

All elements

Inherited

Yes

Computed value

See individual properties

Animatable

No

JavaScript syntax

object.style.fontVariant

Interactive Demo

font-variant: normal;

font-variant: no-common-ligatures proportional-nums;

font-variant: common-ligatures tabular-nums;

font-variant: small-caps slashed-zero;

Syntax

font-variant: normal | small-caps

Values

• normalSelects a font that is not a small-caps font, usually the available normal font.
• small-capsSelects a small-caps font. If no small caps variant is available, the browser generates a small caps approximation.
• inherit

Example

<p>The paragraph is displayed in regular font.</p> 

<p class="test">Lowercase letters are set as uppercase reduced size.</p> 

.test {
   font-variant: small-caps; 
}

Browser Support

The following table will show you the current browser support for the CSS font-variant property.

Desktop
12	1	1	3.5	1

Tablets / Mobile
18	4	11	1	1	4.4

Last updated by CSSPortal on: 2nd January 2024