What are small caps and how do you use them properly?

Small caps are capital letterforms designed to be roughly the height of lowercase letters, with stroke weights and proportions that match the surrounding text. They let you set acronyms, abbreviations, labels and opening phrases in capitals without the heavy, shouting look of full-size capitals. True small caps are drawn by the type designer and stored in the font as the OpenType features smcp (lowercase to small caps) and c2sc (capitals to small caps). In CSS you use them with font-variant-caps: small-caps or font-variant-caps: all-small-caps. If the font doesn't contain real small caps, browsers fake them by shrinking ordinary capitals, which produces thin, spindly letters, so using them properly starts with choosing a font that has them.

Small caps are one of the clearest signs of careful typesetting. They let a paragraph full of acronyms like NASA, HTML and UNESCO read calmly, give bylines and section openers a refined touch, and create hierarchy without adding size or weight. Used badly, they look like a mistake. In this article you'll learn how real small caps differ from fake ones, where they work best, how to set them in CSS, how to keep the HTML meaningful for assistive technology, and how to prevent browsers from faking them.

What Makes True Small Caps Different

The easiest way to understand small caps is to compare them with the alternative: taking regular capitals and scaling them down.

When capitals are simply shrunk to about 70% of their size, everything shrinks, including the stroke thickness. Next to full-size lowercase letters, the scaled capitals look lighter and narrower, and the spacing between them feels tight. That's what browsers produce when they synthesise small caps.

A type designer drawing true small caps adjusts several things:

• Stroke weight: Matched to the lowercase, so small caps have the same colour on the page as the surrounding text.
• Proportions: Usually slightly wider than scaled capitals, which helps legibility at small sizes.
• Height: Typically a little taller than the x-height, though this varies by design.
• Spacing: Built-in sidebearings are a little more generous, because capitals need more space than lowercase letters.

The result is capitals that sit comfortably inside a line of text rather than looking pasted in.

Where Small Caps Work Well

Acronyms and Initialisms

A sentence with several acronyms set in full capitals has dark blocks scattered through it. Setting them in small caps keeps the line even:

• The report from the WHO, the UN and NATO was published as a PDF.

In print and in carefully set web text, those acronyms would be small caps. Many style guides recommend this for long-form text, though it's a choice rather than a rule, and in interfaces full capitals are more common.

Opening Lines

Book and magazine design often sets the first few words of a chapter or article in small caps, leading the eye from a heading into the text. It's an elegant alternative to a drop cap.

Labels and Headers

Small caps make good overlines, table headers, captions and metadata, because they read as capitals but take less space and weight than full capitals.

Abbreviations With Numbers

Time and era abbreviations such as AM, PM, BC and AD look natural in small caps, especially next to old-style figures, which are similar in height.

Names in Specific Contexts

Bibliographies, legal documents and some academic styles set authors' surnames in small caps. Scripture translations in English often set "LORD" in small caps to follow a specific translation convention. Follow the conventions of your field.

Where to Avoid Them

• Long passages: Paragraphs of small caps are as tiring to read as paragraphs of capitals.
• Buttons and critical UI text: Small caps can look unfamiliar in interfaces and may reduce scanability.
• Fonts without true small caps: Faked small caps usually look worse than full capitals or lowercase.
• Very small sizes: Small caps are already small. In a 12-pixel caption they can become hard to read.

How to Set Small Caps in CSS

The modern property is font-variant-caps. Its two main values do different things.

small-caps

small-caps converts lowercase letters to small caps and leaves capitals as they are. It enables the smcp feature.

<p class="byline">Words by Amira Khan</p>

.byline {
  font-variant-caps: small-caps;
}

Here "A" and "K" stay full capitals, while the remaining letters become small caps. This mixed look is traditional for names and headings.

all-small-caps

all-small-caps converts both lowercase and capital letters to small caps. It enables smcp and c2sc.

<p>The <abbr class="acronym" title="World Health Organization">WHO</abbr> issued new guidance.</p>

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

This is the right choice for acronyms, because you can write them in normal capitals in the HTML, which is what they are, and let CSS handle the appearance.

Other Values

font-variant-caps also accepts petite-caps and all-petite-caps (smaller than small caps), unicase (a mix of capital and lowercase forms at one height) and titling-caps (capitals designed for large sizes). Few fonts include these forms. If the font lacks them, browsers fall back to small caps or synthesised forms.

The Older font-variant Shorthand

You'll still see this in older stylesheets:

.old-way {
  font-variant: small-caps;
}

It works and is equivalent to font-variant-caps: small-caps, but font-variant is a shorthand that also resets ligature and numeric settings, so prefer the specific property.

Add a Little Letter Spacing

Small caps, like full capitals, benefit from slightly looser spacing than lowercase text. True small caps include some extra space already, but a small amount more often helps, especially at smaller sizes:

.acronym {
  font-variant-caps: all-small-caps;
  letter-spacing: 0.05em;
}

Somewhere between 0.03em and 0.1em is a typical range. Judge it by eye with your font. Note that any non-zero letter-spacing turns off optional ligatures, which is fine for capitals.

Keep the HTML Meaningful

How you write the text in HTML affects screen readers, copy and paste, and search.

1. Write acronyms in capitals: Put "NASA" in the HTML and use all-small-caps. If you write "nasa" in lowercase and use small-caps, screen readers may read it as a word, and copying the text gives you lowercase letters.
2. Write normal text in normal case: For a byline or opening phrase, write it as you would in a sentence and use small-caps.
3. Avoid typing Unicode small capital characters: Characters such as "ᴀ" and "ʙ" from the phonetic extensions block look similar but are different letters. Screen readers may read them oddly or not at all, and search won't match them.
4. Use abbr where it helps: The abbr element with a title can provide an expansion, though the title isn't reliably announced, so expand the term in the text on first use too.

A short demonstration of the difference copying makes:

const el = document.querySelector(".acronym");

console.log(el.textContent);
console.log(getComputedStyle(el).fontVariantCaps);

WHO
all-small-caps

The text content stays "WHO" regardless of how it's displayed.

Preventing Fake Small Caps

When the font has no small caps, browsers synthesise them by scaling capitals. You can stop this with font-synthesis:

body {
  font-synthesis-small-caps: none;
}

Or, using the shorthand, which also controls bold and italic synthesis:

body {
  font-synthesis: weight style;
}

The shorthand lists the kinds of synthesis that are allowed. Leaving out small-caps disables synthesised small caps while still allowing fake bold and italic. With synthesis disabled, a font without small caps shows the letters at their normal case and size instead of fake small caps, which is usually a cleaner failure.

Testing Whether a Font Has Them

There's no CSS feature query for a specific OpenType feature in a specific font. Instead, check before you commit:

• Read the specimen: Families with true small caps usually advertise them.
• Inspect the file: Wakamai Fondue or a fontTools script will show whether smcp and c2sc are present.
• Compare visually: Put real and synthesised versions side by side.

<p class="real">Real small caps: <span>Typography Matters</span></p>
<p class="fake">Scaled capitals: <span>TYPOGRAPHY MATTERS</span></p>

<style>
  .real span { font-variant-caps: all-small-caps; letter-spacing: 0.04em; }
  .fake span { font-size: 0.72em; letter-spacing: 0.04em; }
</style>

If the two spans look identical, the font is being synthesised. With true small caps, the first version looks heavier and better balanced.

Keep the Features When Subsetting

If you subset fonts, smcp and c2sc may be stripped along with other features. Keep them explicitly:

pyftsubset EBGaramond-Variable.ttf \
  --unicodes="U+0000-00FF,U+2018-201D" \
  --layout-features+=smcp,c2sc,onum \
  --flavor=woff2 \
  --output-file=eb-garamond-latin.woff2

Fonts With True Small Caps

Many quality serif families include small caps, and some sans-serifs do too. A few freely available options:

• EB Garamond: Includes small caps and old-style figures, well suited to editorial work.
• Cormorant: A display-leaning Garamond with small caps, also published on Google Fonts as the separate Cormorant SC family.
• Alegreya and Alegreya Sans: Small caps are available, and on Google Fonts they're also published as separate "SC" families.
• Libertinus: An open-source family with extensive OpenType features, including small caps.

When a service publishes small caps as a separate family, such as Alegreya Sans SC, you load that family and apply it with font-family rather than font-variant-caps. That works, but it's less flexible, and the text is still letters of the normal case underneath.

Small caps pair naturally with old-style figures, which are similar in height. For more on that combination, see old-style and lining figures.

---

FAQ: Small Caps

---

Conclusion

Small caps are capitals redrawn to the height and weight of lowercase text, and they solve a specific problem well: setting acronyms, labels, bylines and opening phrases in capital letters without disrupting the line. The difference between true and fake small caps is obvious once you've seen it, so the first step is choosing a font that includes the smcp and c2sc features.

Use font-variant-caps: all-small-caps for acronyms written in capitals and small-caps for mixed-case text, add a touch of letter spacing, and keep the HTML in its natural case so screen readers and search see the right characters. Disable small caps synthesis so a missing feature fails cleanly, keep the features when you subset, and reserve small caps for short runs of text where they add refinement rather than noise.