← DIVEROID 브랜드 시스템 홈한국어EN
폰트·글자 규칙
빠른 답
- 영문: Pangram Sans ✅ 사용 가능 (라이선스 보유)
- 한글: Spoqa Han Sans Neo ✅ 사용 가능
- 설치 파일 (Regular/Medium/Semibold 포함):
- 오피스 도구(Google Docs·Slides·Notion 등) 폴백: 영문 Arial, 한글 Apple SD Gothic Neo (Windows는 맑은 고딕). 로컬에 Pangram Sans를 설치해도 Google Docs·Slides에 자동으로 추가되지 않습니다 — 웹 기반 도구에서는 폴백 폰트를 사용하세요.
- 본문은 Regular(400), 제목과 숫자는 Medium(500)
폰트 설치법 (맥)
- 위의 Pangram Sans와 Spoqa Han Sans Neo 설치 파일을 연다
- 폰트 파일을 더블클릭한다
- "서체 설치" 버튼을 누른다 — 끝
크기 스케일
| 이름 | 크기 | 언제 쓰나 |
|---|
| Display 01 | 3.5rem (56px) | 히어로 문장, 캠페인 대표 카피 |
| Display 02 | 2rem (32px) | 페이지 제목, 큰 섹션 제목 |
| Display 03 | 1.75rem (28px) | 섹션 제목, 큰 패널 제목 |
| Display 04 | 1.5rem (24px) | 패널 제목, 마케팅 블록 제목 |
| Headline 01 | 1.125rem (18px) | 카드 제목, 모듈 제목 |
| Headline 02 | 1rem (16px) | 작은 제목, 리스트 구역 제목 |
| Body 01 | 0.9375rem (15px) | 기본 본문, 짧은 설명 |
| Body 02 | 0.8125rem (13px) | 보조 설명, 도움말, 작은 라벨 |
| Caption | 0.75rem (12px) | 캡션, 낮은 강조 메모 |
| Caption S | 0.6875rem (11px) | 타임스탬프, 아주 작은 라벨 (버튼·경고에는 금지) |
CSS로 만들 때는 _system/tokens/diveroid.css의 --dv-font-size-* 변수를 그대로 쓴다.
자간 (글자 사이 간격)
| 어디에 | 한글 | 영문 |
|---|
| 제목 (28px 이상) | −2% | −1% |
| 본문 | −1% | 0 |
| 캡션 | 0 | 0 |
| 숫자·다이브 데이터 | 0 | 0 |
- 한글 본문 줄간격은 넉넉하게 (1.45 이상). 레이아웃 맞추려고 줄간격 줄이지 않기.
- 한글은 단어 중간에서 줄이 끊기지 않게 (
word-break: keep-all).
굵기
| 굵기 | 어디에 |
|---|
| Regular 400 | 본문, 긴 설명 |
| Medium 500 | 제목, 숫자·데이터 |
| Semibold 600 | 강조, 버튼, 배지 |
숫자·다이브 데이터
- 수심, 시간, 온도 같은 숫자는 Pangram Sans Medium + tabular 숫자(자릿수 폭이 같은 숫자)로. CSS:
font-variant-numeric: tabular-nums
- 단위는 숫자에 붙여서:
32.4 m, 48 min
- 데이터가 없으면 0으로 보여주지 말고 "없음"으로 표시
하지 말 것
- ⛔ 취향대로 다른 폰트 쓰기 — 위 두 폰트와 폴백만 쓴다
- ⛔ 큰 Display 글자를 경고, 상태 표시, 빽빽한 데이터 화면에 쓰기
- ⛔ 한글 줄간격·자간을 영문 기준으로 좁히기
편집 원본