7. 타이포그래피 — 한글 기반 · 영어 필수 · 다국어 안정

7-1. 폰트 역할 〔v5.0 재정의 — 2분할 → 3역할〕

v4.0은 “한글=Pretendard / 영문·숫자=Figtree”였습니다. 그런데 Pretendard의 라틴은 Inter 파생이고(x-height/cap 비율 0.750으로 Inter와 동일), 여기에 다른 영문 폰트를 본문에 섞으면 통일감이 오히려 깨집니다.

Inter는 채택하지 않습니다 — Pretendard 라틴이 Inter 파생이라 중복 로드입니다. Noto Sans도 제외 — ‘n’ 폭이 Pretendard 대비 +11%로, 혼용하면 라틴만 늘어져 보입니다.

⚠️ Figtree를 본문 라틴에 쓰지 마세요. Figtree·Inter 모두 베트남어 결합부호(ạ·ệ)가 없습니다. 베트남 거래처명·성분명이 들어오면 단어 중간에서 폰트가 바뀝니다. Pretendard는 보유하고 있으므로, 본문을 Pretendard 단독으로 두면 자동으로 회피됩니다.

실측 근거 (1000 UPM 정규화, Regular)

7-2. 폰트 스택 · 웹폰트 로드 절차 〔v5.0 구조 변경〕

v4.0의 구조적 결함: 폰트 로드 <link>를 각 HTML에 손으로 복붙하는 방식이라, 빠뜨린 곳은 폰트가 적용되지 않았습니다. 2026-08-21 실측 결과 — 토큰 뷰어·브랜드 배포판에는 있으나 정본 jt-tokens.css와 개발자센터에는 없었습니다. 즉 “토큰 파일만 가져다 쓰라”는 시스템의 정식 안내를 따른 앱은 폰트가 안 실렸습니다.

v5.0 조치: 웹폰트 로드를 jt-tokens.css 최상단에 @import로 내장합니다.

<link rel="stylesheet" href="/jt-tokens.css">   <!-- 이것만으로 폰트 포함 -->

복붙 누락이 구조적으로 불가능해집니다.

속도가 중요한 페이지(랜딩·첫 진입)는 @import가 CSS 로드 후 순차 요청이라 한 박자 늦습니다. 이 경우 <head>에 <link>를 직접 넣고 토큰 파일의 @import 두 줄을 주석 처리하세요. 함께 넣을 것:

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

폰트 스택 — 웹폰트가 실패해도 각 OS 기본 폰트로 안정적으로 보이도록 폴백을 겹칩니다.

--font-base:"Pretendard Variable",Pretendard,"Noto Sans SC","Noto Sans TC",
  -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Segoe UI",
  "PingFang SC","Microsoft YaHei","PingFang TC","Microsoft JhengHei",
  "Leelawadee UI","Thonburi","Noto Sans Thai",                    /* 태국어 — v5.0 추가 */
  "Nirmala UI","Kohinoor Devanagari","Noto Sans Devanagari",      /* 인도계 — v5.0 추가 */
  "Helvetica Neue",Arial,sans-serif;
--font-num:"Figtree","Pretendard Variable",Pretendard,ui-monospace,sans-serif;
--font-display:"Figtree","Pretendard Variable",Pretendard,sans-serif;

태국·인도계는 웹폰트 파일을 추가하지 않고 OS 시스템 폰트를 이름으로 명시만 했습니다(용량 증가 0). 목적은 렌더링 통제권 확보입니다. 아랍어 등 그 외 문자는 OS 기본 폴백에 위임합니다.

폴백 동작: 웹폰트 로드 실패 시 한글은 Apple SD Gothic Neo(Mac) / Malgun Gothic(Windows)로 떨어집니다. 이는 설계대로 작동하는 안전장치이며, display=swap으로 글자는 즉시 보입니다.

7-3. 언어별 안정화 규칙 〔v5.0 개정 — 다국어 견고성〕

• 최소 글자 크기 12px — 어떤 언어·기기에서도 그 이하로 내려가지 않게
• 중문 행간을 한글보다 약간 넓게 — CJK는 line-height 1.6~1.7 권장
• 숫자는 font-variant-numeric: tabular-nums — 표·금액 세로 정렬 흔들림 방지
• 줄바꿈 〔v5.0 전면 교체〕
  • keep-all은 한국어에만: :lang(ko){word-break:keep-all} 중국어·일본어·태국어 등 무공백 언어에 걸면 문장 전체가 한 단어로 취급되어 가로 스크롤·레이아웃 붕괴가 발생합니다. v4.0의 “한글·중문 본문은 keep-all”은 잘못된 규칙이었고 삭제했습니다.
  • 전역 안전망: :where(body){overflow-wrap:anywhere} DB에 저장된 lang 표시 없는 외국어 데이터(거래처명·주소)·긴 URL이 컨테이너를 뚫지 못하게 합니다.
  • 자동 번역은 <html lang>을 대상 언어로 바꾸므로 :lang() 구조가 자동으로 올바르게 작동합니다.
  • 긴 코드·URL은 break-all 유지.
• 행간 안전 〔v5.0 신설〕
  • --lh-tight(1.35)는 라틴·한글 제목 전용입니다. 태국어·데바나가리처럼 모음 부호가 위아래로 쌓이는 문자가 섞일 수 있는 본문·데이터 셀은 --lh-snug(1.45) 이상.
  • 다국어 데이터가 들어가는 셀·카드에 고정 height + overflow:hidden 조합 금지 (모음 부호가 세로로 잘림).

7-4. 타입 세트 2벌 〔v5.0 신설〕

국내 디자인 시스템의 타입 스케일이 대체로 좁은(11~30px) 이유는 업무용 도구를 기준으로 만들어졌기 때문입니다. 반면 Apple·IBM Carbon이 56px까지 두는 이유는 브랜드·에디토리얼 화면을 같은 시스템으로 커버하기 때문입니다. 제니트리는 업무도구(PLM·품질)와 브랜드 페이지(개발자센터·랜딩)를 둘 다 만들므로 두 벌이 필요합니다.

그러나 디자인 시스템을 둘로 쪼개지는 않습니다. 색·간격·라운드·그림자·모션·로고·컴포넌트·접근성 등 공통 90%를 두 곳에 적으면, CI↔DS 어긋남 4건 사례가 그대로 재발합니다. IBM Carbon 방식대로 하나의 시스템 안에 타입 세트만 두 벌 둡니다.

사용법

<section data-typeset="expressive">
  <h1>피부 과학을 제품으로</h1>   <!-- 56px로 자동 승격 -->
  <p>본문은 16px 그대로입니다.</p>
</section>

해당 영역 안의 h1/h2/h3가 각각 56/48/40px로 승격됩니다. 개별 요소만 쓰려면 유틸리티 .jt-display-lg/md/sm.

대형 크기 조판 규칙 (40px 이상 필수)

line-height: var(--lh-display);    /* 1.15 */
letter-spacing: var(--ls-display); /* -0.02em */

한글은 대형에서 자간이 벌어져 보이므로 음수 자간이 필요합니다. 모바일(≤639px)에서는 자동으로 한 단계씩 낮춰 가로 넘침을 방지합니다.