타이포그래피
크기와 행간, 자간에 같은 번호를 붙였다. font-size-4 를 쓰면 line-height-4 와 letter-spacing-4 가 짝이다. 셋을 따로 고르지 않는다.
글꼴
라이브러리는 글꼴을 싣지 않는다. --nui-font-family-base 가 inherit 라 컴포넌트는 소비자 페이지의 글꼴을 그대로 따른다. 이 문서 사이트는 소비자 역할로 Pretendard(가변 글꼴, 유니코드 범위별 동적 서브셋)를 싣고 있다. 고딕 계열이고 굵기 하나의 파일로 400~700 을 전부 낸다.
npm i pretendard
// app/layout.tsx
import "pretendard/dist/web/variable/pretendardvariable-dynamic-subset.css";
// 전역 CSS
body { font-family: "Pretendard Variable", Pretendard, system-ui, sans-serif; }스케일
다람쥐 헌 쳇바퀴에 타고파 Handgloves 0123
다람쥐 헌 쳇바퀴에 타고파 Handgloves 0123
다람쥐 헌 쳇바퀴에 타고파 Handgloves 0123
다람쥐 헌 쳇바퀴에 타고파 Handgloves 0123
다람쥐 헌 쳇바퀴에 타고파 Handgloves 0123
2 · 7 · 8번은 없다. 쓰이지 않아서 만들지 않았다. 5번은 이 문서 사이트가 쓴다.
행간과 자간
큰 글자일수록 줄 높이 배수를 줄인다(1.5 → 1.4). 단일 배수를 전 스케일에 적용하면 큰 제목이 헐거워 보인다. 자간은 반대로 큰 글자일수록 좁힌다. 둘 다 광학 보정이다.
| 번호 | 크기 | 행간(배수) | 자간 |
|---|---|---|---|
| 1 | 13px | 1.5 → 20px | 0 |
| 3 | 14px | 1.5 → 21px | 0 |
| 4 | 16px | 1.5 → 24px | 0 |
| 5 | 18px | 1.5 → 27px | 0 |
| 6 | 20px | 1.5 → 30px | 0 |
행간은 배수라 단위가 없다.
font-size 를 덮어써도 비율이 유지된다. 절대값(rem)이면 크기만 바뀌었을 때 행간이 깨진다.역할이 정해지면 스케일이 결정된다
"이건 라벨인가 캡션인가"만 물으면 크기와 굵기가 따라온다.
| 역할 | 크기 | 굵기 | 쓰는 곳 |
|---|---|---|---|
| 입력값 · 본문 | font-size-4 | regular | Textfield · Textarea · Select 값 · 옵션 · placeholder |
| 액션 라벨 | font-size-4 | bold | Button(text 버튼 포함) · Accordion 헤더 · Datepicker 년월 |
| 보조 텍스트 | font-size-3 | regular | Popup 본문 · Accordion 본문 · Tooltip · Select 안내 |
| 라벨 · 값 강조 | font-size-3 | regular | Field 라벨 · Datepicker 날짜 · Select 태그 · Toast 메시지 |
| 액션 라벨 (small) | font-size-3 | bold | Button small · Datepicker 월 드롭다운 |
| 캡션 · 설명 · 메시지 | font-size-1 | regular | Field 설명 · Message · 에러 문구 |
| 그룹 라벨 | font-size-1 | regular | Select 그룹 헤딩 |
| 요일 · 소제목 | font-size-1 | bold | Datepicker 요일 |
| 제목 | font-size-6 | bold | Popup 제목 |
굵기는 두 단계다
regular(400)와 bold(700)만 쓴다. 정부 가이드라인(KRDS)의 표준형 서체 규격이 두 굵기이고, 굵기가 셋 이상이면 위계가 흐려진다. 라벨 · 날짜 · 태그는 regular, 버튼 · 제목 · 요일은 bold 다.
Aa 가나
regular · 400Aa 가나
bold · 700500 · 600 · 800 은 두지 않는다. 강조가 필요하면 bold 다.
전체 토큰
| 토큰 | 값 | 비고 |
|---|---|---|
| --nui-font-family-base | inherit | 라이브러리는 폰트를 배포하지 않는다 |
| --nui-font-size-1 | 0.8125rem | 13px |
| --nui-font-size-3 | 0.875rem | 14px |
| --nui-font-size-4 | 1rem | 16px |
| --nui-font-size-5 | 1.125rem | 18px |
| --nui-font-size-6 | 1.25rem | 20px |
| --nui-line-height-1 | 1.5 | 13 → 19.5px |
| --nui-line-height-3 | 1.5 | 14 → 21px |
| --nui-line-height-4 | 1.5 | 16 → 24px |
| --nui-line-height-5 | 1.5 | 18 → 27px |
| --nui-line-height-6 | 1.5 | 20 → 30px |
| --nui-letter-spacing-1 | 0 | — |
| --nui-letter-spacing-3 | 0 | — |
| --nui-letter-spacing-4 | 0 | — |
| --nui-letter-spacing-5 | 0 | — |
| --nui-letter-spacing-6 | 0 | — |
| --nui-font-weight-regular | 400 | — |
| --nui-font-weight-bold | 700 | — |