Typography
Tiro의 타이포그래피 시스템. 듀얼 폰트 (브랜드 세리프 + UI 산세리프).
Tiro는 듀얼 폰트 시스템을 사용합니다:
- Averia Serif Libre: 브랜드 목소리 (마케팅, 히어로, 태그라인, in-app의 브랜드 모멘트)
- Pretendard JP: UI 워크호스 (네비게이션, 본문, 데이터 — 모든 로케일)
두 폰트는 기본 역할이 다르지만 교차 사용 가능합니다:
- Averia는 UI 내부에서도 브랜드 모멘트에 사용 가능 — AI 채팅 인사말, 온보딩 환영, Tiro가 화자로 등장하는 표면 등
- Pretendard JP는 한국어 마케팅 헤드라인에서도 사용 가능 — Noto Serif KR의 editorial weight가 무거울 때, 또는 UI와 연속되는 마케팅 surface에서
일반 원칙: 기능적 UI 텍스트(버튼, 라벨, 네비, 본문)에 Averia 쓰지 않고, 영어/일본어 마케팅 hero에 Pretendard JP 쓰지 않는다. 그 외의 교차는 디자인 판단.
Font Families
| Token | Value | Description |
|---|---|---|
| brand | Averia Serif Libre | Headline, tagline, 마케팅 |
| brandKr | Noto Serif KR | 한국어 브랜드 헤드라인 |
| brandJp | Noto Serif JP | 일본어 브랜드 헤드라인 |
| ui | Pretendard JP | 모든 UI 텍스트 (KO/EN/JA) |
| mono | Geist Mono | 코드, 타임스탬프, 테크니컬 라벨 |
Pretendard JP는 한글·일본어·Latin 스크립트를 일관된 메트릭으로 커버합니다. KO/EN용 별도 폰트 스택을 두지 않습니다.
Type Scale
Web (Desktop) & Mobile (React Native) — 통일 토큰
Web과 Mobile 모두 같은 토큰 이름을 사용합니다. Mobile은 React Native Text 컴포넌트에 토큰으로 전달합니다.
토큰 이름은 크기만이 아니라 역할을 먼저 뜻합니다. 코드에서는 body2Medium처럼 weight 조합을 사용할 수 있지만, 기본 선택 기준은 semantic role입니다.
body는 사용자가 읽는 문장형 텍스트에 사용합니다.body2Medium은 보조 본문을 살짝 강조해야 할 때의 예외적 조합입니다.label은 사용자가 훑고 조작하는 UI 텍스트에 사용합니다. control label, tab, section control은label1/label2에서 시작하고, dropdown/select/multi-select의 선택값과 옵션 라벨은label3Medium을 사용합니다.- 노트 목록/상세의 날짜·시간·녹음 길이처럼 반복적으로 훑는 앱 메타데이터는
label2Regular에서 시작합니다. 색상은text-stone-300을 기본으로 맞춥니다. caption은 helper, hint, legal copy, 아주 작은 보조 라벨에 사용합니다.button은 버튼 높이와 padding에 맞춘 전용 텍스트입니다. 버튼 내부에서는 body/label 조합보다 button 토큰을 우선합니다.
| Token | Value | Description |
|---|---|---|
| title1 | 36px / 40 · Bold 700 | 최상위 hero, 페이지 타이틀 |
| title2 | 30px / 36 · SemiBold 600 | 주요 섹션 타이틀 |
| title3 | 24px / 32 · SemiBold 600 | 카드/큰 패널 타이틀 |
| title4 | 20px / 28 · SemiBold 600 | 서브섹션, 모달 타이틀 |
| subtitle1 | 18px / 28 · SemiBold 600 | 그룹 타이틀, 강조된 행 |
| subtitle2 | 16px / 24 · Medium 500 | 작은 섹션 타이틀 |
| body1 | 14px / 20 · Regular 400 | 기본 본문, 설명 문장 |
| body2 | 13px / 18 · Regular 400 | 보조 본문, 메타 문장 |
| label1 | 14px / 20 · Medium 500 | 폼/탭/컨트롤/메뉴 라벨 |
| label2 | 13px / 20 · Medium 500 | Badge/Chip, 고밀도 UI 라벨 |
| label3 | 12px / 18 · Medium 500 | Select/Dropdown/MultiSelect 선택값과 옵션 라벨 |
| caption1 | 12px / 16 · Regular 400 | 헬퍼 텍스트, 힌트, 보조 라벨 |
| caption2 | 11px / 16 · Regular 400 | 법적 고지 |
| button1 | 15px / 24 · Medium 500 | Primary 버튼 (lg/xl) |
| button2 | 13px / 20 · Medium 500 | Secondary 버튼 (xs/sm/md) |
rem 표기 (16px base):
title1Bold 2.25rem · title2SemiBold 1.875rem · title3SemiBold 1.5rem · title4SemiBold 1.25rem · subtitle1SemiBold 1.125rem · subtitle2Medium 1rem · body1Regular/label1Medium 0.875rem · body2Regular/label2Medium/button2Medium 0.8125rem · button1Medium 0.9375rem · label3Medium/caption1Regular 0.75rem · caption2Regular 0.6875rem
Brand Display (세리프, 마케팅 전용)
브랜드 타이포는 3단계 hierarchy (B / M / L) 로 운영합니다. B / M / L은 hierarchy 레벨 라벨이지 literal font weight 이름이 아닙니다.
| Hierarchy | Averia Serif Libre | Noto Serif KR | Noto Serif JP |
|---|---|---|---|
| B (강조) | Bold 700 | SemiBold 600 | SemiBold 600 |
| M (기본) | Regular 400 | Regular 400 | Regular 400 |
| L (옅은 강조) | Light 300 | Light 300 | Light 300 |
- Averia Serif Libre는 Medium weight 자체가 존재하지 않음 — "M" 레벨은 Regular(400)으로 구현
- Noto Serif KR/JP의 "B" hierarchy는 SemiBold(600) 사용 — Bold(700)는 CJK 세리프에서 시각적으로 너무 무거워 한 단계 내림
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가 화자로 등장하는 브랜드 모멘트에 사용. Noto Serif KR/JP는 italic 미운영.
| Token | Value | Description |
|---|---|---|
| brandHero | 48px / 53 · Bold 700 | Brand Hero EN — B hierarchy (Bold 700), desktop 48px |
| brandSubHero | 32px / 38 · Regular 400 | Brand Sub-hero EN — M hierarchy (Regular 400), desktop 32px |
| brandBody | 18px / 25 · Light 300 | Brand Body EN — L hierarchy (Light 300), desktop 18px |
| brandHeroKr | 44px / 51 · SemiBold 600 | Brand Hero KR — B hierarchy (SemiBold 600), desktop 44px |
| brandSubHeroKr | 32px / 38 · Regular 400 | Brand Sub-hero KR — M hierarchy (Regular 400), desktop 32px |
| brandBodyKr | 18px / 25 · Light 300 | Brand Body KR — L hierarchy (Light 300), desktop 18px |
| brandHeroJp | 44px / 51 · SemiBold 600 | Brand Hero JP — B hierarchy (SemiBold 600), desktop 44px |
| brandSubHeroJp | 32px / 38 · Regular 400 | Brand Sub-hero JP — M hierarchy (Regular 400), desktop 32px |
| brandBodyJp | 18px / 25 · Light 300 | Brand Body JP — L hierarchy (Light 300), desktop 18px |
반응형 hero 스케일링: 48 desktop → 36 tablet → 28 mobile. 제품 UI의 기본 본문 텍스트는 14px 기본 (가독성 최우선).
Principles
- Serif for soul, sans for utility — Averia는 브랜드 감성, Pretendard JP는 정보 처리
- CJK parity — 한국어/일본어 브랜드 텍스트는 Noto Serif KR/JP로 동일한 세리프 따뜻함 유지. 단, "B" hierarchy는 SemiBold로 (Latin Bold와 매칭 시 CJK가 광학적으로 더 무거워지는 문제 회피)
- 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가 화자로 등장하는 브랜드 모멘트에서만. Noto Serif KR/JP italic 미운영
Do / Don't
- Do: 브랜드 모멘트 (로그인 헤드라인, 히어로, AI 채팅 인사말, 온보딩 환영)에는 Averia Serif Libre 기본 사용
- Do: UI 기능 텍스트 (버튼, 라벨, 네비, 본문)는 Pretendard JP 기본 사용
- Do: 타임스탬프·녹음 시간·카운터는 Geist Mono +
tabular-nums - Do: 한국어 마케팅 헤드라인은 Noto Serif KR이 무거우면 Pretendard JP로 대체 가능
- Do: Noto Serif KR/JP의 "B" hierarchy는 SemiBold(600) 사용 — Bold(700) 직접 지정 금지
- Do: Averia "M" hierarchy는 Regular(400)으로 매핑 — 코드/Figma에서 Medium 적용 시도하면 fallback 발생
- Do: Averia italic은 AI 채팅 인사말 등 Tiro가 화자로 등장하는 모멘트에만
- Don't: 영어/일본어 마케팅 hero에 Pretendard JP 기본 사용 금지 (editorial weight 필요한 경우 Averia / Noto Serif JP)
- Don't: UI 기능 텍스트의 기본 폰트로 Averia 사용 금지 (가독성·신뢰도)
- Don't: 한 컴포넌트에 두 가지 초과 weight 혼용 금지
- Don't: Averia에 Medium weight 적용 금지 (해당 weight 미존재 — 시스템이 Regular로 fallback하거나 깨짐)
- Don't: Noto Serif KR/JP italic 사용 금지 (italic은 Averia 전용)