W3cubDocs

/CSS

font-variant-caps

The font-variant-caps CSS property controls the usage of alternate glyphs for capital letters.

/* 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;

Scripts can have capital letter glyphs of different sizes, the normal uppercase glyphs, small capital glyphs, and petite capital glyphs. This property controls which alternate glyphs to use.

If petite capital glyphs are not present in the font, small capital glyphs are used. If these are not present, the browser synthesizes them from the uppercase glyphs. Note that some caseless characters, like punctuation marks, may have special glyphs: they are designed to better match the characters around them. Nevertheless, synthetic small capitals glyphs are never synthesized for caseless character.

The font-variant-caps values take into account language-specific case mapping rules, such as:
  • In Turkic languages, like Turkish (tr), Azerbaijani (az), Crimean Tatar (crh), Volga Tatar (tt), and Bashkir (ba), there are two kinds of i, with and without the dot, and two case pairings: i/İ and ı/I.
  • In German (de), the ß becomes SS 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 (άι/ΑΪ).
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

Syntax

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 reduced to the size of 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.

Formal syntax

normal | small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps

Examples

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 Status Comment
CSS Fonts Module Level 3
The definition of 'font-variant-caps' in that specification.		 Candidate Recommendation Initial definition

Browser Compatibility

Feature Chrome Edge Firefox Internet Explorer Opera Safari
Basic support 52 No

34

24 — 341

 No 39 No
Feature Android webview Chrome for Android Edge mobile Firefox for Android IE mobile Opera Android iOS Safari
Basic support 52 52 No

34

24 — 341

 No 39 No

1. From version 24 until version 34 (exclusive): this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

Edit this page on MDN

© 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