Foundations · 03

Typography

Geist의 4-카테고리 스케일을 한국어 우선으로 재정렬했습니다. **Heading 72→16 · Copy 24→16 · Label 20→16 · Button 16** — 모두 16px 이상이며, letter-spacing: −0.01em이 자동 적용됩니다.

Font families

두 가족만 사용합니다. 다른 폰트(Inter · Roboto · Noto · 시스템 mono 등) 금지.

함께만드는세상 Pretendard Variable 기본 가족 · var(--ff) · 한글 우선
Aa Bb 123 Satoshi 영문 강조 · var(--ff-en) · .t-en 유틸

Headings

9 sizes

큰 타이틀에서 작은 라벨까지. 시각 위계는 *크기 + weight*로 만들고, 색상은 통일(--c-ink-deep). 같은 페이지에서 Heading 72는 1회만, 32 이상은 섹션 헤더로, 24 이하는 카드·블록 헤더로.

.t-heading-72 72 · 700 · LH 1.1 함께
.t-heading-64 64 · 700 · LH 1.15 함께만드는
.t-heading-56 56 · 700 · LH 1.18 함께만드는세상
.t-heading-48 48 · 700 · LH 1.2 함께만드는세상
.t-heading-40 40 · 700 · LH 1.25 함께 만드는 커리큘럼
.t-heading-32 32 · 700 · LH 1.3 함께 만드는 커리큘럼
.t-heading-24 24 · 700 · LH 1.35 함께 만드는 커리큘럼
.t-heading-20 20 · 600 · LH 1.4 함께 만드는 커리큘럼
.t-heading-16 16 · 600 · LH 1.5 함께 만드는 커리큘럼

15·14·13·12px 헤딩은 시스템에서 제외 — BSS hard rule §1.2 (최소 16px) 준수.

Copy

4 sizes · Strong modifier

본문. <strong>으로 부분 강조 가능 — weight 600 + 색상 ink-deep으로 자동 변환되며, font-style: italic은 강제로 normal 처리됩니다.

.t-copy-24 24 · 400 · LH 1.6

도구는 수단, 일하는 방식이 본체입니다.

.t-copy-20 20 · 400 · LH 1.6

도구는 수단, 일하는 방식이 본체입니다.

.t-copy-18 18 · 400 · LH 1.7

도구는 수단, 일하는 방식이 본체입니다.

.t-copy-16 16 · 400 · LH 1.6

도구는 수단, 일하는 방식이 본체입니다.

Labels

3 sizes

폼 라벨, 카드 메타, UI 라벨. weight 600 기본. 액션 가능한 텍스트가 아닐 때 사용 (액션은 Button).

.t-label-20 20 · 600 · LH 1.4 신청서 작성
.t-label-18 18 · 600 · LH 1.5 이메일 주소
.t-label-16 16 · 600 · LH 1.5 관심 분야

Buttons

1 size

버튼 라벨 전용 타입. Geist는 12·14·16 세 사이즈를 가지지만 BSS는 한글 가독성 최소 16px 한 사이즈만. 버튼 자체는 padding으로 사이즈 변형 (.btn-sm · .btn · .btn-lg).

.t-button-16 16 · 600 · LH 1.5 함께 시작하기

Legacy aliases

v2-preview 시절의 .t-h1...t-h4 · .t-body · .t-caption · .t-button 8개 클래스는 그대로 유지됩니다 (landing-example.html·components.css 호환). 신규 페이지는 위 카테고리 클래스를 권장.

Mapping

  • .t-h1 → .t-heading-64 (64px · 800 weight)
  • .t-h2 → .t-heading-56
  • .t-h3 → .t-heading-40
  • .t-h4 → 27px (legacy 전용 — 새 페이지는 24 또는 32 사용)
  • .t-body → .t-copy-18
  • .t-body-strong → .t-copy-18에 <strong>
  • .t-caption → .t-copy-16 (단, 색이 grey)
  • .t-button → .t-button-16

Tracking

모든 타이포 유틸은 letter-spacing: var(--tracking) = −0.01em 자동 적용. 한글·영문·숫자 통일. 인라인 letter-spacing 추가 금지.

Rules

DO

  • 카테고리 클래스(.t-heading-*·.t-copy-*·.t-label-*·.t-button-16) 안에서 해결.
  • 모든 텍스트 ≥ 16px.
  • 강조는 <strong> 또는 색상 변경.

DON'T

  • 새 폰트 가족 금지 — Pretendard + Satoshi.
  • 15·14·13·12px 어디에도 금지.
  • 이탤릭 금지 — <em>·<i>도 normal로 강제.
  • 인라인 font-size·letter-spacing 금지.