02 · Design Style / 타이포그래피
타이포그래피Typography
한글·영문 모두 Pretendard Variable 하나로 통일합니다. Pretendard는 Latin 글리프를 자체 포함하고 있어 숫자·라벨까지 동일한 톤으로 유지됩니다. 읽기 경험을 최우선으로 한 8단계 타입 스케일이 기본입니다.
기본 글꼴 — Pretendard Variable
주님의교회 PCL의 모든 문자는 Pretendard Variable로 설정됩니다. 가변 폰트라 100–900 가중치를 단일 파일로 사용하며, 한글·영문·숫자의 눈높이가 맞아 에디토리얼 톤을 유지합니다.
코드·숫자가 집중되는 영역(테이블, 토큰 테이블, 카드 메타)에는 JetBrains Mono를 mono 폰트로 사용합니다.
Pretendard Variable
주님이 주인
되시는 교회.
The Church where the Lord is Master.
0123456789 · Aa Bb Cc · 한글 영문 숫자
타입 스케일
8단계 스케일로 본문부터 히어로까지 커버합니다. 각 단계는 토큰으로 노출되어 있어 --text-h1, --text-body 처럼 참조할 수 있습니다.
| 토큰 | 크기 | 줄높이 | 자간 | 용도 |
|---|---|---|---|---|
| display | 48px | 1.2 | -0.025em | 홈 히어로 제목 |
| h1 | 32px | 1.25 | -0.015em | 페이지 제목 |
| h2 | 24px | 1.35 | -0.01em | 섹션 제목 |
| h3 | 18px | 1.45 | -0.005em | 서브섹션 |
| body | 15px | 1.7 | 0 | 본문 기본 |
| small | 14px | 1.6 | 0 | 메타·캡션 |
| caption | 13px | 1.5 | 0 | 라벨·주석 |
| eyebrow | 12px | 1.3 | 0.08em | 아이브로·대문자 태그 |
실제 크기로 보기
Display 48px
H1 32px — 페이지 제목
H2 24px — 섹션 제목
H3 18px — 서브섹션
Body 15px — 본문 기본. 가장 자주 쓰이는 크기로, 약 60자(60ch) 내외의 너비와 1.7의 줄높이로 읽기 편한 흐름을 만듭니다.
Small 14px — 메타 정보·캡션. 본문보다 한 단계 작고 muted 컬러를 사용합니다.
Caption 13px — 라벨·주석·파생 정보.
Eyebrow 12px — Category label above titles
가중치
주님이 주인 되시는 교회
본문·기본 UI
주님이 주인 되시는 교회
라벨·강조
주님이 주인 되시는 교회
제목·버튼
주님이 주인 되시는 교회
페이지 타이틀·히어로
사용 원칙
1. 최대 3단계 위계 — 한 화면에서 사용하는 텍스트 크기는 보통 3–4개로 제한합니다. H1 → H2 → Body → Meta 정도면 충분합니다.
2. 제목은 자간 음수(-), 본문은 0 — 큰 글자는 시각적으로 글자 사이가 벌어져 보여 살짝 조여줍니다. 본문은 기본 자간을 유지합니다.
3. 본문 너비는 ~60ch — 한 줄이 60자(약 600px)를 넘어가면 눈이 다음 줄 시작을 찾기 힘들어집니다. max-w-[60ch]를 기본으로 삼으세요.
4. 라벨은 eyebrow 스타일 — 12px, 대문자, 자간 0.08em, muted 컬러. 섹션 위의 카테고리 라벨 등 반복되는 메타에 사용합니다.