Design Atlas
한국어
Aa Typography

Variable font

가변 폰트

A font format that interpolates axes — weight, width, slant — continuously from a single file, instead of shipping separate Regular and Bold files.

Also known as: Variable FontOpenType Font Variations
···
html
<div class="stage">
  <span class="word" id="w">Variable</span>
  <div class="readout">wght <span id="wght">400</span> (font-weight 보간 근사)</div>
</div>
css
.word{font:14vmin/1.1 system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--fg);display:block;text-align:center;font-variation-settings:"wght" 400}
.readout{margin-top:16px;font:12px ui-monospace,Menlo,monospace;color:var(--muted);text-align:center}
#wght{color:var(--accent);font-weight:700}
js
const w = document.getElementById('w');
const label = document.getElementById('wght');
const start = performance.now();
function loop(now){
  const t = (now - start) / 2400;
  const wght = Math.round(400 + Math.sin(t) * 300);
  w.style.fontWeight = wght;
  w.style.fontVariationSettings = '"wght" ' + wght;
  label.textContent = wght;
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);

Previously, each weight (Light, Regular, Bold…) meant a separate font file. A variable font instead ships one file with master outlines at the extremes of a "weight axis" (wght) and interpolates any value between them in real time. In CSS, `font-variation-settings: "wght" 650` accepts any number, and `font-weight: 650` works too.

Beyond weight, fonts can expose width (wdth), slant (slnt), optical size (opsz — see "Optical size"), and custom axes. Animating an axis on scroll or hover gives otherwise-static text a sense of expression.

One file replacing several weight files also cuts total download size. Not every font ships as variable, though, and axis names and ranges differ per font — check what a specific font actually supports before relying on it.

This demo can't load an external font, so it approximates the idea by interpolating the system font's `font-weight` alone — real variable fonts interpolate more smoothly across more axes.

When to use

Use to smoothly tie heading weight to scroll or hover, or on multilingual sites where downloading several separate weight files is costly.