📌 가변 폰트란?

한 파일 안에 굵기·기울기·너비 등 여러 축(axis)을 저장해 CSS로 무한 조절 가능한 폰트. Pretendard Variable, Inter Variable, Roboto Flex가 대표적.

장점: 파일 크기 1개로 끝 → 로딩 빠름. CSS로 font-weight: 437 같은 정밀 조절 가능.

⚡ CSS 사용법

@font-face {
  font-family: 'Pretendard';
  src: url('PretendardVariable.woff2') format('woff2-variations');
  font-weight: 100 900;  /* 범위 */
  font-display: swap;
}

.title { font-weight: 750; }
.body { font-weight: 420; }
.thin { font-weight: 250; }

📚 한글 가변 폰트 TOP 3

① Pretendard Variable

한국 디자이너 표준. 100~900 굵기. 가장 추천.

② Paperlogy

제니퍼 폰트. 따뜻한 휴머니스트. 본문에 적합.

③ Gowun Batang

구글 폰트 한국 명조. 가변 지원. 책 디자인용.

🎨 영문 가변 폰트 TOP 3

• Inter Variable: 디자이너·개발자 표준
• Roboto Flex: 구글, 가장 많은 축 지원
• Recursive: monospace ↔ sans 전환까지

⚠️ 주의사항

1. woff2-variations 형식 명시 필요
2. IE 지원 안 됨 (이제 무시해도 됨)
3. 파일이 일반 폰트보다 큼 (200~400KB) → 다른 굵기 파일 안 받으면 결과적으로 작음

🛠 도구

• 폰트 미리보기: 폰트 미리보기
• 한글 비교: 한글 폰트 비교
• 폰트 짝짓기: 폰트 페어링
• 그라데이션 텍스트: 그라데이션 텍스트

💡 꿀팁: Pretendard Variable + Inter Variable 조합이면 한영 통일감 99% 해결.