larlet-fr-david-cache/cache/13cdde344f3505f6c7372746fae8a2cb/index.md

title: Use real small caps; avoid fakes
url: http://practicaltypography.com/small-caps.html
hash_url: 13cdde344f3505f6c7372746fae8a2cb

<p><first-use>Small caps</first-use> are short cap­i­tal let­ters de­signed to blend with low­er­case text. They’re usu­ally slightly taller than low­er­case <span class="no-hyphens">letters.</span></p><p>I’m a big fan of small caps. They’re a great al­ter­na­tive to <a href="http://practicaltypography.com/bold-or-italic.html" class="xref">bold or italic</a> or <a href="http://practicaltypography.com/all-caps.html" class="xref">all caps</a>.</p><p>But most peo­ple have never seen real small caps. They’ve only seen the er­satz small caps that word proces­sors and web browsers gen­er­ate when small-cap for­mat­ting is <span class="no-hyphens">used.</span></p><style type="text/css">


.fake-small-caps{
font-family: Equity;
}

.shrink {
font-size: 72%;
text-transform: uppercase;
}

.real-small-caps{
font-family: EquityCaps;
}
</style><table class="example"><tr><td style="font-size:190%"><example-text><span class="fake-small-caps"><span>W</span><span class="shrink"><span>itness</span></span><span> P</span><span class="shrink"><span>rotection</span></span></span></example-text></td><td><example-caption>fake</example-caption></td></tr><tr><td style="font-size:190%"><example-text><span class="real-small-caps"><span>Witness Protection</span></span></example-text></td><td><example-caption>real</example-caption></td></tr><tr><td style="font-size:190%"><example-text><div style="font-size:60%;font-family:equity-text"><span>Trixie Argon, </span><em><span>Ways to Be Wicked</span></em><span>, in</span><br /><span class="fake-small-caps"><span>C</span><span class="shrink"><span>onjuring</span></span><span> </span><span class="shrink"><span>for</span></span><span> B</span><span class="shrink"><span>eginners</span></span></span><span>, at 137–39</span><br /><span>(London, Quid Pro Books, 2004).</span></div></example-text></td><td><example-caption>fake</example-caption></td></tr><tr><td style="font-size:190%"><example-text><div style="font-size:60%;font-family:equity-text"><span>Trixie Argon, </span><em><span>Ways to Be Wicked</span></em><span>, in</span><br /><span class="real-small-caps"><span>Conjuring for Beginners</span></span><span>, at 137–39</span><br /><span>(London, Quid Pro Books, 2004).</span></div></example-text></td><td><example-caption>real</example-caption></td></tr></table><aside>Ty­pog­ra­phers use the word <em>color</em> to re­fer to how light or dark a text block ap­pears on a page (even if all the char­ac­ters are <span class="no-hyphens">black).</span></aside><p>Small-cap for­mat­ting works by scal­ing down reg­u­lar caps. But com­pared to the other char­ac­ters in the font, the fake small caps that re­sult are the wrong height, and their ver­ti­cal strokes are too light. Whereas with real small caps, the <a href="http://practicaltypography.com/color.html" class="xref">color</a> and height have been cal­i­brated to blend well with the nor­mal up­per­case and low­er­case <span class="no-hyphens">letters.</span></p><p>There­fore, two rules for small <span class="no-hyphens">caps:</span></p><ol><li><p>Don’t click on the small-cap for­mat­ting box in your word proces­sor. Ever. And don’t use the CSS prop­erty <code>font-vari­ant: small-caps</code>. Ever. These op­tions do not pro­duce small caps. They pro­duce in­fe­rior <span class="no-hyphens">counterfeits.</span></p></li><li><p>The rules for <a href="http://practicaltypography.com/all-caps.html" class="xref">all caps</a> also ap­ply to small caps: use small caps spar­ingly, add <a href="http://practicaltypography.com/letterspacing.html" class="xref">let­terspac­ing</a>, and turn on <a href="http://practicaltypography.com/kerning.html" class="xref">kern­ing</a>.</p></li></ol><p>Now for the bad news. If you want real small caps, you’ll have to buy them—they’re not in­cluded with any <a href="http://practicaltypography.com/system-fonts.html" class="xref">sys­tem font</a>.</p><p>Some­times, small caps come in their own font file that shows up sep­a­rately in the font menu. So when you want small caps, you for­mat the text with the small-cap font. Other times, small caps are in­cluded in the main font file as an <a href="http://practicaltypography.com/opentype-features.html" class="xref">Open­Type fea­ture</a> (named ‘smcp’). But ei­ther way, you can also use <a href="http://practicaltypography.com/paragraph-and-character-styles.html" class="xref">para­graph and char­ac­ter styles</a> to ap­ply small caps, and elim­i­nate the te­dium of find­ing <span class="no-hyphens">them.</span></p><div class="btw"><div class="btw-title">by the way</div><ul><li><p>With small caps, it’s your call whether to use reg­u­lar cap­i­tal let­ters at the be­gin­ning of cap­i­tal­ized words. I pre­fer not <span class="no-hyphens">to.</span></p></li><li><p>Both <a href="http://practicaltypography.com/equity.html" class="xref">Eq­uity</a> and <a href="http://practicaltypography.com/concourse.html" class="xref">Con­course</a> have sep­a­rate sets of small-caps fonts with the let­terspac­ing al­ready baked in. This saves la­bor. It also al­lows you to get prop­erly spaced small caps in any pro­gram, even those that don’t sup­port Open­Type fea­tures or let­terspac­ing. (In­clud­ing web browsers—see <a href="http://practicaltypography.com/letterspacing.html" class="xref">let­terspac­ing</a> for <span class="no-hyphens">more.)</span></p></li></ul></div>