CSS Font-Variant-Caps Enhance Your Typography

Introduction

The font-variant-caps property in CSS lets you control how capital letters appear in your text. It’s great for making your web designs look more polished and professional. This property is widely supported across devices and browsers, making it a reliable tool for web developers.

Baseline Compatibility

The font-variant-caps property has been supported across many devices and browsers since January 2020. This means you can use it confidently without worrying about compatibility issues.

Description

The font-variant-caps property controls how capital letters are displayed. When a font includes different sizes of capital letters, this property ensures the most appropriate ones are used. If smaller capital glyphs aren’t available, the browser will use regular capital letters.

Language-specific Rules

The font-variant-caps property handles language-specific case mapping rules to ensure text is displayed correctly. Here are a few examples:

• Turkic Languages: Languages like Turkish have unique rules for the letter i and İ. This property accounts for these rules.
• German: In German, the ß character can become ẞ in uppercase. This property handles this transformation correctly.
• Greek: Greek has complex rules for vowels and diphthongs. The font-variant-caps property manages these transformations seamlessly.

Syntax

Here is the syntax for using the font-variant-caps property:

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

Values

Here are the values you can use with the font-variant-caps property:

• normal: Displays text in its standard form.
• small-caps: Displays small capitals, which are uppercase letters in the size of lowercase letters.
• all-small-caps: Displays small capitals for both uppercase and lowercase letters.
• petite-caps: Displays petite capitals, which are smaller versions of uppercase letters.
• all-petite-caps: Displays petite capitals for both uppercase and lowercase letters.
• unicase: Mixes small capitals for uppercase letters with normal lowercase letters.
• titling-caps: Displays titling capitals, designed for use in all uppercase sequences.

Accessibility

When using font-variant-caps, consider accessibility, especially for users with cognitive concerns like dyslexia. Large sections of text in all-small-caps or all-petite-caps can be hard to read.

To make your website accessible:

• Avoid Overuse: Use all-small-caps and all-petite-caps sparingly, mainly for headings or short sections.
• Contrast and Readability: Ensure text has enough contrast against the background.
• Consistent Use: Be consistent in how you use font-variant-caps.

For more on accessibility, check out:

• MDN Understanding WCAG
• W3C Understanding WCAG 2.1

Formal Definition

The font-variant-caps property is formally defined as:

Examples

Here are some practical examples of using the font-variant-caps property:

HTML

<p class="small-caps">Firefox rocks, small caps!</p>
<p class="normal">Firefox rocks, normal caps!</p>
<p class="petite-caps">It is a petite-caps text.</p>
<p class="all-petite-caps">It is an all-petite-caps text.</p>
<p class="unicase">It is a unicase text.</p>
<p class="titling-caps">It is a titling caps text.</p>
<p class="all-small-caps">A computer science portal.</p>

CSS

.small-caps {
  font-variant-caps: small-caps;
  font-style: italic;
}
.normal {
  font-variant-caps: normal;
  font-style: italic;
}
.petite-caps {
  font-variant-caps: petite-caps;
  font-style: italic;
}
.all-petite-caps {
  font-variant-caps: all-petite-caps;
  font-style: italic;
}
.unicase {
  font-variant-caps: unicase;
  font-style: italic;
}
.titling-caps {
  font-variant-caps: titling-caps;
  font-style: italic;
}
.all-small-caps {
  font-variant-caps: all-small-caps;
  font-style: italic;
}

These examples show how different values of the font-variant-caps property affect the appearance of text. By using this property, you can make your website’s typography look more polished and professional, enhancing the user experience.

Specifications

The font-variant-caps property is defined in the CSS Fonts Module Level 4. For more details, check out the official specification:

• CSS Fonts Module Level 4 - font-variant-caps-prop

Browser Compatibility

The font-variant-caps property is widely supported across many browsers:

• Google Chrome: 52+
• Firefox: 34+
• Edge: 79+
• Opera: 39+
• Safari: 9.1+

For the most up-to-date information, refer to the Browser Compatibility Data (BCD) tables.

See Also

For more related CSS properties, check out:

• font-variant
• font-variant-alternates
• font-variant-east-asian
• font-variant-emoji
• font-variant-ligatures
• font-variant-numeric
• font-variant-position

These properties give you more control over your website’s typography, helping you create visually appealing and professional designs that enhance the user experience.