The font-variant-caps
CSS property controls the use of alternate glyphs for capital letters.
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.
This property accounts for language-specific case mapping rules. For example:
i
(one with the dot, one without) and two case pairings: i
/İ
and ı
/I
.ß
becomes SS
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 (άι
/ΑΪ
)./* 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: 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.
normal
small-caps
smcp
). Small-caps glyphs typically use the form of uppercase letters but are reduced to the size of lowercase letters.all-small-caps
c2sc
, smcp
).petite-caps
pcap
).all-petite-caps
c2pc
, pcap
).unicase
unic
).titling-caps
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.normal | small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps
<p class="small-caps">Firefox rocks, small caps!</p> <p class="normal">Firefox rocks, normal caps!</p>
.small-caps { font-variant-caps: small-caps; font-style: italic; } .normal { font-variant-caps: normal; font-style: italic; }
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.
Initial value | normal |
---|---|
Applies to | all elements. It also applies to ::first-letter and ::first-line . |
Inherited | yes |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Specification | Status | Comment |
---|---|---|
CSS Fonts Module Level 3 The definition of 'font-variant-caps' in that specification. | Candidate Recommendation | Initial definition |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 52 | No | 34
|
No | 39 | No |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | 52 | 52 | No | 34
|
39 | No | 6.0 |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-caps