Typography
Tiro의 타이포그래피 시스템. 듀얼 폰트 (브랜드 세리프 + UI 산세리프).
Tiro는 듀얼 폰트 시스템을 사용합니다:
- Averia Serif Libre: 브랜드 목소리 (마케팅, 히어로, 태그라인, in-app의 브랜드 모멘트)
- Pretendard JP: UI 워크호스 (네비게이션, 본문, 데이터 — 모든 로케일)
두 폰트는 기본 역할이 다르지만 교차 사용 가능합니다:
- Averia는 UI 내부에서도 브랜드 모멘트에 사용 가능 — AI 채팅 인사말, 온보딩 환영, Tiro가 화자로 등장하는 표면 등
- Pretendard JP는 한국어 마케팅 헤드라인의 기본입니다. 세리프 분기는 2026-08 에 없앴습니다
일반 원칙: 기능적 UI 텍스트(버튼, 라벨, 네비, 본문)에 Averia 쓰지 않고, 영어/일본어 마케팅 hero에 Pretendard JP 쓰지 않는다. 그 외의 교차는 디자인 판단.
Font Families
| Token | Value | Description |
|---|---|---|
| ui | Pretendard JP | 모든 UI 텍스트 (KO / EN / JA). 한국어 브랜드 헤드라인은 brandKr 로 옮겼습니다. |
| brandKr | Hahmlet | 한국어 브랜드 헤드라인 · 마케팅 전용. 2026-08-17 헤이즐 결정으로 마케팅 한글 자리를 100% 이 글꼴로 바꿉니다. 검토물은 hahmlet-2026-08-16/Tiro_한글제목글꼴_검토전체.html 입니다. |
| brand | Averia Serif Libre | 영문 브랜드 헤드라인 · 마케팅 전용. 본문에 쓰지 않습니다. |
| mono | Geist Mono | 코드 · 타임스탬프 · 테크니컬 라벨 |
Pretendard JP는 한글·일본어·Latin 스크립트를 일관된 메트릭으로 커버합니다. KO/EN용 별도 폰트 스택을 두지 않습니다.
Type Scale
Web · Desktop · Mobile
아래 램프는 세 플랫폼이 같이 쓰는 정본입니다.
모바일 앱(
tiro-app)도 이 램프를 씁니다. 자체Typography객체 13단이 램프 단 이름을 카멜케이스로 그대로 씁니다.cmpXs=cmp-xs,bodyMd=body-md. React Native 는 CSS 변수를 못 받아서 클래스 문자열을 담은 TS 상수가 필요하고, 그 상수의 이름과 값이 램프와 1:1 입니다. 이관 기록은MIGRATION-2026-08.md의 8-7 입니다.컴포넌트 문서의 예제는 아직 옛 이름을 씁니다.
Typography.label1·subtitle1·body1_16같은 이름이 16개 문서에 34곳 남아 있습니다. 폐기된 웹 램프와 옛 모바일 스케일이 섞여 있고 둘 다 지금 코드에 없습니다. 갱신은 별건입니다.자간만 축이 둘입니다. 램프 각 단이
trackingMobile(px, 640px 미만)과tracking(em, 640px 이상) 두 값을 가지고, React Native 는 브레이크포인트를 넘지 않으므로 항상 px 값을 받습니다.
램프는 한 단이 크기와 굵기와 행간과 자간을 함께 정합니다. 고를 때 먼저 묻는 것은 크기가 아니라 이 글이 줄바꿈되는가 입니다.
typography-cmp-*는 한 줄짜리입니다. 버튼, 라벨, 배지, 메뉴, 탭. 행간이 좁습니다.typography-body-*는 여러 줄짜리입니다. 본문, 설명문. 같은 크기라도 행간이 넓습니다.typography-h1~h5는 제목입니다. 굵기가 단마다 고정입니다 (h1 700, h2~h5 600).typography-mono-*는 타임스탬프·녹음 길이처럼 자리가 흔들리면 안 되는 숫자입니다.tabular-nums와 함께 씁니다.
같은 13px이라도 cmp-sm 은 행간 18, body-sm 은 행간 20입니다. 한 줄로 끝나는 라벨에 body 를 쓰면 위아래가 뜨고, 문단에 cmp 를 쓰면 줄이 붙습니다.
굵기는 접미사로 붙습니다. 접미사 없음이 400, -plus 가 500, -bold 가 700입니다. -bold 는 cmp-* 에만 있습니다.
버튼 전용 단은 없습니다. 버튼 라벨도 위 규칙을 따릅니다. 실제 Button 컴포넌트는 크기별로 typography-cmp-md-plus(lg) · typography-body-sm-plus(default, sm) · typography-cmp-xs-plus(xs) 를 씁니다.
Headers
| Token | Value | Description |
|---|---|---|
| h1 | 32 → 36px / 38 · Bold 700 | tracking -0.025em |
| h2 | 28 → 30px / 34 · SemiBold 600 | tracking -0.022em |
| h3 | 24px / 32 · SemiBold 600 | tracking -0.02em |
| h4 | 20px / 28 · SemiBold 600 | tracking -0.018em |
| h5 | 18px / 28 · SemiBold 600 | tracking -0.015em |
Component — 단일행 (cmp-*)
| Token | Value | Description |
|---|---|---|
| cmp-lg | 16px / 24 · Regular 400 | tracking -0.012em |
| cmp-lg-plus | 16px / 24 · SemiBold 600 | tracking -0.012em |
| cmp-md | 14px / 20 · Regular 400 | tracking -0.01em |
| cmp-md-plus | 14px / 20 · SemiBold 600 | tracking -0.01em |
| cmp-md-bold | 14px / 20 · Bold 700 | tracking -0.01em |
| cmp-sm | 13px / 18 · Regular 400 | tracking -0.008em |
| cmp-sm-plus | 13px / 18 · SemiBold 600 | tracking -0.008em |
| cmp-sm-bold | 13px / 18 · Bold 700 | tracking -0.008em |
| cmp-xs | 12px / 16 · Regular 400 | tracking -0.005em |
| cmp-xs-plus | 12px / 16 · SemiBold 600 | tracking -0.005em |
| cmp-xs-bold | 12px / 16 · Bold 700 | tracking -0.005em |
| cmp-2xs | 11px / 16 · Regular 400 | tracking 0em |
| cmp-2xs-plus | 11px / 16 · SemiBold 600 | tracking 0em |
| cmp-2xs-bold | 11px / 16 · Bold 700 | tracking 0em |
| cmp-3xs | 10px / 14 · Regular 400 | tracking 0em |
| cmp-3xs-plus | 10px / 14 · SemiBold 600 | tracking 0em |
Body — 다중행 (body-*)
| Token | Value | Description |
|---|---|---|
| body-xl | 18px / 28 · Regular 400 | tracking -0.015em |
| body-xl-plus | 18px / 28 · Medium 500 | tracking -0.015em |
| body-lg | 16px / 26 · Regular 400 | tracking -0.012em |
| body-lg-plus | 16px / 26 · Medium 500 | tracking -0.012em |
| body-md | 14px / 22 · Regular 400 | tracking -0.01em |
| body-md-plus | 14px / 22 · Medium 500 | tracking -0.01em |
| body-sm | 13px / 20 · Regular 400 | tracking -0.008em |
| body-sm-plus | 13px / 20 · Medium 500 | tracking -0.008em |
| body-xs | 12px / 18 · Regular 400 | tracking -0.005em |
| body-xs-plus | 12px / 18 · Medium 500 | tracking -0.005em |
| body-2xs | 11px / 18 · Regular 400 | tracking 0em |
| body-2xs-plus | 11px / 18 · Medium 500 | tracking 0em |
| body-3xs | 10px / 16 · Regular 400 | tracking 0em |
Mono
| Token | Value | Description |
|---|---|---|
| mono-sm | 13px / 20 · Regular 400 | tracking -0.015em · mono |
| mono-2xs | 11px / 16 · Medium 500 | tracking -0.015em · mono |
rem 표기 (16px base):
px 표기 · 제목 h1 36 · h2 30 · h3 24 · h4 20 · h5 18
한 줄 cmp-xl 18 · cmp-lg 16 · cmp-md 14 · cmp-sm 13 · cmp-xs 12 · cmp-2xs 11 · cmp-3xs 10
여러 줄 body-xl 18 · body-lg 16 · body-md 14 · body-sm 13 · body-xs 12 · body-2xs 11 · body-3xs 10
모노 mono-sm 13 · mono-2xs 11
Brand Display (세리프, 마케팅 전용)
브랜드 타이포는 3단계 hierarchy (B / M / L) 로 운영합니다. B / M / L은 hierarchy 레벨 라벨이지 literal font weight 이름이 아닙니다.
| Hierarchy | Averia Serif Libre (EN) | 한국어 · 일본어 |
|---|---|---|
| B (강조) | Bold 700 | Pretendard JP SemiBold 600 |
| M (기본) | Regular 400 | Pretendard JP Regular 400 |
| L (옅은 강조) | Light 300 | Pretendard JP Light 300 |
- Averia Serif Libre는 Medium weight 자체가 존재하지 않음 — "M" 레벨은 Regular(400)으로 구현
- 한국어 · 일본어 브랜드 텍스트는 세리프를 쓰지 않습니다. Noto Serif KR/JP는 2026-08 에 토큰 층에서 폐기했습니다. 토큰 소비처가 0건이었습니다. 자세한 내용은
MIGRATION-2026-08.md§4-6 - 폰트 자산은 아직 배포에 남아 있습니다.
PlanActivationWelcomeOverlay와 OG 이미지 렌더 두 곳이 디자인 시스템을 지나지 않고 직접 지정하기 때문입니다. 그 둘을 정리해야 자산을 지울 수 있습니다
Italic (Averia 전용):
| Hierarchy | Roman | Italic |
|---|---|---|
| B | Bold | Bold Italic |
| M | Regular | Italic |
| L | Light | Light Italic |
Averia italic은 AI 채팅 인사말 ("Hi [name], Nice to see you again") 등 Tiro가 화자로 등장하는 브랜드 모멘트에 사용. 영문 전용입니다.
| Token | Value | Description |
|---|---|---|
| brand-h1 | 32 → 64px / 34 · Bold 700 | tracking -0.045em · brand |
| brand-h2 | 28 → 50px / 32 · Bold 700 | tracking -0.03em · brand |
| brand-h3 | 32 → 36px / 38 · Regular 400 | tracking 0em · brand |
| brand-h4 | 24px / 1 · Bold 700 | tracking 0.01em · brand |
| brand-h5 | 20px / 28 · Light 300 | tracking 0em · brand |
브랜드 램프는 brand-h1 ~ brand-h5 5단입니다. brand-h1 과 brand-h2 만 크기가 반응형이고, 기본이 모바일 값이며 640px 이상에서 데스크탑 값으로 바뀝니다 (h1 32→64, h2 28→50). 제품 UI의 기본 본문은 14px 입니다.
Principles
- Serif for soul, sans for utility — Averia는 브랜드 감성, Pretendard JP는 정보 처리
- CJK는 세리프를 쓰지 않는다 — 한국어/일본어 브랜드 텍스트는 Pretendard JP로 갑니다. CJK 세리프는 Latin Bold와 매칭할 때 광학적으로 더 무거워져 톤이 어긋났고, 무게를 한 단 내리는 예외 규칙이 계속 따라붙었습니다. 규칙을 없애는 쪽을 택했습니다
- B/M/L은 hierarchy 라벨 — literal weight 이름이 아님. 폰트별 실제 weight는 Brand Display 표 참조. Averia에는 Medium이 없음 (M = Regular)
- Weight restraint in UI — 본문은 Regular(400)/Medium(500) 위주, Bold(700)는 제목·강조에만. Tiro는 calm, not emphatic
- Italic은 Averia 한정 — AI 채팅 인사말 등 Tiro가 화자로 등장하는 브랜드 모멘트에서만. 한국어 · 일본어는 italic 미운영
Do / Don't
- Do: 브랜드 모멘트 (로그인 헤드라인, 히어로, AI 채팅 인사말, 온보딩 환영)에는 Averia Serif Libre 기본 사용
- Do: UI 기능 텍스트 (버튼, 라벨, 네비, 본문)는 Pretendard JP 기본 사용
- Do: 타임스탬프·녹음 시간·카운터는 Geist Mono +
tabular-nums - Do: 한국어 · 일본어 마케팅 헤드라인은 Pretendard JP 사용
- Do: Averia "M" hierarchy는 Regular(400)으로 매핑 — 코드/Figma에서 Medium 적용 시도하면 fallback 발생
- Do: Averia italic은 AI 채팅 인사말 등 Tiro가 화자로 등장하는 모멘트에만
- Don't: 영문 마케팅 hero에 Pretendard JP 기본 사용 금지 (editorial weight 가 필요한 자리는 Averia)
- Don't: UI 기능 텍스트의 기본 폰트로 Averia 사용 금지 (가독성·신뢰도)
- Don't: 한 컴포넌트에 두 가지 초과 weight 혼용 금지
- Don't: Averia에 Medium weight 적용 금지 (해당 weight 미존재 — 시스템이 Regular로 fallback하거나 깨짐)
- Don't: 한국어 · 일본어에 세리프 브랜드 폰트 지정 금지 (2026-08 폐기)