docs(10_Wiki): Topic_Business/General/Graphic/Programming을 Topics/ 하위로 이동
최상위 10_Wiki/Topic_*였던 4개 카테고리 폴더를 10_Wiki/Topics/Topic_* 로 재배치. 콘텐츠 변경 없음(순수 폴더 이동) — Topics/ 하위 나머지 폴더는 이미 지난 커밋에서 전부 정리된 상태(잔존 항목은 에이전트 운영 상태 및 사용자가 보존을 요청한 업데이트0615/무제 3.canvas 뿐).
This commit is contained in:
Antigravity Agent
@@ -0,0 +1,203 @@
|
||||
---
|
||||
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 |
|
||||
Reference in New Issue
Block a user