Foundations / Typography
타이포그래피 (Typography)
Pretendard 기반의 텍스트 스타일입니다. 클래스 하나로 크기·행간·굵기·자간이 함께 적용됩니다. 예: text-heading-1
제목 (Display & Heading)
48rem(768px) 이상에서 Desktop 크기로 커집니다.
Display/Large36/46 → 48/60 · Bold
오늘의 지표Display/Medium32/42 → 40/52 · Bold
오늘의 지표Heading/H128/38 → 32/42 · Bold
페이지 제목Heading/H222/30 → 24/32 · Bold
섹션 제목Heading/H317/24 → 20/28 · SemiBold
카드·패널 제목본문 (Title & Body)
Title15/22 · SemiBold
리스트 항목 제목Body/Large17/28 · Regular
읽기 중심의 긴 본문에 쓰는 크기입니다.Body/Medium15/24 · Regular
기본 본문에 쓰는 크기입니다.Body/Small13/20 · Regular
대시보드 표와 보조 설명에 씁니다.레이블 (Label & Caption)
Label/Large15/20 · SemiBold
버튼 레이블Label/Medium13/18 · Medium
입력 필드 레이블Label/Small11/14 · Medium
작은 레이블Caption12/16 · Regular
캡션 · 2026.10.26 업데이트Overline11/14 · SemiBold · +2%
OVERLINE숫자·코드 (Numeric & Code)
숫자 스타일은 tabular-nums와 함께 써서 자릿수를 맞춥니다.
Numeric/Large28/36 · Bold
₩12,480,000Numeric/Medium15/20 · Medium
1,234.56Numeric/Small13/20 · Medium
+12.4%Code/Medium14/22 · JetBrains Mono
const ohc = tokens()Code/Small12/18 · JetBrains Mono
--ohc-primary-solid