Files

T

Antigravity Agent 504fd5fb42 [G1-Sync] Manual knowledge update

2026-05-10 22:08:15 +09:00

6.3 KiB

Raw Blame History

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack

title

유동적 타이포그래피(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

: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

/* 매 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)

.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

@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

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

// 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 의 결합

: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)

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

부모: CSS · Typography
변형: Responsive Design · Container Queries
응용: 유지보수 가능하고 확장 가능한 CSS 아키텍처 설계
Adjacent: Variable Fonts · Modular Scale · Utopia.fyi

🤖 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

6.3 KiB Raw Blame History Unescape Escape