font-variant-caps
Quick Summary for font-variant-caps
The font-variant-caps CSS property controls the use of alternate glyphs for capital letters.
Code Usage for font-variant-caps
/* 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: unset; 
More Details for font-variant-caps

font-variant-caps

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.

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 (άι/ΑΪ).

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: 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 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.

Accessibility concerns

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.

MDN Understanding WCAG, Guideline 1.4 explanations W3C Understanding WCAG 2.1

Formal definition

Initial valuenormal
Applies toall elements. It also applies to ::first-letter and ::first-line.
Inheritedyes
Computed valueas specified
Animation typediscrete

Formal syntax

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

See Also

font-variant-alternates font-variant font-variant-east-asian font-variant-ligatures font-variant-numeric

Last modified: Aug 12, 2021, by MDN contributors

Select your preferred language English (US)Français日本語中文 (简体) Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote

minecraft
Random CSS Property

outline-width

The CSS outline-width property sets the thickness of an element's outline. An outline is a line that is drawn around an element, outside the border.
outline-width css reference