2nd/10_Wiki/Topics/Frontend/유동적 타이포그래피(Fluid Typography).md

---
id: wiki-2026-0508-유동적-타이포그래피-fluid-typography
title: 유동적 타이포그래피(Fluid Typography)
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [Fluid Typography, Responsive Type, clamp() Typography, Variable Fonts]
duplicate_of: none
source_trust_level: A
confidence_score: 0.92
verification_status: applied
tags: [frontend, css, typography, responsive, clamp, variable-font]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: CSS
  framework: Web Platform
---

# 유동적 타이포그래피(Fluid Typography)

## 매 한 줄
> **"매 viewport 의 변화 에 매 부드럽게 scaling 하는 typography — 매 breakpoint 의 jump 의 없음, 매 `clamp(min, preferred, max)` 의 사용"**. 매 2017 Mike Riethmuller 의 "fluid typography" 제안 → 매 2020 `clamp()` baseline → 매 2026 매 `cqw` (container query unit) + variable font 의 결합 의 새로운 frontier.

## 매 핵심

### 매 핵심 함수 — `clamp()`
- `clamp(MIN, PREFERRED, MAX)` — 매 PREFERRED 의 MIN ≤ x ≤ MAX 의 clamp.
- 매 PREFERRED 의 매 viewport-relative unit (`vw`, `cqw`).
- 매 mobile 의 너무 작 X, 매 desktop 의 너무 크 X.

### 매 viewport units (2026)
- `vw` / `vh` — viewport width / height.
- `svw` / `svh` — small (mobile URL bar 의 visible).
- `lvw` / `lvh` — large (URL bar 의 hidden).
- `dvw` / `dvh` — dynamic (매 변동).
- `cqw` / `cqh` — container query (component-scoped).

### 매 Variable Font
- 매 single font file, 매 weight/width/italic 의 axis 의 interpolation.
- `font-variation-settings: "wght" 450, "wdth" 90`.
- 매 file size 의 절약 (매 9 weight × 2 italic 의 18 file → 1 file).

### 매 Modular Scale
- 매 1.125 (major second), 1.25 (major third), 1.333 (perfect fourth), 1.618 (golden).
- 매 base 16px × ratio^n.

## 💻 패턴

### Pattern 1: Basic clamp() typography
```css
:root {
  --step--1: clamp(0.83rem, 0.78rem + 0.24vw, 0.94rem);
  --step-0:  clamp(1.00rem, 0.93rem + 0.36vw, 1.13rem);
  --step-1:  clamp(1.20rem, 1.10rem + 0.51vw, 1.41rem);
  --step-2:  clamp(1.44rem, 1.30rem + 0.71vw, 1.76rem);
  --step-3:  clamp(1.73rem, 1.54rem + 0.96vw, 2.20rem);
  --step-4:  clamp(2.07rem, 1.81rem + 1.30vw, 2.75rem);
  --step-5:  clamp(2.49rem, 2.13rem + 1.78vw, 3.43rem);
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
p  { font-size: var(--step-0); }
```

### Pattern 2: Utopia.fyi formula
```css
/* 매 320px → 1240px 의 16px → 20px scale */
:root {
  --fluid-min: 16;
  --fluid-max: 20;
  --vw-min: 320;
  --vw-max: 1240;
  --slope: calc((var(--fluid-max) - var(--fluid-min)) / (var(--vw-max) - var(--vw-min)));
  --intercept: calc(var(--fluid-min) - var(--vw-min) * var(--slope));
  --fluid: clamp(
    var(--fluid-min) * 1px,
    var(--intercept) * 1px + 100vw * var(--slope),
    var(--fluid-max) * 1px
  );
}

body { font-size: var(--fluid); }
```

### Pattern 3: Container query units (2026)
```css
.card {
  container-type: inline-size;
}

.card h2 {
  /* 매 parent container 의 width 의 fluid */
  font-size: clamp(1.2rem, 1rem + 2cqw, 2rem);
}
```

### Pattern 4: Variable Font weight axis
```css
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
}

h1 {
  font-family: 'Inter';
  font-variation-settings: "wght" 800, "wdth" 105;
  /* 매 viewport 의 변화 의 weight 의 fluid */
  font-weight: clamp(700, 700 + 1vw, 900);
}
```

### Pattern 5: Line-height fluid
```css
h1 {
  font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
  line-height: clamp(1.1, 1.05 + 0.5vw, 1.3);
  letter-spacing: clamp(-0.02em, -0.04em + 0.1vw, 0em);
}
```

### Pattern 6: Modular scale generator
```ts
// build/scale.ts
function fluidScale(step: number, baseMin = 16, baseMax = 20, ratio = 1.25): string {
  const min = baseMin * Math.pow(ratio, step);
  const max = baseMax * Math.pow(ratio, step);
  const slope = (max - min) / (1240 - 320);
  const intercept = min - 320 * slope;
  return `clamp(${min/16}rem, ${intercept/16}rem + ${slope*100}vw, ${max/16}rem)`;
}

console.log(fluidScale(0));  // body
console.log(fluidScale(3));  // h2
```

### Pattern 7: prefers-contrast / dark mode 의 결합
```css
:root {
  --font-weight-body: 400;
}
@media (prefers-color-scheme: dark) {
  :root {
    --font-weight-body: 350; /* 매 dark mode 의 lighter weight */
  }
}
body {
  font-variation-settings: "wght" var(--font-weight-body);
}
```

### Pattern 8: Optical Sizing (variable font axis)
```css
h1 {
  font-size: clamp(2rem, 4vw, 4rem);
  /* 매 large size 의 자동 의 optical size 의 적용 */
  font-optical-sizing: auto;
}
```

## 매 결정 기준
| 상황 | Approach |
|---|---|
| Body text | `clamp()` with viewport units |
| Heading | Modular scale 의 step |
| Component-scoped | `cqw` units |
| Multi-axis font | Variable font + `font-variation-settings` |
| Generated scale | Utopia.fyi or build script |
| Dark mode | weight axis 의 reduce |
| Print | static `pt` units |

**기본값**: `clamp(min-rem, base + slope*vw, max-rem)` 의 modular scale (1.25 ratio), variable font 의 사용.

## 🔗 Graph
- 부모: [[Typography]]
- 변형: [[Responsive Design]] · [[컨테이너 쿼리 (Container Queries)|Container Queries]]
- 응용: [[유지보수 가능하고 확장 가능한 CSS 아키텍처 설계]]
- Adjacent: [[Variable Fonts]]

## 🤖 LLM 활용
**언제**: clamp() 의 slope/intercept 의 계산, modular scale 의 step 의 권고, viewport unit 의 vs cqw 의 선택.
**언제 X**: 매 type design 의 aesthetic 의 결정 — 매 typographer 의 영역.

## ❌ 안티패턴
- **`vw` 만 의 사용**: 매 mobile 의 너무 작음, 매 desktop 의 너무 큼.
- **Breakpoint 의 jump**: 매 fluid 의 본질 의 위반.
- **`px` 의 hardcode**: 매 user font-size preference 의 위반.
- **너무 많은 weight 의 ship**: 매 variable font 의 사용 의 X.
- **`clamp()` 의 unit mix**: 매 `clamp(1rem, 16px, 2rem)` 의 inconsistent.

## 🧪 검증 / 중복
- Verified (Mike Riethmuller "Precise Control Over Responsive Typography" 2017, Utopia.fyi, MDN clamp() / variable fonts 2026).
- 신뢰도 A.

## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — clamp() formula, Utopia, container query units, variable fonts |