반응형 타이포그래피 시스템 설계 — 웹 가독성의 과학

1. Type Scale 이론

Type Scale은 폰트 크기들 사이에 수학적 비율을 적용해 일관된 시각적 계층을 만드는 방법입니다. 가장 많이 사용되는 비율은 Major Third (1.25)와 Perfect Fourth (1.333)입니다.

이 프로젝트(동지커뮤니케이션)는 Major Third(1.25) 기반으로 11 / 13 / 16 / 20 / 28 / 36 / 48px을 사용합니다.

2. CSS clamp()로 유동적 폰트 크기

clamp(min, preferred, max)는 뷰포트에 따라 폰트 크기가 자연스럽게 변하도록 만들어 미디어 쿼리 없이 반응형 타이포그래피를 구현합니다.

// clamp(최솟값, 선호값, 최댓값)
// 선호값: 뷰포트 폭에 비례 (vw 단위)

.hero-title {
  // 모바일 28px → 데스크탑 48px (선형 보간)
  font-size: clamp(28px, 4vw, 48px);
}

.section-title {
  // 20px → 36px
  font-size: clamp(20px, 3vw, 36px);
}

.body-text {
  // 14px → 16px (본문은 변화 폭을 작게)
  font-size: clamp(14px, 1.5vw, 16px);
}

// 계산식: preferred = (maxSize - minSize) / (maxVw - minVw) * 100vw
// 최소 vw=375, 최대 vw=1440 기준
// .hero-title: (48-28)/(1440-375)*100 = 1.878vw → 약 2vw

3. 줄간격과 자간

가독성의 70%는 폰트 크기가 아닌 줄간격(line-height)에서 옵니다. 한국어 텍스트는 영어보다 약 10~15% 더 넓은 줄간격이 필요합니다.

// SCSS 타이포그래피 믹스인
@mixin heading-xl {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;  // 대형 헤드라인은 자간 줄이기
}

@mixin body-text {
  font-size: clamp(14px, 1.5vw, 16px);
  line-height: 1.8;          // 한국어 본문 여유 줄간격
  letter-spacing: 0.01em;
}

@mixin label-small {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.06em;   // 소형 레이블은 자간 늘리기
  text-transform: uppercase;
}

4. 한글 웹폰트 최적화 (Pretendard)

Pretendard는 현재 한국 웹 디자인 표준에 가장 가까운 폰트입니다. 올바르게 로드하지 않으면 번들 크기가 5MB를 넘어 성능에 큰 영향을 줍니다.

<!-- ✅ 권장: Dynamic Subset (필요한 글자만 로드) -->
<link rel="preconnect" href="https://cdn.jsdelivr.net">
<link rel="stylesheet"
  href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css">

<!-- ❌ 지양: 전체 폰트 로드 (파일 크기 과다) -->
<link rel="stylesheet"
  href=".../pretendard.css">  <!-- 전체 로드 -->

// CSS 폰트 패밀리 설정
body {
  font-family:
    'PretendardVariable',  // Variable 폰트 (우선)
    'Pretendard',          // Static 폰트 (대비)
    -apple-system,         // macOS/iOS 시스템 폰트
    BlinkMacSystemFont,    // Chrome/macOS
    'Apple SD Gothic Neo', // 구형 macOS
    'Noto Sans KR',        // Android
    sans-serif;
}

// Variable 폰트 사용 시 font-weight를 정수 범위로
h1 { font-weight: 800; }   // Extra Bold
h2 { font-weight: 700; }   // Bold
p  { font-weight: 400; }   // Regular

Variable 폰트는 font-weight: 100~900 사이 모든 값을 지원하므로 여러 weight를 별도 로드할 필요가 없습니다.

5. SCSS 타이포그래피 시스템 구현

앞의 모든 내용을 종합한 실전 SCSS 타이포그래피 시스템입니다.

// _variables.scss — 타입 스케일 (Major Third 1.25)
$font-xs:   11px;   // 라벨, 배지
$font-sm:   13px;   // 보조 텍스트
$font-base: 16px;   // 본문 기준
$font-lg:   20px;   // 소형 제목
$font-xl:   28px;   // 섹션 제목
$font-2xl:  36px;   // 페이지 제목
$font-hero: 48px;   // 히어로 헤드라인
$font-mono: 'JetBrains Mono', 'Fira Code', monospace;

// _mixins.scss — 타이포그래피 믹스인
@mixin type-hero {
  font-size: clamp($font-2xl, 4vw, $font-hero);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

@mixin type-section-title {
  font-size: clamp($font-xl, 3vw, $font-2xl);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

@mixin type-body {
  font-size: $font-base;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.01em;
}

@mixin type-label {
  font-size: $font-xs;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

// 사용 예시
.hero-title    { @include type-hero; }
.section-title { @include type-section-title; }
.body-content  { @include type-body; }
.badge-label   { @include type-label; }