Type Sets
폰트 파일을 받을 필요가 없습니다. jt-tokens.css를 링크하면 Pretendard·Figtree가 함께 실립니다.
<link rel="stylesheet" href="https://ds.janytree.app/v5/jt-tokens.css">세 가지 역할
| 역할 | 토큰 | 폰트 | 어디에 |
|---|---|---|---|
| 본문 (한글·영문 전부) | --font-base | Pretendard | 본문 · 제목 · UI 텍스트 |
| 숫자 | --font-num | Figtree | 가격 · 수량 · LOT · 문서번호 |
| 영문 대형 | --font-display | Figtree | 영문 대형 제목 · 태그라인 |
🚫
Figtree를 본문 라틴에 쓰지 마세요. Figtree·Inter 모두 베트남어 결합부호(ạ·ệ)가 없습니다. 베트남 거래처명·성분명이 들어오면 단어 중간에서 폰트가 바뀝니다.
두 벌 — Productive / Expressive
시스템은 하나이고 타입 세트만 두 벌입니다(IBM Carbon 방식).
| 세트 | 크기 | 언제 | 대상 |
|---|---|---|---|
| Productive (기본) | 12~32px | 사용자가 업무를 완료할 때 | PLM · 품질 · 관리자 · 폼 · 표 |
| Expressive | +40 / 48 / 56px | 사용자가 읽고 탐색할 때 | 브랜드 사이트 · 랜딩 · 표지 |
<section data-typeset="expressive">
<h1>피부 과학을 제품으로</h1> <!-- 56px로 자동 승격 -->
<p>본문은 16px 그대로입니다.</p>
</section>개별 요소만 쓰려면 .jt-display-lg / -md / -sm.
크기표 (Productive)
| 역할 | 토큰 | 크기 | 굵기 |
|---|---|---|---|
| display | --fs-4xl | 32px | 800 |
| h1 | --fs-3xl | 28px | 800 |
| h2 | --fs-2xl | 24px | 700 |
| h3 | --fs-xl | 20px | 700 |
| body-lg | --fs-lg | 18px | 400 |
| body | --fs-base | 16px | 400 |
| sm | --fs-sm | 14px | 400 |
| caption | --fs-xs | 12px | 400 |
바닥값: 본문 12px · 캡션 11px. 그 이하로 내려가지 않습니다.
40px 이상은 조판 규칙이 붙습니다
line-height: var(--lh-display); /* 1.15 */
letter-spacing: var(--ls-display); /* -0.02em */한글은 대형에서 자간이 벌어져 보이므로 음수 자간이 필요합니다. 모바일에서는 자동으로 한 단계 낮춰집니다.
인쇄물에서는
인쇄용 영문 서체도 Figtree입니다(Avenir에서 교체 — 라이선스 리스크 제거). 인쇄 · PDF 출력 참조.
근거와 실측 데이터(x-height·‘n’ 폭·베트남어 지원)는 타이포그래피.