타이포그래피는 font-*와 text-* 속성군으로 제어됩니다. 이를 올바르게 다루는 것이 페이지를 다듬어지고 읽기 좋게 만드는 일의 대부분입니다.
css
{
: , system-ui, sans-serif;
: ;
: ;
: italic;
: ;
: ;
}
font-family: "Inter", system-ui, -apple-system, sans-serif;
브라우저는 사용 가능한 것이 나올 때까지 순서대로 시도합니다. 커스텀 폰트가 실패해도 텍스트가 렌더링되도록 항상 제네릭 패밀리(sans-serif, serif, monospace)로 끝내세요. system-ui는 OS의 네이티브 폰트를 사용합니다(빠르고 다운로드 불필요).
.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: 1.5; /* ✅ 요소 font-size의 1.5배 — 올바르게 비례 */
line-height: 24px; /* ⚠️ 고정 — font-size가 바뀌어도 적응하지 않음 */
단위 없는 line-height는 각 요소 자신의 font-size를 곱하므로, 중첩된 요소가 다른 크기를 가져도 비례를 유지합니다 — 권장되는 방식입니다.
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; /* 텍스트가 잘리면 "..." 표시 */
}
텍스트 속성은 가독성과 시각적 위계를 좌우합니다 — 강조를 위한 font-size/weight, 편안한 읽기를 위한 line-height(~1.5), 신뢰성을 위한 대체 스택, 깔끔한 자르기를 위한 text-overflow.
좋은 타이포그래피가 보기 좋은 UI의 대부분을 차지합니다.