Web Developer’s Guide to Capitals in OpenType Fonts

Capitals in OpenType Fonts: Practical Guide and Implementation

In OpenType, there are several features related to capital letters. These include small caps, caps to small caps conversion, and titling alternates. Not all fonts have these features. Each section below has links to our font library that lists fonts that support each one.

None of these features are turned on by default in web browsers. The CSS properties used to active each one are listed here.

An important implementation detail is that, by default, browsers will synthesize “fake” small caps when small caps are requested by CSS but the font file doesn’t support it. This means that the browser will take the uppercase letters in the font and scale them down to match the height of the lowercase letters. Most fonts don’t include small caps, so this is a common occurrence.

This can be acceptable sometimes, but fake small caps will likely have less correct typographic characteristics such as stroke widths, proportions, and optical sizing. If you care about typographic quality (and if you’re reading this article, you likely do), when you need real small caps, you should use choose typeface families that have them.

To prevent your browser from synthesizing small caps, use font-synthesis-small-caps: none. This is a good practice anytime you use small caps because some browsers will incorrectly use synthesized small caps even when the font file has true small caps available.

Small Caps

CSS property: font-variant-caps: small-caps
OpenType property: smcp

Small caps are capital letters drawn at lowercase height. They are fairly common in typefaces that have a full set of OpenType features, such as EB Garamond, Vollkorn, and Merriweather.

Many font foundries release small cap versions of the font with an “SC” naming convention. For example, you can find Bodoni Moda and Bodoni Moda SC families available. Both families contain small caps, but the SC version contains only full height and small caps, omitting the lowercase characters entirely.

This is to make it easier to use small caps with software like Word. With CSS, you have the option to turn on small caps when you need it, so if a foundry releases a font file with the full set of uppercase, lowercase, and small caps characters, this is usually the better option than using the more limited SC files.

As mentioned above, it’s a good idea to add font-synthesis-small-caps: none to your CSS when using this feature to ensure that you are getting true small caps.

List of fonts with small caps

Caps to small caps

CSS property: font-feature-settings: 'c2sc' 1
OpenType property: c2sc

The caps to small caps OpenType feature substitutes uppercase characters with small caps. This is in contrast to the small caps feature (smcp) which replaces lowercase letters with small caps.

This feature is slightly less common than small caps, but is implemented in many fonts with small caps.

What is the purpose of this feature? One use case is when a designer would like to use small caps but does not have the ability to change the source text. For example, the text might be provided by a backend service that the designer does not control.

One useful trick is that you can combine c2sc and smcp to convert both uppercase and lowercase letters to small caps. This will ensure that a string of text will be all small caps, even if the original text is in mixed case. You can combine them like this: font-feature-settings: 'c2sc' 1, 'smcp' 1 or use font-variant-caps: all-small-caps.

List of fonts with caps to small caps

Titling alternates

CSS property: font-feature-settings: 'titl' 1
OpenType property: titl

Titling alternates is a rare feature that designers use to select a variation of capitals that may be desirable for headlines. For example, with Vollkorn, enabling titling alternates gives you uppercase J and Q characters that do not have descenders:

The changes with titling alternates can be subtle. For example, with Source Sans 3, titling alternates makes numbers slightly taller to match the height of its uppercase characters.

List of fonts with titling alternates