Font Variant Caps

Utilities for controlling alternate glyphs for capital letters.

Default class reference
Class
Properties
small-caps font-variant-caps: small-caps;
all-small-caps font-variant-caps: all-small-caps;
titling-caps font-variant-caps: titling-caps;

Usage

Use the font-variant-caps utilities to transform letters into optimised capital forms. Small Caps are less distracting than all capitals for longer form text settings. They also provide an additional way to apply emphasis within text.

Small caps
cmcp

This feature turns lowercase characters into small capitals.

Not all caps are Small Caps.

Not all caps are Small Caps.

<p class="small-caps">Not all caps are Small Caps.</p>

All small caps
smcp c2sc

Like small-caps but transforms uppercase characters into small capitals as well.

All caps are Small Caps.

All caps are Small Caps.

<p class="all-small-caps">All caps are Small Caps.</p>

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.

Note: This feature is not exclusively for capital letters, but for any forms better suited for large type, as in titles. It is included with these utilities due to how it is applied in the W3C spec.

Quick, Brown, Lazy, Grumpy

Quick, Brown, Lazy, Grumpy

<p class="titling-caps">Quick Brown Lazy Grumpy</p>