텍스트와 폰트를 제어하는 속성에는 어떤 것들이 있나요?

Question

Accepted Answer

타이포그래피는 `font-*`와 `text-*` 속성군으로 제어됩니다. 이를 올바르게 다루는 것이 페이지를 다듬어지고 읽기 좋게 만드는 일의 대부분입니다.

```css
.text {
  font-family: "Inter", system-ui, sans-serif; /* 대체 폰트 포함 */
  font-size: 1rem;       /* 크기 (접근성을 위해 rem 사용) */
  font-weight: 600;      /* 100–900; 400 보통, 700 굵게 */
  font-style: italic;    /* normal | italic */
  line-height: 1.5;      /* 줄 간격 — 단위 없는 값이 최선 */
  letter-spacing: 0.02em;/* 글자 사이 간격(tracking) */
}
```

## font-family 대체 스택

```css
font-family: "Inter", system-ui, -apple-system, sans-serif;
```

브라우저는 사용 가능한 것이 나올 때까지 순서대로 시도합니다. 커스텀 폰트가 실패해도 텍스트가 렌더링되도록 항상 **제네릭 패밀리**(`sans-serif`, `serif`, `monospace`)로 끝내세요. `system-ui`는 OS의 네이티브 폰트를 사용합니다(빠르고 다운로드 불필요).

## 텍스트 레이아웃 속성

```css
.text {
  text-align: center;        /* left | right | center | justify */
  text-decoration: underline;/* underline | line-through | none */
  text-transform: uppercase; /* UPPERCASE | lowercase | Capitalize */
  white-space: nowrap;       /* 줄바꿈 방지 */
  word-break: break-word;    /* 긴 단어/URL 끊기 */
}
```

## line-height: 단위 없는 값을 사용하세요

```css
line-height: 1.5;    /* ✅ 요소 font-size의 1.5배 — 올바르게 비례 */
line-height: 24px;   /* ⚠️ 고정 — font-size가 바뀌어도 적응하지 않음 */
```

**단위 없는** `line-height`는 각 요소 자신의 font-size를 곱하므로, 중첩된 요소가 다른 크기를 가져도 비례를 유지합니다 — 권장되는 방식입니다.

## 텍스트 자르기(흔한 필요)

```css
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* 텍스트가 잘리면 "..." 표시 */
}
```

## 왜 중요한가

텍스트 속성은 가독성과 시각적 위계를 좌우합니다 — 강조를 위한 `font-size`/`weight`, 편안한 읽기를 위한 `line-height`(~1.5), 신뢰성을 위한 대체 스택, 깔끔한 자르기를 위한 `text-overflow`.

좋은 타이포그래피가 보기 좋은 UI의 대부분을 차지합니다.