파운데이션
타이포그래피
Pretendard Variable 하나로 모든 플랫폼을 구성합니다. 한글 가독성을 위해 자간을 음수로 조정하고, 숫자는 항상 고정폭(tabular)으로 정렬합니다.
- 서체
- Pretendard Variable
- 스케일
- 11단계
- Weight
- 400 · 500 · 600 · 700
- 숫자
- tabular-nums
서체
가나다 Aa 123
Pretendard Variable — 가변 폰트 하나로 45–920 weight를 지원하며, 동적 서브셋으로 필요한 글자만 내려받습니다.
가Aa
400 Regular
본문
가Aa
500 Medium
라벨 · 탭
가Aa
600 Semibold
버튼 · 제목
가Aa
700 Bold
금액 · 페이지 제목
타입 스케일
Tailwind 클래스(text-title1 등)에 크기 · 행간 · 자간 · 기본 굵기가 함께 들어 있습니다.
결제금액 128,400원
text-display40/52 · 700결제금액 128,400원
text-title132/43 · 700결제금액 128,400원
text-title226/36 · 700결제금액 128,400원
text-title322/31 · 700결제금액 128,400원
text-heading18/26 · 600결제금액 128,400원
text-body116/26 · 400결제금액 128,400원
text-body215/24 · 400결제금액 128,400원
text-body314/22 · 400결제금액 128,400원
text-caption113/20 · 400결제금액 128,400원
text-caption212/17 · 400결제금액 128,400원
text-micro11/15 · 400숫자와 금액
결제 서비스의 가장 중요한 텍스트는 숫자입니다.
Tabular Numbers
자릿수가 바뀌어도 폭이 흔들리지 않도록 모든 숫자 영역에 tabular 유틸리티를 적용합니다.
Proportional
1,111,111원
8,888,888원
4,120,000원
Tabular ✓
1,111,111원
8,888,888원
4,120,000원
금액 표기 규칙
플랫폼별 기본 본문
POS · 키오스크는 화면과 눈 사이 거리가 멀어 모바일 스케일을 그대로 쓰면 작게 느껴집니다. 컨트롤 글자는
--control-fs-* 토큰이 자동으로 키워줍니다.사용 규칙
이렇게 하세요
- 한 화면에서 3–4단계 스케일만 사용
- 제목과 본문 사이 위계는 크기보다 굵기 차이로 먼저
- 긴 문장은 행 길이 60자(약 680px) 이내
이렇게 하지 마세요
- 임의 px 크기 (예: text-[17px]) 사용
- Light(300) 이하 굵기 사용
- 금액을 기울임 · 밑줄 · 대문자 변환