소문자를 대문자 형태로 그리되, 일반 대문자보다 작고 획 굵기는 본문과 맞춘 글자. 그냥 대문자를 축소한 것과는 다릅니다.
디자인 아틀라스<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>.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)}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);대문자를 CSS `transform: scale()`로 줄이면 획도 같이 가늘어져서 본문보다 흐려 보입니다. 진짜 스몰캡스는 폰트 제작자가 별도로 그린 글리프라 획 굵기가 주변 소문자와 맞아떨어집니다.
CSS `font-variant-caps: small-caps`를 주면 브라우저가 폰트에 전용 스몰캡스 글리프가 있으면 그것을 쓰고, 없으면 합성(synthesize)해서 흉내 냅니다. `all-small-caps`은 원래 대문자였던 글자까지 포함해 전부 스몰캡스로 바꿉니다.
전통적으로 두문자어(NASA, HTML)나 시작 단어를 은근하게 강조할 때 씁니다 — 일반 대문자만큼 시선을 세게 끌지 않으면서도 구분은 됩니다.
두문자어, 챕터 시작 단어, 저자 이름 같은 은근한 강조에. 제목 전체를 스몰캡스로 바꾸는 건 과합니다.