Design Atlas
한국어
Aa Typography

Small caps

스몰캡스

Lowercase letters redrawn as capital shapes, but smaller than full caps and matched in stroke weight to the surrounding text — not simply shrunken capitals.

Also known as: 작은대문자
···
html
<div class="stage">
  <p class="word" id="w">The Quick Fox</p>
  <div class="readout"><span id="mode">font-variant-caps: small-caps</span></div>
</div>
css
.word{font-size:7vmin;line-height:1.3;font-family:Georgia,'Times New Roman',serif;color:var(--fg);margin:0;letter-spacing:.02em}
.readout{margin-top:16px;font:11px ui-monospace,Menlo,monospace;color:var(--muted);text-align:center}
#mode{color:var(--accent)}
js
const w = document.getElementById('w');
const mode = document.getElementById('mode');
let on = true;
function apply(){
  w.style.fontVariantCaps = on ? 'small-caps' : 'normal';
  mode.textContent = 'font-variant-caps: ' + (on ? 'small-caps' : 'normal');
  on = !on;
}
apply();
setInterval(apply, 1700);

Shrinking capitals with CSS `transform: scale()` thins the strokes along with the size, making them look lighter than the surrounding text. True small caps are glyphs a type designer drew separately, so their stroke weight matches the lowercase around them.

`font-variant-caps: small-caps` uses a font's dedicated small-caps glyphs when available, and synthesizes an approximation otherwise. `all-small-caps` extends this to letters that were already capitals.

Traditionally used for acronyms (NASA, HTML) or to subtly emphasize an opening word — distinct from the surrounding text, but without the visual shout of full capitals.

When to use

Acronyms, a chapter's opening word, byline names — subtle emphasis. Setting an entire headline in small caps is usually too much.