Design Atlas
한국어
Aa Typography

Type scale

타입 스케일

A system that multiplies body text size by a fixed ratio (1.2, 1.25, 1.333…) to derive a consistent ladder of heading sizes.

Also known as: 모듈러 스케일Modular scale
···
html
<div class="stage" id="stage"></div>
css
#stage{display:grid;gap:4px;width:min(94%,500px)}
.step{display:flex;align-items:baseline;gap:12px;padding:4px 8px;border-radius:8px;transition:background .3s}
.step.active{background:color-mix(in srgb, var(--accent) 14%, transparent)}
.px{width:34px;flex:none;font:10px ui-monospace,Menlo,monospace;color:var(--muted);text-align:right}
.sample{color:var(--fg);font-weight:700;line-height:1.1;font-family:system-ui,-apple-system,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.step.active .sample{color:var(--accent)}
js
const base = 16, ratio = 1.25;
const steps = [3, 2, 1, 0, -1].map(function(n){ return Math.round(base * Math.pow(ratio, n)); });
const stage = document.getElementById('stage');
steps.forEach(function(px){
  const row = document.createElement('div');
  row.className = 'step';
  const pxSpan = document.createElement('span');
  pxSpan.className = 'px';
  pxSpan.textContent = px;
  const sample = document.createElement('span');
  sample.className = 'sample';
  sample.style.fontSize = px + 'px';
  sample.textContent = 'Aa 타입 스케일';
  row.appendChild(pxSpan);
  row.appendChild(sample);
  stage.appendChild(row);
});
const rows = [...stage.children];
let idx = 0;
setInterval(function(){
  rows.forEach(function(r){ r.classList.remove('active'); });
  rows[idx].classList.add('active');
  idx = (idx + 1) % rows.length;
}, 650);

Pick sizes by feel and you end up with inconsistent values like `14px, 18px, 22px, 30px`. A type scale instead raises a base size (usually 16px body text) to successive powers of a ratio, so every size — `16, 20, 25, 31, 39…` — comes from one rule.

Common ratios: Minor Third (1.2), Major Third (1.25), Perfect Fourth (1.333), Golden Ratio (1.618). A larger ratio makes headings and body text feel more dramatically different in size; a smaller one keeps the hierarchy tighter.

Combined with `clamp()`, the whole scale can grow and shrink smoothly with the viewport while preserving the ratio between steps (see "Fluid typography").

When to use

Set this up once when defining a design system's typography tokens — pick a single ratio and every size from h1 to caption follows without further debate.