CSS font-variant-caps Property

Description

The font-variant-caps CSS property controls which alternate forms of capital letters a browser will use when rendering text. It signals to the font rendering system and the chosen font which typographic capital styles to apply so that text can use dedicated uppercase glyph designs offered by the font (or fall back to synthesized forms when those real glyphs are missing). Because it selects glyph variants rather than altering the underlying characters, it affects the visual appearance and metrics of text without changing the actual DOM text content.

In practice, this property interacts closely with the font’s OpenType features and the font selection you provide. For fine-grained control of specific low-level OpenType substitutions you would use font-feature-settings, and font-variant can be used as a shorthand umbrella for related typographic variants. When a font exposes alternate capital glyphs the renderer will prefer those; when it does not, browsers may synthesize variants (for example by scaling or slanting existing uppercase glyphs), which can look inferior and alter line metrics and spacing.

From a design and accessibility standpoint, prefer fonts that include true alternate-cap glyphs rather than relying on synthesized variants—real small caps and other cap variants maintain intended stroke contrast and weight. Also remember that visual capitalization choices are presentational: if the meaning of the content depends on capitalization for accessibility or semantics, address that in the source text rather than relying solely on styling; for transforming case purely for presentation, consider pairing with text-transform. Finally, be aware that enabling different capital variants can change layout (line breaks, alignment) and may trigger reflows when fonts load or when variant selection changes, so test typographic choices across your chosen font-family stack and sizes.

Definition

Initial value: normal
Applies to: All elements
Inherited: Yes
Computed value: As specified
Animatable: No
JavaScript syntax: object.style.fontVariantCaps

Interactive Demo

font-variant-caps: normal;

font-variant-caps: small-caps;

font-variant-caps: all-small-caps;

Difficult waffles

Syntax

font-variant-caps: normal | small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps

Values

normalNone of the features listed below are enabled.
small-capsEnables display of small capitals (OpenType feature: smcp). Small-caps glyphs typically use the form of uppercase letters but are reduced to the size of lowercase letters.
all-small-capsEnables display of small capitals for both upper and lowercase letters (OpenType features: c2sc, smcp).
petite-capsEnables display of petite capitals (OpenType feature: pcap).
all-petite-capsEnables display of petite capitals for both upper and lowercase letters (OpenType features: c2pc, pcap).
unicaseEnables display of mixture of small capitals for uppercase letters with normal lowercase letters (OpenType feature: unic).
titling-capsEnables display of titling capitals (OpenType feature: titl). Uppercase letter glyphs are often designed for use with lowercase letters. When used in all uppercase titling sequences they can appear too strong.

Example

HTML

<div class="container">

    <h1>font-variant-caps examples</h1>



    <div class="demo">

        <p class="label">Normal (baseline)</p>

        <p class="sample sample-normal">The Quick Brown Fox Jumps Over The Lazy Dog</p>

    </div>



    <div class="demo">

        <p class="label">small-caps</p>

        <p class="sample sample-small-caps">The Quick Brown Fox Jumps Over The Lazy Dog</p>

    </div>



    <div class="demo">

        <p class="label">all-small-caps</p>

        <p class="sample sample-all-small-caps">The Quick Brown Fox Jumps Over The Lazy Dog</p>

    </div>



    <div class="demo">

        <p class="label">petite-caps</p>

        <p class="sample sample-petite-caps">The Quick Brown Fox Jumps Over The Lazy Dog</p>

    </div>



    <div class="demo">

        <p class="label">all-petite-caps</p>

        <p class="sample sample-all-petite-caps">The Quick Brown Fox Jumps Over The Lazy Dog</p>

    </div>



    <div class="demo">

        <p class="label">unicase</p>

        <p class="sample sample-unicase">The Quick Brown Fox Jumps Over The Lazy Dog</p>

    </div>



    <div class="demo">

        <p class="label">titling-caps</p>

        <p class="sample sample-titling-caps">The Quick Brown Fox Jumps Over The Lazy Dog</p>

    </div>

</div>

CSS

/* Basic page settings */
body {
    margin: 24px;
    font-family: "Georgia", "Times New Roman", serif;
    background: #f7f7fb;
    color: #222;
}

.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    background: #ffffff;
    border: 1px solid #e2e6ef;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(31, 41, 55, 0.06);
}

h1 {
    margin: 0 0 18px 0;
    font-size: 20px;
    font-weight: 600;
}

.demo {
    padding: 12px 0;
    border-top: 1px dashed #eceef6;
}

.demo:first-of-type {
    border-top: none;
}

.label {
    margin: 0 0 6px 0;
    font-size: 13px;
    color: #4a5568;
    font-weight: 600;
}

.sample {
    margin: 0;
    padding: 10px 14px;
    font-size: 24px;
    line-height: 1.25;
    border-left: 4px solid #e6eef8;
    background: linear-gradient(180deg, rgba(230,238,248,0.5), transparent);
    border-radius: 4px;
}

/* Examples of font-variant-caps values */
.sample-normal {
    font-variant-caps: normal; /* baseline */
}

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

.sample-all-small-caps {
    font-variant-caps: all-small-caps;
}

.sample-petite-caps {
    font-variant-caps: petite-caps;
}

.sample-all-petite-caps {
    font-variant-caps: all-petite-caps;
}

.sample-unicase {
    font-variant-caps: unicase;
}

.sample-titling-caps {
    font-variant-caps: titling-caps;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS font-variant-caps property. Hover over a browser icon to see the version that first introduced support for this CSS property.