# typography — 폰트를 고르고 싣는 법

3단계에서 폰트를 정할 때, 4-1에서 적용할 때 읽는다.

**타입 스케일과 간격은 `tokens.md` 가 다룬다.** 이 문서는 **어떤 글자를 쓰고 그것을 어떻게 화면에 올리는가**만 다룬다.

## 이 문서를 읽는 법

| 상황 | 읽을 곳 |
|---|---|
| 폰트를 아직 안 골랐다 | §1 선택 절차. 대부분 여기서 끝난다 |
| 웨이트를 두 개 이상 쓴다 | §2 가변 폰트 |
| 로딩이 느리거나 글자가 늦게 뜬다 | §3 로딩 |
| 폰트 로드 전후로 레이아웃이 흔들린다 | §4 폴백 메트릭. **가장 자주 빠뜨리는 곳이다** |
| 숫자가 흔들리거나 자간이 이상하다 | §5 OpenType |
| 한글이 들어간다 | §6. 조판 규칙 자체는 `antipatterns.md` §8 |
| 배포 전 | §7 라이선스, §8 체크리스트 |
| 헤딩 크기·자간·행간을 어떻게 조정할지 원칙이 필요하다 | §9 |
| 폰트 기능(`font-synthesis`, OpenType, 동적 숫자)을 더 쓰고 싶다 | §10 |
| 줄바꿈·위도우·justify 문제가 있다 | §11 |
| 밑줄이나 `text-box` 트림이 필요하다 | §12 |
| 텍스트가 잘려서 전체 값을 볼 수 없다 | §13. **하드 게이트** |
| 폰트 스무딩·선택 가능성·장식 텍스트 디테일이 필요하다 | §14 |
| 배포 직전 타이포 전용 빠른 점검이 필요하다 | §15 |

---

## 1. 고르는 절차

### 1-1. 먼저 개수를 정한다

디스플레이 하나와 본문 하나, 필요할 때 모노 하나는 관리하기 쉬운 시작점이다. 추가 패밀리는 언어 범위·역할·전송량·라이선스와 실제 위계 효과를 근거로 제한한다. 가변 폰트가 정적 파일보다 항상 작거나 모든 필요한 축을 제공하는 것은 아니므로 실제 subset과 로딩 결과를 비교한다.

### 1-2. 성격을 브리프에서 끌어낸다

폰트를 고르기 전에 **한 줄로 답한다**: 이 글자는 무엇처럼 보여야 하는가.

| 브리프가 요구하는 것 | 글자에서 찾을 성질 |
|---|---|
| 정확함, 계기, 데이터 | 좁은 폭, 낮은 대비, 열린 카운터, 모노와 잘 붙는 것 |
| 편집, 읽는 시간, 권위 | 세리프 또는 고대비 산세, 넉넉한 x-height |
| 도구, 중립, 신뢰 | 그로테스크. 성격은 웨이트와 여백이 만든다 |
| 인상, 기억 | 디스플레이 전용 서체를 우선 검토한다. 본문 사용은 긴 읽기·언어 범위·확대 상태에서 검증한 경우에만 채택한다 |

### 1-3. 후보를 실제 값으로 검증한다

이름과 인상으로 고르지 마라. 다음 넷을 본다.

실제 proof에는 패밀리, 계산된 크기, 행간, 본문 폭을 따로 기록한다. 같은 CSS px도 글꼴의 x-height·획·글자틀에 따라 같은 광학 크기로 보이지 않는다. 선호와 읽기 성능도 같은 값이 아니므로 [Wallace et al.](./visual-perception-research.md#wallace-et-al-2022)의 조건처럼 실제 독자·문자 체계·과업에서 분리해 확인한다.

- **x-height 비율** — 소문자 높이와 본문 크기의 관계. 단일 임계값으로 가독성을 판정하지 말고 실제 크기·언어·렌더링에서 확인한다
- **대비** — 획 굵기 차이. 큰 크기에서만 살아나는 폰트가 있다
- **웨이트 범위** — 필요한 웨이트가 실제로 있는가. 없는 웨이트를 브라우저가 합성하면 뭉개진다
- **숫자 형태** — 라이닝인가 올드스타일인가, tabular 가 있는가

브라우저에서 재는 법:

```js
// 미로딩 매칭 폰트를 사용해야 하는지 점검한다
document.fonts.check('16px "Pretendard Variable"', '가나다ABC0123');
[...document.fonts].map(f => `${f.family} ${f.weight} ${f.status}`);
```

`true`는 특정 폰트의 존재·실제 사용·개별 글리프 지원을 보증하지 않는다. [MDN `FontFaceSet.check()`](https://developer.mozilla.org/en-US/docs/Web/API/FontFaceSet/check)을 2026-09-20에 확인했다. 화면에 필요한 문자·언어·숫자·기호와 웨이트를 실제 카피로 확인하고, 가능한 브라우저의 rendered-font 확인 또는 필요한 글리프 검증과 실렌더 관찰을 결합한다. heading·line box 밖 rect만으로 글리프 잘림을 확정하지 않는 절차와 artifact 조건은 [audit-gate.md](audit-gate.md)의 렌더 측정 계약을 따른다.

### 1-4. 기본값을 피한다

`Inter` 는 금지가 아니라 **기본값 금지**다. 다국어 UI나 초고밀도 대시보드처럼 이유가 있으면 쓴다. 이유 없이 쓰면 그건 고른 게 아니다.

같은 이유로 `Fraunces` 와 `Instrument Serif` 도 기본 선택에서 뺀다. 생성 도구가 가장 자주 뱉는 두 서체다.

> **못 대면 기본값이다.** "왜 이 폰트인가"에 한 문장으로 답하지 못하면 아직 고른 것이 아니다.

---

## 2. 가변 폰트

여러 웨이트가 필요하면 가변 폰트를 후보로 둔다. 필요한 glyph·축·subset·캐시 조건에 따라 정적 파일 묶음이 더 작거나 호환성이 나을 수 있으므로 전송량과 실제 렌더를 비교한다.

### 축

| 축 | 뜻 | 쓸 곳 |
|---|---|---|
| `wght` | 굵기 | 위계. 가장 많이 쓴다 |
| `opsz` | 광학 크기 | 큰 글자와 작은 글자의 획 대비를 자동 조정 |
| `wdth` | 폭 | 좁은 컬럼, 긴 제목 |
| `slnt` / `ital` | 기울기 | 강조 |

### 쓰는 법

```css
/* 표준 속성을 쓴다. font-variation-settings 는 마지막 수단이다 */
h1 { font-weight: 640; }          /* 100 단위가 아니어도 된다 */
.lead { font-weight: 450; }

/* opsz 가 있으면 자동 적용된다. 끄지 마라 */
h1 { font-optical-sizing: auto; }

/* 표준 속성으로 못 여는 축만 이걸로 */
.wide { font-variation-settings: "wdth" 112; }
```

**`font-variation-settings` 로 `wght` 를 지정하지 마라.** 상속이 끊기고 `font-weight` 와 충돌한다.

### 애니메이션

가변 축 애니메이션은 레이아웃 계산 비용을 만들 수 있다. 자동 금지가 아니라, 3단계의 성능 예산 안에서 비용·입력 간섭·감소 모션 경로·상태 피드백을 실제 기기와 브라우저에서 측정해 채택한다. 글자 굵기 변화가 필요하지만 그 조건을 충족하지 못하면 `opacity`로 두 겹을 교차시키는 대안을 검토한다.

---

## 3. 로딩

### 3-1. `font-display` 를 고른다

| 값 | 동작 | 언제 |
|---|---|---|
| `swap` | 즉시 폴백, 로드되면 교체 | **본문 기본값.** 글자가 먼저 읽힌다 |
| `optional` | 아주 짧게 기다리고, 늦으면 이번 방문은 폴백으로 끝 | CLS 를 0으로 만들고 싶을 때. 첫 방문에 브랜드 서체가 안 보일 수 있다 |
| `fallback` | 짧은 블록 + 짧은 교체 창 | 절충안 |
| `block` | 최대 3초 블록 | **아이콘 폰트 외에는 쓰지 마라** |

### 3-2. `preload` 는 조건부다

**첫 화면에 실제로 그려지는 폰트 파일만** preload 한다. 그 외에는 다른 자원의 대역을 뺏을 뿐이다.

```html
<!-- 본문 한 벌만. crossorigin 을 빠뜨리면 두 번 받는다 -->
<link rel="preload" as="font" type="font/woff2" crossorigin
      href="/fonts/body-var.woff2" />
```

모노는 보통 코드 블록에만 쓰이므로 preload 하지 않는다.

### 3-3. 서브셋

라틴은 `unicode-range` 로 쪼갠다. 브라우저가 **실제로 쓰인 범위만** 받는다.

```css
@font-face {
  font-family: "Body";
  src: url("/fonts/body-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2000-206F, U+2190-21BB;
  font-display: swap;
}
```

**한글은 §6 을 보라.** 범위가 아니라 글자 단위로 쪼개야 한다.

### 3-4. 셀프 호스팅 vs CDN

| | 장점 | 대가 |
|---|---|---|
| 셀프 호스팅 | 요청 도메인 하나, 캐시 통제, 서드파티 장애 무관 | 업데이트를 직접 한다 |
| CDN | 설치가 한 줄 | 도메인이 늘고(각각 DNS+TLS), 그 서비스가 죽으면 글자가 죽는다 |

CDN을 쓸 때 `preconnect`는 실제 첫 화면 요청·연결 비용을 측정한 뒤 선택한다. 도메인 수만으로 결함을 판정하지 말고, 권한·캐시·장애 경로·전송 waterfall을 함께 검토한다.

---

## 4. 폴백 메트릭 — 가장 자주 빠뜨리는 곳

폰트가 늦게 오면 표시 전략에 따라 폴백과 웹폰트가 교체될 수 있다. 두 폰트의 행 높이·폭이 다르면 레이아웃 이동의 원인이 될 수 있지만, `swap`이 반드시 CLS를 만든다고 단정하지 않는다. 실제 네트워크 조건에서 측정한다.

해결은 **폴백 폰트를 실제 폰트의 치수에 맞추는 것**이다.

```css
/* 실제 폰트 */
@font-face {
  font-family: "Body";
  src: url("/fonts/body-var.woff2") format("woff2-variations");
  font-weight: 300 800;
  font-display: swap;
}

/* 같은 치수로 보정한 폴백. 이름을 따로 준다 */
@font-face {
  font-family: "Body Fallback";
  src: local("Arial");
  size-adjust: 107%;          /* 글자 크기를 맞춘다 */
  ascent-override: 92%;       /* 행 위 여백 */
  descent-override: 24%;      /* 행 아래 여백 */
  line-gap-override: 0%;
}

body {
  font-family: "Body", "Body Fallback", sans-serif;
}
```

**숫자는 폰트마다 다르다.** 재는 방법:

```js
// 두 폰트로 같은 문자열을 그려 폭을 비교한다. 비율이 size-adjust 값이다
const measure = (family) => {
  const el = document.createElement("span");
  el.style.cssText = `position:absolute;visibility:hidden;font:100px ${family};white-space:nowrap`;
  el.textContent = "가나다ABCabc0123";
  document.body.appendChild(el);
  const w = el.getBoundingClientRect().width;
  el.remove();
  return w;
};
(measure("Arial") / measure('"Pretendard Variable"') * 100).toFixed(1) + "%";
```

`ascent-override` / `descent-override` 는 실제 폰트의 `hhea` 또는 `OS/2` 값을 `unitsPerEm` 으로 나눈 백분율이다. 도구가 없으면 **행 높이가 눈에 띄게 튀지 않을 때까지 조정**하고 그 값을 `design.md` 에 적어라.

> `font-display: optional`은 교체 가능성을 줄이는 한 선택지다. 폴백 메트릭 보정, 표시 전략, preload 여부는 실제 첫 방문·재방문·느린 망에서 조합해 검증한다.

---

## 5. OpenType 기능

### 숫자

```css
/* 표에 들어가는 수치. 자리가 흔들리지 않는다 */
.nums { font-variant-numeric: tabular-nums; }

/* 본문 속 숫자. 소문자 높이에 맞는다 */
.prose { font-variant-numeric: oldstyle-nums; }

/* 분수, 서수 */
.frac { font-variant-numeric: diagonal-fractions ordinal; }
```

**수치를 나열하는 곳에 `tabular-nums` 가 없으면 숫자가 춤춘다.** 대시보드·가격표·측정값 전부 해당한다.

### 그 외

```css
/* 커닝과 리가처는 기본으로 켜져 있다. 끄지 마라 */
body { font-kerning: normal; }

/* 대문자 사이 여백 보정. 전부 대문자인 짧은 라벨에만 */
.caps { font-variant-caps: all-small-caps; letter-spacing: 0.06em; }

/* 폰트가 제공하는 대체 글자. 무엇이 있는지 확인하고 쓴다 */
.alt { font-feature-settings: "ss01" 1; }
```

`font-variant-*` 표준 속성이 있으면 그걸 쓴다. `font-feature-settings` 는 표준 속성이 없는 기능에만 쓴다 — 한 번 쓰면 다른 기본 기능이 꺼지기 때문이다.

---

## 6. 한글

조판 규칙(줄바꿈·행간·자간·한 줄 길이)은 **`antipatterns.md` §8 이 정본**이다. 여기서는 **폰트 자체**만 다룬다.

### 6-1. 서브셋은 선택이 아니다

한글 완성형은 11,172자다. 전체 폰트가 클 수 있으므로 subset 전략을 검토한다. 모든 프로젝트가 글자 빈도 기반의 동적 subset을 반드시 써야 하는 것은 아니며, 콘텐츠 범위·cache·운영 복잡도와 실제 전송량으로 결정한다.

**쪼개는 단위가 라틴과 다르다.** 라틴은 `unicode-range` 로 블록을 나누면 되지만, 한글은 자주 쓰는 글자가 블록에 흩어져 있다. 그래서 **글자 빈도로 나눈 수십 개 조각**을 만들고 각각에 `unicode-range` 를 건다. 브라우저가 페이지에 실제로 쓰인 조각만 받는다.

이 방식을 **동적 서브셋**이라 부른다. Pretendard 의 `dynamic-subset` 빌드가 그것이고, 파일이 수십 개로 보이는 이유다.

> **파일 개수로 폰트 예산을 세지 마라.** 한글 웹폰트가 파일 40개인 것은 정상이고 올바른 최적화다. 세야 할 것은 **패밀리 수와 실제 전송량**이다(`tokens.md` §5).

### 6-2. 웨이트가 라틴과 다르게 보인다

같은 700 이라도 한글은 획이 많아 더 무겁게 보인다. **라틴 기준으로 고른 웨이트를 한글에 그대로 쓰면 본문이 답답해진다.** 한글 본문은 400~500, 제목은 600~700 정도에서 시작해 눈으로 맞춘다.

한글 폰트에는 x-height 개념이 없다. 대신 **글자틀 대비 속공간**을 본다. 속공간이 좁은 서체는 작은 크기에서 막힌다.

### 6-3. 라틴과 섞을 때 순서

```css
/* 라틴 폰트를 앞에, 한글 폰트를 뒤에 둔다.
   순서를 바꾸면 숫자와 영문까지 한글 폰트로 그려져 조악해진다 */
font-family: "Switzer", "Pretendard Variable", system-ui, sans-serif;
```

두 폰트의 크기감이 다르면 `size-adjust` 를 쓴 별도 `@font-face` 로 맞춘다. §4 와 같은 기법이다.

### 6-4. 한글 폰트를 지정하지 않는 것

그 자체가 완성도 미달 신호다. 지정하지 않으면 맑은 고딕이나 애플 SD 산돌고딕으로 떨어지고, 그 둘은 서로 크게 달라서 **화면마다 다른 디자인이 된다.**

---

### 세로쓰기에 가로쓰기 자간을 그대로 쓰지 마라

`writing-mode: vertical-rl` 로 세운 글자에 라벨용 자간(`letter-spacing: 0.14em`)을
그대로 물리면 **글자 사이 세로 간격**이 되어 낱글자가 흩어진다.

한글은 자소가 모여 한 글자를 이루기 때문에 라틴보다 심하다 —
"플로럴 스튜디오" 가 낱글자 일곱 개로 읽히기 시작한다.

```css
.vertical {
  writing-mode: vertical-rl;
  letter-spacing: 0.02em;   /* 가로쓰기 라벨의 0.14em 을 그대로 쓰면 안 된다 */
}
```

세로쓰기는 **자간이 아니라 `line-height` 로 숨을 만든다.** 세로쓰기에서 `line-height` 는
글자 사이가 아니라 **줄(세로 기둥) 사이**를 벌린다.

> 좁은 화면에서는 세로 글자가 자리를 못 얻는다. `writing-mode: horizontal-tb` 로 눕히되,
> **그 자리의 그리드 칼럼도 같이 손봐라** — 가로로 누운 긴 문장이 `auto` 칸을 통째로 먹는다.

---

## 7. 라이선스

**배포 전에 확인한다.** 폰트 라이선스 위반은 조용히 있다가 청구서로 온다.

| 확인할 것 | 왜 |
|---|---|
| **웹폰트 임베딩이 허용되는가** | 데스크톱 설치는 되는데 웹 임베딩은 금지인 폰트가 많다 |
| 페이지뷰 상한이 있는가 | 상업 폰트에 흔하다 |
| 도메인이 묶여 있는가 | 스테이징·프리뷰 도메인이 빠질 수 있다 |
| 수정·서브셋이 허용되는가 | 서브셋도 파생물이다 |
| 크레딧이 필요한가 | CC-BY 계열 |

**한국 무료 폰트의 함정**: "상업적 이용 무료"가 곧 "웹폰트 임베딩 무료"는 아니다. 눈누(noonnu.cc)는 허용 범위를 표로 보여주니 **웹폰트 항목을 직접 확인**해라. SIL OFL 은 임베딩·수정·재배포가 모두 허용되지만 **폰트 자체를 판매할 수 없고**, 개명 조항이 있는 경우가 있다.

확인 결과를 `design.md` 에 한 줄로 남긴다: `본문 Pretendard(SIL OFL, 웹 임베딩 가능) / 디스플레이 ___`.

---

## 8. 배포 전 체크리스트

- [ ] 폰트 패밀리 수와 실제 첫 화면 전송량이 프로젝트 예산 안이다(`tokens.md` §5)
- [ ] **"왜 이 폰트인가"에 한 문장으로 답할 수 있다**
- [ ] 필요한 웨이트의 가변/정적 후보를 실제 subset 전송량·지원 범위로 비교했다
- [ ] 없는 웨이트를 브라우저가 합성하고 있지 않다(`font-synthesis-weight: none` 으로 확인)
- [ ] `font-display` 를 의식적으로 골랐다
- [ ] preload 한 파일이 첫 화면에 실제로 쓰인다. `crossorigin` 이 있다
- [ ] 실제 첫 방문·재방문·느린 망에서 폴백 메트릭과 `font-display` 선택이 의도한 줄바꿈·레이아웃을 유지한다
- [ ] 수치를 나열하는 곳에 `tabular-nums` 가 있다
- [ ] 한글이 있으면 서브셋을 쓴다. 파일 개수가 아니라 전송량으로 쟀다
- [ ] 라틴 폰트가 폴백 스택 앞에 있다
- [ ] 한글 폰트를 명시했다
- [ ] 웹폰트 임베딩 라이선스를 확인하고 `design.md` 에 적었다
- [ ] 폰트를 못 받은 상태로 페이지를 열어봤다. 그 상태로도 읽힌다

> 근거: research/references/03-trends-2026.md §7, 04-ai-slop-signatures.md §8 (조사일 2026-08-20)

---

## 9. 위계와 자간·행간 보강

### 9-1. 자간·행간은 크기의 함수다 — 통합 원칙

이 문서와 `tokens.md`에 이미 흩어져 있는 개별 규칙은 하나의 원리를 공유한다. **글자가 커질수록 자간은 좁아지고 행간은 타이트해지며, 글자가 작아질수록 자간은 넓어지고 행간은 느슨해진다.** 큰 디스플레이 텍스트에서 음수 자간을 후보로 두는 이유([tokens.md](tokens.md) §1 "함께 정해야 하는 것")도, 작은 대문자 라벨에 양의 자간을 주는 이유(§5의 `all-small-caps` 예시)도, 헤딩 행간을 좁히고(1.1~1.2대) 본문 행간을 넓히는(1.5~1.6, 한글 1.6~1.8, [tokens.md](tokens.md) §1) 이유도 같은 함수의 다른 지점일 뿐이다.

이 절은 **새 강제 수치를 만들지 않는다.** `tokens.md`·`antipatterns.md` §2가 이미 정한 값과 "보편 하한을 선언하지 않는다"는 방향은 그대로 유지한다. 여기서 더하는 것은 흩어진 개별 사례를 하나의 원리로 묶어 읽는 프레임뿐이다 [SKILL-BETTER-TYPE].

### 9-2. 타입을 능동적 디자인 요소로 쓰기 — 관찰 후보

**언제**: 헤드라인이나 숫자 자체가 화면의 시각적 주인공일 때(히어로 숫자, 잡지형 표지, 데이터 하나를 강조하는 카드).

이런 자리에서는 타입 처리 자체가 콘텐츠를 담기만 하는 중립적 그릇이 아니라 디자인의 능동적인 부분이 될 수 있다[SKILL-FRONTEND-DESIGN]. 예: 큰 사이즈, 의도적 절단(뷰포트 경계 밖으로 흘러나가는 글자), 겹침, 회전, 색 분리 같은 처리는 타이포그래피가 "읽히는" 것을 넘어 그 자체로 이미지가 되게 한다 — 이 나열 자체는 출처 없음(designpaca 확장)이다. **관찰 후보**다 — 본문·UI 라벨·폼처럼 기능이 우선인 텍스트에는 적용하지 않는다. 가독성이 과업에 실제로 필요한 자리(§13의 하드 게이트가 도는 자리)에서는 장식이 접근을 이기지 않는다.

### 9-3. Display와 Text는 다른 폰트다

"Display"라는 이름이 큰 사이즈용 최적화를 보장하지 않는다. 반대도 마찬가지다. SF Pro, Heldane 같은 일부 패밀리는 **큰 사이즈용 Display 변형과 작은 사이즈용 Text 변형을 별도 파일로 낸다** — Text 변형은 작은 크기에서도 읽히도록 획이 굵고 속공간이 넓게 그려지고, Display 변형은 큰 크기에서만 의도가 살도록 더 섬세하게 그려진다 [SKILL-BETTER-TYPE]. 가변 폰트라면 `font-optical-sizing: auto`(§2)가 이 전환을 자동으로 처리하지만, Display/Text가 별도 정적 파일로만 나오는 패밀리는 **설정하는 크기에 맞는 변형을 직접 골라야 한다.** 헤딩에 Display 파일을, 본문에 Text 파일을 매핑하지 않으면 한쪽에서 항상 맞지 않는 파일을 쓰게 된다.

### 9-4. 헤딩 위계 — 내림차순과, 본문보다 작아지지 않는 하한 (프로젝트 계약)

**프로젝트 계약**이다. 타입 스케일을 정했다면(`tokens.md` §1) 그 스케일에 헤딩 레벨을 매핑하는 기본 규칙이지, 위계가 "실제로 읽힌다"는 것을 증명하는 검사 자체는 아니다. 위계가 실제로 구별되는지는 `tokens.md` "제목 역할이 실제로 구분되는지 확인한다" 절의 실측 방법(여러 폭에서 계산된 크기를 재는 것)을 그대로 따른다 — 단일 비율 하나로 위계를 증명할 수 있다는 태도는 [design-foundations.md](design-foundations.md) §1이 이미 잘못된 일반화로 지목했다.

규칙은 두 가지다 [SKILL-BETTER-TYPE].

1. **헤딩 레벨은 타입 스케일의 내림차순 단계에 매핑한다.** h1이 h2보다, h2가 h3보다 시각적으로 작아서는 안 된다. 스케일 단계가 부족해 인접 레벨이 같은 크기를 공유해야 하면, 굵기나 자간으로 구별을 유지한다.
2. **헤딩은 본문보다 작아지지 않는다.** 예외는 의도적으로 라벨형 오버라인(예: "CASE STUDY"처럼 본문 위에 놓이는 작은 대문자 태그)으로 쓸 때뿐이다. 어떤 시맨틱 요소를 쓸지는 [accessibility.md](accessibility.md) 소관이고, 이 규칙은 고른 요소의 시각적 크기만 다룬다 — `<h3>`를 골랐다고 브라우저 기본 크기를 그대로 두지 않는다.

---

## 10. 폰트 렌더링 제어 보강

### 10-1. font-synthesis — shorthand 대신 longhand

`font-synthesis: none`은 굵기·기울임·small-caps·상하첨자 **합성을 한 번에 다 끈다.** 폴백 스택 전체에서 필수 강조(굵게, 기울임)가 실제 글리프로 구별되는지 검증하기 전에 이 shorthand를 쓰면, 폴백으로 떨어졌을 때 강조가 조용히 사라진다 — 오류도 보고도 없이.

**한 모드만 끄고 싶으면 shorthand 대신 개별 속성을 쓴다** [SKILL-BETTER-TYPE].

```css
/* 브랜드 워드마크처럼 합성된 굵기가 눈에 띄게 다를 때만, 검증 후 좁게 적용 */
.brand-wordmark {
  font-synthesis-weight: none;
}

/* shorthand는 폴백 전체의 강조 표현을 확인한 뒤에만 */
.isolated-treatment {
  font-synthesis: none;
}
```

### 10-2. OpenType 확장 기능

§5가 이미 다루는 `tabular-nums`·`oldstyle-nums`·`diagonal-fractions`·`ordinal`·`all-small-caps`·`ss01` 외에, 자주 쓰는 나머지 기능이다 [SKILL-BETTER-TYPE].

```css
/* 0과 O를 구별해야 하는 곳 — 일련번호, 인증코드, 주문번호 */
.serial { font-variant-numeric: slashed-zero; }

/* 리가처(fi, fl 합자 등)를 명시적으로 켠다. 대부분 기본 켜짐이지만 폰트가 다르면 확인한다 */
.prose { font-variant-ligatures: common-ligatures; }

/* 위·아래 첨자. 폰트가 실제 첨자 글리프를 담고 있어야 한다 — 없으면 인위적 축소로 대체된다 */
.formula-sup { font-variant-position: super; }  /* x² 의 2 */
.formula-sub { font-variant-position: sub; }    /* H₂O 의 2 */

/* 문자 변형(character variant). 슬롯 번호의 의미는 폰트마다 다르다 */
.logo { font-feature-settings: "cv11" 1; }
```

`ss01`~`ss20`(스타일 세트), `cv01`~`cv99`(문자 변형)는 번호가 폰트마다 다른 의미를 가지므로 쓰기 전에 그 폰트의 OpenType 기능 문서를 확인한다. 표준 속성(`font-variant-*`)이 있는 기능은 그것을 먼저 쓴다 — `font-feature-settings`는 표준 속성이 없는 기능에만 쓰는 마지막 수단이라는 §5의 원칙은 여기서도 그대로다.

### 10-3. 숫자가 흔들리면 안 되는 곳 — tabular-nums 확장

§5는 이미 "수치를 나열하는 곳"(표·대시보드·가격표)에 `tabular-nums`를 요구한다. 같은 이유가 **값이 실시간으로 바뀌는 자리**에도 그대로 적용된다 — 타이머, 카운트다운, 실시간 가격, 진행률 퍼센트처럼 숫자가 갱신될 때마다 폭이 바뀌면 주변 레이아웃이 갱신마다 흔들린다 [SKILL-BETTER-TYPE].

```css
/* 정적인 표뿐 아니라, 매초 값이 바뀌는 타이머에도 같은 이유로 필요하다 */
.countdown-digit { font-variant-numeric: tabular-nums; }
```

---

## 11. 줄바꿈과 정렬

### 11-1. 자동 줄바꿈 선언 — text-wrap:balance / pretty

**지원 상태 (확인 2026-09-24)** [WEB-BASELINE].

| 선언 | 상태 | 지원 브라우저 |
|---|---|---|
| `text-wrap: balance` | Baseline **Newly available**(아직 Widely 아님) | Chrome/Chrome Android 114, Edge 114, Firefox/Firefox Android 121, Safari/Safari iOS 17.5 |
| `text-wrap: pretty` | Baseline **Limited**(Baseline 아님) — **Firefox 미구현** | Chrome/Chrome Android 117, Edge 117, Safari/Safari iOS 26 |

두 값 모두 미지원 브라우저에서는 기본 줄바꿈으로 조용히 저하된다(레이아웃이 깨지지 않는다) — **점진적 향상으로 쓴다.** Firefox 비중이 큰 프로젝트라면 `pretty`가 주요 엔진 셋 중 Firefox만 미지원이라는 점을 감안한다.

```css
/* 두 줄 헤딩이 한쪽으로 쏠리지 않게 폭을 맞춘다 */
h1, h2, h3 { text-wrap: balance; }

/* 설명 문단의 위도우를 줄인다. 장문에는 쓰지 않는다(아래 §11-2) */
.lead, .description { text-wrap: pretty; }
```

`balance`는 브라우저가 몇 줄을 넘으면 스스로 적용을 포기한다 — 헤딩·소제목처럼 짧은 텍스트에 쓴다. 장문 본문에는 `balance`도 `pretty`도 쓰지 않는다. 문단 전체를 고르게 만들려는 시도는 공간을 낭비하고 가독성을 해칠 수 있다 [SKILL-BETTER-TYPE].

### 11-2. widow · orphan · river

- **widow(과부행)**: 문단이나 헤드라인의 마지막 줄에 단어 하나만 남는 것.
- **orphan(고아행)**: 문단의 첫 줄이 혼자 떨어져 남는 것.
- **river(리버)**: justify 정렬에서 여러 줄에 걸쳐 흰 공백이 세로로 이어져 보이는 것.

세 가지 모두 **관찰 후보**다. 헤드라인·리드 문단에서는 `text-wrap: balance`/`pretty`(§11-1)로 대부분 해소되고, 미지원 브라우저나 예외적인 문구 길이에서는 수동 개행(`&nbsp;`로 마지막 두 단어를 묶기)으로 보정한다. river는 justify 정렬(§11-4)에서만 나타나므로 인터페이스 본문에 justify를 쓰지 않으면 대부분 발생하지 않는다 [SKILL-DESIGN-REVIEW]. 실제 콘텐츠 길이와 뷰포트 폭으로 렌더해 확인한다 — 코드만 보고는 판정할 수 없다.

### 11-3. overflow-wrap과 white-space

- `overflow-wrap: anywhere` — 긴 단어·URL·ID가 컨테이너를 밀어내지 않게 강제로 끊는다. [preflight.md](preflight.md)의 배포 전 체크리스트가 이미 이 값을 요구한다. `break-word`보다 레이아웃 계산에서 더 안전한 값이다.
- `white-space: nowrap` — 배지·라벨처럼 줄바꿈되면 의미가 깨지는 짧은 텍스트에 쓴다. 컨테이너보다 라벨이 길어질 가능성이 있으면 `text-overflow: ellipsis`(§13)를 함께 둔다.

한글 문서에서 `word-break`가 자소를 끊는 문제와 그 대응은 [antipatterns.md](antipatterns.md) §8이 정본이다 — 여기서는 라틴 문자열·URL·ID에 쓰는 `overflow-wrap`만 다룬다. 둘은 다른 문제를 푼다. `overflow-wrap`은 끊을 지점이 없는 긴 토큰의 예외 처리이고, 한글 `word-break` 규칙은 정상적인 어절 단위 줄바꿈 자체를 다룬다.

### 11-4. justify 사용 제한

**관찰 후보**다 — [antipatterns.md](antipatterns.md) §3의 판정과 같다. `text-align: start`를 인터페이스 기본으로 하고, `justify`는 자동 하이픈네이션이 걸린 좁은 에디토리얼 컬럼처럼 특정 레이아웃에서만 검토한다 [SKILL-BETTER-TYPE]. 인터페이스의 나머지 자리(카드 설명, 폼 도움말, 버튼 라벨)에 justify를 쓰면 단어 사이 공백이 불규칙해지고 §11-2의 river가 나타나기 쉽다. 한글은 어절 단위로 줄바꿈되므로 river가 나타나는 양상이 라틴과 다르다 — 실제 렌더로 확인한다.

### 11-5. 문장부호

한국어 문장부호(따옴표, 줄임표, 붙임표, 값과 단위 사이 공백 처리)의 관례는 [product-copy.md](product-copy.md) §11이 정본이다. 이 문서는 줄바꿈·렌더 규칙만 다루고 문장부호 자체는 다루지 않는다.

---

## 12. 밑줄과 트리밍

### 12-1. 밑줄 메트릭

폰트가 내장한 밑줄 위치·두께를 기본값으로 쓴다.

```css
a {
  text-underline-position: from-font;
  text-decoration-thickness: from-font;
  text-decoration-skip-ink: auto;  /* 하강부(g, y, p)를 밑줄이 가로지르지 않게 */
}
```

`from-font`가 원하는 두께를 안 주거나 폰트가 메트릭을 제공하지 않으면 수동으로 조정한다 [SKILL-BETTER-TYPE].

```css
a {
  text-decoration-thickness: 1px;    /* 실측 조정 — 시작값 */
  text-underline-offset: 3px;        /* 실측 조정 — 시작값 */
  text-decoration-skip-ink: auto;
}
```

**관찰 후보 — 실측으로 확인한다.** 밑줄에서 애니메이션이 안정적으로 동작하는 속성은 `color`뿐이라는 관찰이 있다. `text-decoration-thickness`나 `text-underline-offset`을 트랜지션에 넣으면 브라우저마다 다르게(또는 전혀) 움직일 수 있다. 두께·오프셋이 변하는 밑줄 애니메이션(왼쪽에서 자라나는 효과 등)이 필요하면 `text-decoration`을 쓰지 말고 별도 요소(가상 요소 `::after`의 `transform: scaleX()`)로 구축하는 대안을 검토한다. 점선 밑줄(`text-decoration-style: dotted`)은 약어·정의어 같은 부가 정보 힌트의 관례로 쓴다.

### 12-2. text-box trim — 점진적 향상

**지원 상태 (확인 2026-09-24)** — 두 추적기가 서로 다르게 보고한다 [WEB-BASELINE]. MDN은 Baseline **Newly available**(2026년 8월부터)로 표시하지만, webstatus.dev는 여전히 **Limited**로 표시하며(Chrome/Chrome Android 133, Edge 133, Safari/Safari iOS 18.2, **Firefox 지원 정보 없음**) 두 출처가 어긋난다. Firefox의 실제 지원 시점은 이 조사 시점 기준 확인되지 않았다.

`text-box`는 글자 위·아래의 행간 여백(폰트가 내장한 ascender/descender 공간) 중 시각적으로 불필요한 부분을 잘라낸다 — 배지·필처럼 텍스트를 컨테이너에 광학적으로 정확히 맞춰야 하는 좁은 자리에 쓴다.

```css
/* 위아래 모두 트림 */
.badge { text-box: trim-both cap alphabetic; }
/* 위쪽만 (큰 헤딩이 컨테이너 상단에 붙어야 할 때) */
.heading { text-box: trim-start cap; }
/* 아래쪽만 */
.label { text-box: trim-end alphabetic; }
```

미지원 브라우저에서는 이 선언이 무시되고 기존 여백이 그대로 남는다 — 레이아웃이 깨지지 않으므로 **점진적 향상으로 쓴다.** 광학 정렬이 하드 게이트인 자리는 없다. 지원 브라우저에서 더 정확해지는 정도로 다룬다.

---

## 13. 잘린 텍스트 — 전체 값에 도달하는 수단 (하드 게이트)

**하드 게이트**다. 정보 접근 자체가 걸린 문제이기 때문이다. 이 규칙은 [SKILL.md](../SKILL.md)의 규범·기능 하드 게이트, [accessibility.md](accessibility.md), [critique.md](critique.md)의 에스컬레이션 표와 같은 판정을 공유한다.

절단 자체는 금지가 아니다.

```css
/* 한 줄 절단 */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 여러 줄 절단 */
.clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
```

**금지되는 것은 잘린 정보가 어디서도 완전한 형태로 확인될 수 없는 상태다.** 잘려나간 값이 의미를 가지면(전체 파일명, 긴 이메일 제목, 잘린 가격 설명), 다음 중 하나로 전체 값에 도달할 수단을 남긴다.

- 네이티브 `title` 속성 또는 커스텀 툴팁으로 hover·focus 시 전체 텍스트 노출(키보드 포커스에서도 동작해야 한다 — [accessibility.md](accessibility.md)의 포커스 규칙을 따른다)
- 클릭·탭으로 여는 확장 뷰(상세 페이지, 모달, 아코디언)
- `aria-label`로 스크린리더에 전체 값을 노출(시각 텍스트와 스크린리더가 읽는 텍스트가 달라지는 것이므로 남용하지 않는다)

전체 값에 도달할 수단이 하나도 없는 절단은 통과시키지 않는다. 검증은 실제 콘텐츠 중 가장 긴 값으로 렌더한 뒤, 마우스 없이 키보드만으로 전체 값에 닿을 수 있는지 확인하는 것이다 [SKILL-BETTER-TYPE].

---

## 14. 렌더링과 선택 디테일

### 14-1. 폰트 스무딩은 루트에서 한 번

```css
:root {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
```

**관찰 후보.** macOS에서 글자를 얇게 렌더하는 이 두 속성은 쓸지 말지부터 실제 렌더로 정한다(가는 서체·작은 크기에서는 획이 약해질 수 있다). 쓰기로 했다면 **루트에 한 번만** 선언한다. 컴포넌트마다 반복해서 적용하면 스무딩 방식이 요소 경계에서 갈라져 보이는 자리가 생긴다 [SKILL-BETTER-TYPE].

### 14-2. 시스템 폰트 폴백 스택 예시

브랜드 서체를 아직 못 구했거나 로딩 실패에 대비할 때, 또는 브리프가 "네이티브 느낌"을 요구할 때 쓸 수 있는 시작 스택이다 [SKILL-APPLE-DESIGN]. **기본값으로 강요하지 않는다** — 브랜드 서체가 정해졌으면 그 폴백 체인(§4)을 우선한다.

```css
font-family:
  system-ui, -apple-system, "Segoe UI",
  Roboto, "Helvetica Neue", Arial,
  "Apple SD Gothic Neo", "Malgun Gothic",
  sans-serif;
```

한글이 섞이는 프로젝트는 §6-3의 순서 규칙(라틴 폰트를 먼저, 한글 폰트를 뒤에)이 시스템 스택에도 그대로 적용된다.

### 14-3. 텍스트 선택 가능성 유지

텍스트는 기본적으로 선택 가능해야 한다. `::selection`으로 선택 영역의 배경·글자색을 브랜드에 맞게 바꾸는 것은 괜찮다 — 단, 그 조합으로도 선택된 글자가 읽혀야 한다(대비를 확인한다) [SKILL-BETTER-TYPE].

```css
::selection {
  background: var(--accent);
  color: var(--accent-ink);
}
```

**`user-select: none`은 드래그·제스처 표면에서만 쓴다** — 정렬 핸들, 캔버스 위 라벨, 스와이프 카드처럼 선택이 제스처와 충돌하는 자리다. 인터페이스 전역에 걸거나, 버튼 라벨이 드래그 중 하이라이트될 가능성만으로 걸지 않는다. 본문·카드 설명·에러 메시지처럼 사용자가 복사하고 싶어할 수 있는 텍스트에 `user-select: none`이 걸려 있으면 그 자체가 완성도 미달 신호다.

### 14-4. 장식적 텍스트 기법 — 관찰 후보

**언제**: 에디토리얼 인트로, 인용구, 잡지형 섹션 오프닝처럼 타이포그래피가 §9-2의 능동적 요소로 쓰이는 자리.

| 기법 | 용도 |
|---|---|
| `::first-letter` | 드롭캡 |
| `::first-line` | 첫 줄만 다른 스타일(작은 대문자 등) |
| `-webkit-text-stroke` | 텍스트 외곽선. 가변 폰트에서는 겹치는 글자 모양이 병합되지 않은 채 보일 수 있다 — 정적 폰트로 확인한다 |
| `text-shadow` | 텍스트 그림자. [elevation.md](elevation.md)의 그림자 원칙(광원 하나로 통일)과 같은 기준을 따른다 |

본문·UI 텍스트에는 쓰지 않는다. `background-clip: text`(그라디언트 텍스트)는 이미 `antipatterns.md`가 다룬다 [SKILL-BETTER-TYPE].

---

## 15. 타이포 마감 전 빠른 점검

§8의 배포 전 체크리스트가 로딩·라이선스를 다룬다면, 이 표는 **렌더된 실수**를 잡는다. 실제 콘텐츠로 채운 화면에서 확인한다.

| 발견 | 조치 |
|---|---|
| 합성된 굵기·기울임이 디자인과 다르게 보인다 | 실제 페이스를 로드한다. 검증된 모드만 `font-synthesis-*: none`(§10-1) |
| Display 전용 파일을 작은 본문 크기에 그대로 쓴다 | 크기에 맞는 Text/Display 변형을 고른다(§9-3) |
| 자식 헤딩이 부모보다 시각적으로 강하다 | 해당 섹션의 위계를 스케일 내림차순에 다시 매핑한다(§9-4) |
| 헤딩 요소를 시각 크기만 보고 골랐다 | 시맨틱을 먼저 고르고([accessibility.md](accessibility.md)) 시각 크기는 CSS로 정한다(§9-4) |
| 문단 마지막 줄에 단어 하나(위도우) | `text-wrap: pretty`(§11-1, 지원 상태 확인) 또는 수동 개행 |
| 두 줄 헤딩이 한쪽으로 쏠린다 | `text-wrap: balance`(§11-1) |
| 인터페이스에 justify 정렬이 쓰인다 | `text-align: start`로. justify는 에디토리얼 컬럼에만(§11-4) |
| 밑줄이 하강부를 가로지른다 | `text-decoration-skip-ink: auto`, `from-font` 메트릭(§12-1) |
| 밑줄 두께·오프셋을 트랜지션에 걸어 애니메이션이 브라우저마다 다르게 움직인다 | `color`만 트랜지션하거나 별도 요소로 구축한다(§12-1) |
| 절단된 텍스트에 전체 값 도달 수단이 없다 | §13 — **하드 게이트**, 배포 차단 |
| 인터페이스 전역에서 텍스트 선택이 막혀 있다 | 복원하고, 드래그·제스처와 충돌하는 자리에만 남긴다(§14-3) |
| 갱신되는 숫자(타이머·카운터·실시간 가격)의 폭이 매번 바뀐다 | `tabular-nums`(§10-3) |

> 근거: [SKILL-BETTER-TYPE], [SKILL-FRONTEND-DESIGN], [SKILL-DESIGN-REVIEW], [SKILL-APPLE-DESIGN], [WEB-BASELINE](확인 2026-09-24)