CSS / Reference / font-variant: Small Capitals and Font Features

font-variant is a shorthand for font features such as small capitals, numeric variants, and ligatures. small-caps requests small-cap letterforms; the exact result depends on the font’s available features.

Syntax and value choices

Initial values are not necessarily the values assigned to HTML elements by the browser’s stylesheet. Inspect the actual result in developer tools’ Computed panel.

.label { font-variant: small-caps; }
.amount { font-variant-numeric: tabular-nums; }

For supported values and conditions, see MDN font-variant.

Run the example and compare results

Save this complete code as css-reference-10492-example.html in UTF-8 and open it in a browser. Keep its demonstration styles in that file rather than pasting them into a site-wide stylesheet.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>font-variant comparison example</title>
<style>
body { margin: 0; color: #20242b; background: #fff; font: 16px/1.7 "Malgun Gothic", sans-serif; }
#demo { padding: 24px; max-width: 820px; margin: auto; }
h1 { font-size: 22px; margin: 0 0 20px; }
.samples { display: flex; flex-wrap: wrap; gap: 24px; }
.label { margin: 0 0 8px; font-weight: 700; }
.target, .reference { font: 26px/1.6 Georgia, serif; }
.target { font-variant: small-caps; }
.reference { font-variant: normal; }
</style>
</head>
<body>
<main id="demo">
<h1>font-variant comparison</h1>
<section class="samples"><div class="a"><p class="label">small-caps</p><div class="target">Hello CSS World</div></div><div class="b"><p class="label">normal</p><div class="reference">Hello CSS World</div></div></section>
</main>
</body>
</html>

Compare lowercase letterforms and their height. A font with real small capitals can differ from a synthesized result, so the two views are not a font-independent pixel specification.

The source string does not change

Small capitals affect presentation, not the DOM’s original text. text-transform: uppercase has a different purpose. Korean text alone does not demonstrate English case changes; include suitable lowercase Latin text.

Set only the feature you need

Use a longhand such as font-variant-numeric when the task only concerns number alignment. A later font-variant shorthand can reset other variant settings. Font files vary in the features they provide, so inspect the selected font before blaming the CSS value.

Change one setting at a time

Use the complete example file above. Change only the specified selector or value rather than several comparison conditions at once.

1. Inspect .target in Elements: the source remains Hello CSS World. Change small-caps to normal, observe, and restore it.
2. To inspect digit alignment, use 1111 / 8888, set font-variant to normal and font-variant-numeric to tabular-nums. A supporting font can equalize digit advances. If it looks unchanged, inspect the actual features, then restore the text and rules.

For coordinated font sizing, line heights, and typeface choices, see CSS Fonts, Font Sizes, and Line Height. Related properties to compare alongside these conditions are font-family.

When the result is missing or unexpected

• Include lowercase Latin letters when testing small-caps.
• Check the actual font and feature support if numeric variants look unchanged.