What Are Small Caps?

Small caps are a refined typographic device that often goes unnoticed precisely because they work so quietly. They let a designer signal emphasis, mark abbreviations, or add a classical touch without the loud, blocky feel of full capital letters. This guide explains what small caps are, why they exist, the important difference between true and faux small caps, and how to apply them with CSS.

What small caps are

Small caps are letters that have the shape of uppercase letters but the height of lowercase letters. If you set the word “typography” in small caps, every letter looks like a capital, but they are only about as tall as the lowercase “x” in the surrounding text, often slightly taller. The result is a line of capitals that sits comfortably alongside regular text instead of towering over it.

The key comparison is with full uppercase. Setting a word in full caps inserts tall letters that break the even texture of a line and draw strong attention. Small caps keep the uppercase form but respect the x-height, so they blend into running text while still reading as capitals.

True small caps versus faux small caps

This distinction matters a great deal for quality.

• True small caps are separate glyphs drawn by the type designer specifically for the purpose. Their stroke weight is adjusted to match the surrounding lowercase letters, so they look balanced and even.
• Faux (fake) small caps are produced by software simply scaling down the full capitals. Because the strokes shrink along with the letters, faux small caps end up too light and spindly next to the body text, which a trained eye can spot.

Whenever possible, use a font that includes true small caps. Many high-quality text faces provide them as an OpenType feature. If a font lacks true small caps, the browser or software may synthesize faux ones, which is better than nothing but not ideal.

When to use small caps

Small caps have several traditional uses:

• Acronyms and abbreviations. Setting strings like “NASA” or “PDF” in small caps keeps them from shouting within body text while remaining clearly capitalized.
• Emphasis with restraint. A name, a term, or a phrase can be set in small caps for a subtle, elegant emphasis that italics or bold would make louder.
• Opening lines. The first few words of a chapter are sometimes set in small caps, often after a drop cap, to ease the transition into body text.
• Headers and labels. Small caps lend a classical, understated feel to running heads, section labels, and bylines.

A useful habit is to add a little letterspacing (tracking) to small caps. Because they are compact capitals, a touch of extra space between letters improves their legibility and evenness.

How to apply small caps in CSS

On the web, the modern and preferred property is font-variant-caps, which can request true small caps from the font:

.smallcaps {
  font-variant-caps: small-caps;
  letter-spacing: 0.03em;   /* gentle tracking helps */
}

The older shorthand font-variant: small-caps still works and is widely supported:

abbr {
  font-variant: small-caps;
}

When the font provides genuine small-cap glyphs, these properties use them. When it does not, the browser synthesizes faux small caps by scaling the capitals. There is also all-small-caps, which converts both uppercase and lowercase input letters to small caps, useful when your source text is in mixed case:

.label {
  font-variant-caps: all-small-caps;
}

Keep the underlying text in normal case in your HTML. Let CSS handle the small-caps appearance so the text stays readable, selectable, and correct for screen readers, rather than typing everything in capitals.

A quick comparison

Fonts with true small caps

Many serif text families designed for books and editorial work include true small caps, and a growing number of web fonts do as well. When choosing a font, check whether its character set or OpenType features list small caps. Freely available options on services like Google Fonts increasingly support the feature; always test the actual rendering rather than assuming, since a missing feature triggers faux small caps.

One quick way to tell true from faux in the browser is to compare the stroke weight of a small-cap letter with the lowercase beside it. If the small caps look noticeably lighter and thinner, the font is being scaled down and you are seeing faux small caps. If the weights match and the letters feel balanced, you have the real thing. When the difference bothers you and the font offers no true small caps, the most reliable options are to switch to a font that does, or to reserve small caps for short labels where the slight thinness is less noticeable rather than long passages.

Frequently asked questions

What is the difference between small caps and uppercase?

Uppercase letters are set at the full cap height and stand tall in a line of text. Small caps have the same capital shapes but are drawn near the x-height, so they sit level with lowercase letters and blend into running text while still reading as capitals.

What are faux small caps?

Faux small caps are capitals that software has simply shrunk to a smaller size. Because the strokes shrink too, they look too thin next to the body text. True small caps, by contrast, are designed with matching stroke weight, so they look balanced.

How do I set small caps in CSS?

Use font-variant-caps: small-caps (or the older font-variant: small-caps). If the font includes true small-cap glyphs, the browser uses them; otherwise it synthesizes faux ones. Keep your text in normal case and let CSS do the styling.

When should I use small caps?

They suit acronyms, subtle emphasis, chapter openings, and labels where full capitals would feel too loud. They add a classical, understated tone. A little letterspacing usually improves their appearance.

Do all fonts have small caps?

No. Only fonts that include small-cap glyphs offer true small caps. Many quality text faces do, but plenty of fonts do not, in which case software falls back to faux small caps. Check the font’s features and test the result.