Foundations
Typography
본문은 Geist Variable 하나로 씁니다. 크기는 캡션 12px부터 히어로 48px까지 7단이고, 무게와 줄 간격은 별도 스케일로 조합합니다.
타입 스케일은 두 겹입니다. 컴포넌트가 넓게 쓰는 Tailwind 정렬 스케일(fontSize)과,
캔버스의 의미 단위 스케일(text)입니다. 문서와 마케팅 화면은 의미 단위를 씁니다.
의미 단위 스케일
caption 12px
See. Build. Execute.
body 14px
See. Build. Execute.
lead 16px
See. Build. Execute.
subtitle 18px
See. Build. Execute.
heading 24px
See. Build. Execute.
display 36px
See. Build. Execute.
hero 48px
See. Build. Execute.
무게
regular · 400
Insight, activated.
medium · 500
Insight, activated.
semibold · 600
Insight, activated.
bold · 700
Insight, activated.
줄 간격
| token | value | 쓰는 곳 |
|---|---|---|
| none | 1 | 설명 문단, 긴 글 |
| tight | 1.25 | 제목, 큰 수치 |
| snug | 1.375 | 제목, 큰 수치 |
| normal | 1.5 | 본문 |
| relaxed | 1.625 | 설명 문단, 긴 글 |
| loose | 2 | 설명 문단, 긴 글 |
폰트 패밀리
-
sans— 'Geist Variable', ui-sans-serif, system-ui, sans-serif -
mono— ui-monospace, SFMono-Regular, Menlo, monospace
네이티브는 CSS 스택 문자열을 해석하지 못하므로 @horon/tokens/native가 단일 패밀리
이름(Geist)을 따로 냅니다.