Typography

KRDS 기반 타이포그래피 시스템입니다. Pretendard GOV 폰트를 사용하며 접근성을 고려한 크기와 간격을 제공합니다.

핵심: text-krds- 접두사로 KRDS 타이포그래피를 사용합니다. Display, Title, Body 3가지 카테고리로 구성됩니다.

모든 타이포그래피 CSS 변수는 @hanui/react/variables.css에 정의되어 있고, tailwind.preset.ts에서 Tailwind 클래스로 매핑됩니다.

Display (특대 제목)

히어로 섹션, 대형 제목에 사용합니다. Line-height 130%.

text-krds-display-xl

48px / 700 — 히어로 제목

text-krds-display-lg

42px / 700 — 대형 섹션

text-krds-display-md

36px / 700 — 중형 섹션

text-krds-display-sm

32px / 700 — 소형 섹션

Title (제목)

페이지 제목, 섹션 제목에 사용합니다. Line-height 140%.

text-krds-title-xl

32px / 700 — 페이지 제목

text-krds-title-lg

28px / 700 — 섹션 제목

text-krds-title-md

24px / 700 — 하위 섹션

text-krds-title-sm

20px / 700 — 카드 제목

text-krds-title-xs

18px / 700 — 소형 제목

Body (본문)

본문 텍스트, 설명에 사용합니다. Line-height 150%.

text-lg

19px — 큰 본문 (강조)

text-base

17px — 기본 본문 (기본값)

text-sm

15px — 작은 본문 (보조)

text-xs

13px — 캡션, 레이블

사용 방법

폰트

Pretendard GOV를 기본 폰트로 사용합니다.

Pretendard GOV는 정부 웹사이트용 최적화 폰트입니다. 없으면 Pretendard, 시스템 폰트 순으로 대체됩니다.

Best Practices

  • 최소 폰트 크기는 13px 이상 (KRDS body-xs)
  • 기본 본문은 17px (KRDS body-md) 사용
  • Line-height: Display 130%, Title 140%, Body 150%
  • 색상 대비는 WCAG 기준 4.5:1 이상 준수
  • Heading 계층을 논리적으로 사용 (h1 → h2 → h3)

참고 자료

KRDS 타이포그래피 가이드

폰트, 크기, line-height 기준

(새 창 열림)