기초
글자
Pretendard 하나로 4개 언어. 역할별 크기, 언어별 행간·자간, 혼용 조판 규칙, 4개 언어 견본.
서체
Pretendard Variable(OFL) 하나로 4개 언어를 쓴다. 한글과 라틴이 한 메트릭으로 맞춰져 혼용 문단의 회색 농도가 같고, 가변 축 하나로 400–700을 쓰며, 스페인어 악센트와 고정폭 숫자(tnum)가 있다. 간체 한자는 Pretendard에 없어 시스템 서체(PingFang SC / Microsoft YaHei)로 넘긴다 — 한자 웹폰트는 싣지 않는다.
| 토큰 | 값 |
|---|---|
--cb-font-sans | … |
--cb-font-sans-zh | … |
--cb-font-mono | … |
--cb-text-min | … |
- 출시 경로(랜딩·/signup·/start) 웹폰트 합계 ≤ 120KB: latin 41KB + 한글 상위 300음절 58KB = 99.4KB. 나머지 한글은 unicode-range 조각으로 필요할 때만.
- font-display: swap. zh 화면은 latin 조각만 받는다.
- 서체 선택기·폰트 선택 기능은 만들지 않는다.
역할별 크기
크기 이름은 픽셀이 아니라 역할이다. rem 단위라 브라우저 글자 크기 설정을 따른다. 13px(footnote)이 바닥이고 10–11px 글자는 없다. display·display-xl은 랜딩 전용이고, 앱 화면 제목은 h1 40px(--cb-text-h1)이 최대다.
| 역할 | 크기 | 굵기 | 행간 ko / en·es / zh | 자간 ko / en·es / zh | 쓰는 곳 |
|---|---|---|---|---|---|
display-xl | … | … | … / … / … | … / … / … | 랜딩 데스크톱(≥1024) 헤드라인 전용 |
display | … | … | … / … / … | … / … / … | 랜딩 헤드라인 한 줄 |
title1 | … | … | … / … / … | … / … / … | 화면 제목 |
title2 | … | … | … / … / … | … / … / … | 섹션·시트 제목 |
title3 | … | … | … / … / … | … / … / … | 카드·위젯 M/L 제목 |
headline | … | … | … / … / … | … / … / … | 목록 행 제목, 버튼 |
body | … | … | … / … / … | … / … / … | 본문 |
callout | … | … | … / … / … | … / … / … | 밀도 높은 목록 보조 줄 |
footnote | … | … | … / … / … | … / … / … | 출처 줄, 라벨, 시각 (최소 크기) |
numeral-l | … | … | … | … | 위젯 큰 숫자 (tabular) |
numeral-m | … | … | … | … | 위젯 M 숫자 |
실제 컴포넌트: 역할 견본 (현재 언어)
display지난 30일 일정에서 잊었던 일title1지난 30일 일정에서 잊었던 일title2지난 30일 일정에서 잊었던 일title3지난 30일 일정에서 잊었던 일headline지난 30일 일정에서 잊었던 일body지난 30일 일정에서 잊었던 일callout지난 30일 일정에서 잊었던 일footnote지난 30일 일정에서 잊었던 일컴포넌트에서는 단축 이름을 쓴다: --cb-text-footnote / callout / body / lead(18), 제목 --cb-text-h1…h6(40 / 32 / 24 / 20 / 17 / 16), 부제목 --cb-text-subtitle-sm/md/lg(18 / 20 / 24). h6을 본문보다 작게 내리지 않는다 — 굵기로 단계를 낸다.
언어별 행간과 자간
한글은 글자면이 꽉 차서 라틴과 같은 행간이면 빽빽해 보이고, 한자는 더 그렇다. 그래서 :root:lang(…)로 토큰만 바꾸고 컴포넌트는 그대로 둔다. 위 표의 행간·자간 세 값은 semantic.css의 :root, :root:lang(en), :root:lang(zh) 규칙에서 직접 읽은 값이다.
- 이렇게한글 본문 자간은 0, 제목은 −0.01em까지. −0.02em은 56px display에서만.
- 이렇게 하지 않기한자에 음수 자간을 쓰지 않는다. 영문 기준의 과도한 음수 자간을 한글에 씌우지 않는다.
4개 언어 견본
같은 문장을 4개 언어로, 각 언어의 행간과 서체 스택으로 조판했다. 스페인어가 가장 길다(한국어 대비 약 +35%).
lang="ko" · body lh …2주 전 캘린더에 있던 일
분명 많은 일을 했는데, 설명하려니 생각나지 않을 때. 흩어진 업무 기록에서 당신의 기여를 찾아 Gmail·Google Calendar 원문과 함께 정리하세요. 3월 4일 14:20 회의 기록 12개.
Gmail · 3월 4일 14:20
lang="en" · body lh …On your calendar 2 weeks ago
You did a lot of work, but when you need to explain it, it’s hard to recall. Find your part in scattered records, with the Gmail and Google Calendar originals. 12 records from the Mar 4, 2:20 PM meeting.
Gmail · Mar 4, 2:20 PM
lang="zh-Hans" · body lh …2周前日历上的事
明明做了很多事，要说明时却想不起来。从分散的工作记录中找出你的贡献，并附上 Gmail 与 Google Calendar 原文。3月4日 14:20 会议记录 12 条。
Gmail · 3月4日 14:20
lang="es" · body lh …En tu calendario hace 2 semanas
Hiciste mucho trabajo, pero cuesta recordarlo cuando hay que explicarlo. Encuentra tu aportación en registros dispersos, con los originales de Gmail y Google Calendar. ¿Reunión del 4 mar, 14:20? 12 registros.
Gmail · 4 mar, 14:20
혼용 조판
- 한글 문장 안의 라틴·숫자는 같은 크기, 기준선 이동 없음. 폴백에서 차이가 보이면 서체 스택을 고치고 크기는 건드리지 않는다.
- 한국어 본문·제목은 word-break: keep-all, 긴 URL·파일명은 overflow-wrap: anywhere. 320px에서 넘치지 않는다.
- 중국어는 line-break: strict. 문장부호가 줄 머리에 오지 않고, 자간을 더하지 않는다.
- 스페인어는 hyphens: auto. 버튼은 2줄까지 허용하고 말줄임하지 않는다. 말줄임은 사용자 콘텐츠(기록 제목)에만.
- 제목은 text-wrap: balance, 본문은 text-wrap: pretty.
- 사용자 원문은 번역하지 않는다. 감지한 lang을 쓰고, 모르면 dir="auto"만. 언어를 추정해 표시하지 않는다.
- 4개 언어가 한 줄에 섞이면(언어 선택) 항목마다 lang을 단다.
- 대문자 eyebrow(ALL CAPS)는 쓰지 않는다. 한글·한자에는 대소문자가 없어 위계가 언어마다 달라진다.
굵기·숫자·폭
굵기
400 본문 · 500 각주와 라벨 · 600 헤드라인과 버튼 · 700 제목과 숫자. 300 이하와 800 이상은 쓰지 않는다(맑은 고딕 폴백에서 300 한글 획이 끊긴다).
숫자
위젯 숫자·시간·날짜·개수는 font-variant-numeric: tabular-nums. 본문 속 숫자는 비례폭. 큰 숫자 옆 단위는 footnote 500으로 기준선을 맞춘다. 숫자를 세어 올리는 애니메이션은 없다.
읽기 폭
--cb-measure-readable 65ch(한글 약 36자), --cb-measure-wide 80ch. 본문 문단은 readable을 넘지 않는다.