Design Atlas
한국어
Aa Typography

Optical size

옵티컬 사이즈

Drawing the same typeface heavier and wider at small sizes, and thinner and tighter at large display sizes.

Also known as: 광학 크기 보정Optical scaling
···
html
<div class="stage">
  <div class="row active" id="r1"><span class="txt small">Optical Size</span><span class="lbl">텍스트용 · 굵고 촘촘하게 보정</span></div>
  <div class="row" id="r2"><span class="txt large">Optical Size</span><span class="lbl">디스플레이용 · 가늘고 넓게</span></div>
</div>
css
.stage{display:grid;gap:10px;width:min(94%,420px)}
.row{display:grid;gap:4px;padding:10px 14px;border-radius:10px;transition:background .4s}
.row.active{background:color-mix(in srgb, var(--accent) 12%, transparent)}
.txt{color:var(--fg);font-family:Georgia,'Times New Roman',serif;display:block}
.txt.small{font-size:16px;font-weight:700;letter-spacing:.01em}
.txt.large{font-size:clamp(26px,7vmin,40px);font-weight:300;letter-spacing:-.01em}
.lbl{font:10px ui-monospace,Menlo,monospace;color:var(--muted)}
js
const r1 = document.getElementById('r1');
const r2 = document.getElementById('r2');
let flip = false;
setInterval(function(){
  flip = !flip;
  r1.classList.toggle('active', !flip);
  r2.classList.toggle('active', flip);
}, 1700);

Simply scaling a letterform up or down makes thin strokes blur into mush at small sizes, and look needlessly heavy at large ones. Metal type foundries once cut separate sizes to solve this — optical size revives that practice digitally.

Variable fonts implement it as an `opsz` axis. Where a font supports it, changing `font-size` lets the browser automatically adjust weight, spacing, and x-height alongside it: text sizes get lower stroke contrast and more room to breathe, display sizes get higher contrast and tighter spacing.

This site can't load an external font, so instead of a real `opsz` axis, the demo hand-tunes weight and letter-spacing differently at text vs. display size to mimic the same principle.

When to use

If a variable font supports the opsz axis, changing font-size alone triggers the correction automatically. Without that support, manually nudge large headlines slightly lighter and small body text slightly heavier.