font-variant-caps CSS property
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
The font-variant-caps CSS property controls the use of alternate glyphs used for small or petite capitals or for titling.
Try it
font-variant-caps: normal;
font-variant-caps: small-caps;
font-variant-caps: all-small-caps;
<section id="default-example">
<div id="example-element">
<p>Difficult waffles</p>
</div>
</section>
@font-face {
font-family: "Fira Sans";
src:
local("FiraSans-Regular"),
url("../../../../../../shared-assets/fonts/FiraSans-Regular.woff2") format("woff2");
font-weight: normal;
font-style: normal;
}
section {
font-family: "Fira Sans", sans-serif;
margin-top: 10px;
font-size: 1.5em;
}
Syntax
/* Keyword values */
font-variant-caps: normal;
font-variant-caps: small-caps;
font-variant-caps: all-small-caps;
font-variant-caps: petite-caps;
font-variant-caps: all-petite-caps;
font-variant-caps: unicase;
font-variant-caps: titling-caps;
/* Global values */
font-variant-caps: inherit;
font-variant-caps: initial;
font-variant-caps: revert;
font-variant-caps: revert-layer;
font-variant-caps: unset;
The font-variant-caps property is specified using a single keyword value from the list below. In each case, if the font doesn't support the OpenType value, then it synthesizes the glyphs.
Values
normal-
Deactivates of the use of alternate glyphs.
small-caps-
Enables display of small capitals (OpenType feature:
smcp). Small-caps glyphs typically use the form of uppercase letters but are displayed using the same size as lowercase letters. all-small-caps-
Enables display of small capitals for both upper and lowercase letters (OpenType features:
c2sc,smcp). petite-caps-
Enables display of petite capitals (OpenType feature:
pcap). all-petite-caps-
Enables display of petite capitals for both upper and lowercase letters (OpenType features:
c2pc,pcap). unicase-
Enables display of mixture of small capitals for uppercase letters with normal lowercase letters (OpenType feature:
unic). titling-caps-
Enables 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. Titling capitals are designed specifically for this situation.
Description
When a given font includes capital letter glyphs of multiple different sizes, this property selects the most appropriate ones. If petite capital glyphs are not available, they are rendered using small capital glyphs. If these are not present, the browser synthesizes them from the uppercase glyphs.
Fonts sometimes include special glyphs for various caseless characters (such as punctuation marks) to better match the capitalized characters around them. However, small capital glyphs are never synthesized for caseless characters.
Language-specific rules
This property accounts for language-specific case mapping rules. For example:
- In Turkic languages, such as Turkish (tr), Azerbaijani (az), Crimean Tatar (crh), Volga Tatar (tt), and Bashkir (ba), there are two kinds of
i(one with the dot, one without) and two case pairings:i/İandı/I. - In German (de), the
ßmay becomeẞ(U+1E9E) in uppercase. - In Greek (el), vowels lose their accent when the whole word is in uppercase (
ά/Α), except for the disjunctive eta (ή/Ή). Also, diphthongs with an accent on the first vowel lose the accent and gain a diacritic on the second vowel (άι/ΑΪ).
Accessibility
Large sections of text set with a font-variant value of all-small-caps or all-petite-caps may be difficult for people with cognitive concerns such as Dyslexia to read.
Formal definition
| Initial value | normal |
|---|---|
| Applies to | all elements and text. It also applies to ::first-letter and ::first-line. |
| Inherited | yes |
| Computed value | as specified |
| Animation type | discrete |
Formal syntax
font-variant-caps =
normal |
small-caps |
all-small-caps |
petite-caps |
all-petite-caps |
unicase |
titling-caps
Examples
Setting the small-caps font variant
HTML
<p class="small-caps">Firefox rocks, small caps!</p>
<p class="normal">Firefox rocks, normal caps!</p>
CSS
.small-caps {
font-variant-caps: small-caps;
font-style: italic;
}
.normal {
font-variant-caps: normal;
font-style: italic;
}
Result
Specifications
| Specification |
|---|
| CSS Fonts Module Level 4 # font-variant-caps-prop |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
font-variant-caps
|
|
|
|
|
|
|
|
|
|
|
|
|
all-petite-caps
|
|
|
|
|
|
|
|
|
|
|
|
|
all-small-caps
|
|
|
|
|
|
|
|
|
|
|
|
|
normal
|
|
|
|
|
|
|
|
|
|
|
|
|
petite-caps
|
|
|
|
|
|
|
|
|
|
|
|
|
small-caps
|
|
|
|
|
|
|
|
|
|
|
|
|
titling-caps
|
|
|
|
|
|
|
|
|
|
|
|
|
unicase
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support