Design Atlas
한국어
Aa Typography

Fluid typography

플루이드 타이포그래피

Instead of jumping font size at fixed breakpoints, scaling it continuously and smoothly in proportion to the viewport or container.

Also known as: 가변형 폰트 크기Responsive type scale
···
html
<div class="stage">
  <div class="box" id="box">
    <h2 id="h">Fluid Type</h2>
  </div>
  <div class="readout">container <span id="w">0</span>px · font-size <span id="fs">0</span>px</div>
</div>
css
.box{width:26%;min-width:60px;container-type:inline-size;border:1px dashed var(--line);border-radius:12px;padding:10px 6px;display:grid;place-items:center;animation:resize 4.5s ease-in-out infinite}
h2{margin:0;font-size:clamp(13px, 22cqw, 44px);font-weight:800;line-height:1.1;font-family:system-ui,-apple-system,sans-serif;color:var(--fg);text-align:center;white-space:nowrap}
@keyframes resize{0%,100%{width:22%}50%{width:88%}}
.readout{margin-top:14px;font:11px ui-monospace,Menlo,monospace;color:var(--muted)}
js
const box = document.getElementById('box');
const h = document.getElementById('h');
const wEl = document.getElementById('w');
const fsEl = document.getElementById('fs');
function tick(){
  wEl.textContent = Math.round(box.getBoundingClientRect().width);
  fsEl.textContent = Math.round(parseFloat(getComputedStyle(h).fontSize));
  requestAnimationFrame(tick);
}
tick();

`font-size: clamp(min, preferred, max)` is the core tool. Mix a relative unit like `vw` (1% of viewport width) into the preferred value, and size grows as the screen widens — until it hits the max — and shrinks as it narrows, until it hits the min. No media query breakpoints; it's continuous in between.

`vw` is viewport-relative, which is wrong for text that should respond to its container instead — a sidebar, say. Give the parent `container-type: inline-size` and use `cqw` (1% of the container's width) instead, and the text scales with that specific container rather than the whole viewport. This demo uses `cqw`.

Too wide a `clamp()` range can make text uncomfortably small on tiny screens, or push line length (measure) too wide on huge ones — worth actually testing the min and max in practice rather than guessing.

When to use

Hero headlines, card titles — anywhere size needs to transition smoothly across a range of screen or container widths.