Variable fonts, 2016년 4사 공동 발표

한 줄로

하나의 폰트 파일에 모든 두께, 기울기를 담는 기술입니다. 2016년 Adobe, Apple, Google, Microsoft가 동시에 표준을 발표했습니다.

어디서 왔나

이전 방식은 폰트의 두께를 바꾸려면 별도 파일이 필요했습니다. Light, Regular, Medium, Bold, Black. 각각 다른 .ttf 파일입니다. 웹사이트가 한 폰트의 5가지 두께를 쓰면 5개 파일을 다운로드해야 했습니다.

2016년 9월, 워싱턴 DC의 ATypI(국제 타이포그래피 협회) 컨퍼런스에서 사상 첫 일이 일어났습니다. Adobe, Apple, Google, Microsoft 4개사가 공동으로 새 표준을 발표했습니다. OpenType 1.8 Variable Fonts입니다.

핵심 아이디어는 하나의 폰트 파일에 여러 축(axis)을 정의하는 것입니다. 사용자가 그 축의 값을 자유롭게 조정합니다.

• weight (두께): 100 (Thin) ↔ 900 (Black) 사이 모든 값.
• width (너비): Condensed ↔ Expanded.
• slant (기울기): 0° ↔ 12°.
• optical size: 작은 크기용 vs 큰 크기용.

장점

1. 파일 크기 절약: 5개 두께 → 1개 파일. 보통 30~50% 절약.
2. 무한 두께: 400과 500 사이 = 450, 그 사이의 425. 모든 값 가능.
3. 부드러운 애니메이션: 두께가 동적으로 변하는 효과.
4. 자동 최적화: 화면 크기에 따라 폰트가 자동 조정.

대표 variable font

• Inter: 무료, 웹 최적화. 거의 모든 SaaS의 표준.
• Roboto Flex: Google의 confident variable.
• Recursive: variable + monospace 동시 지원.
• Pretendard Variable (한국, 길형진, 2021): 한국어 variable의 결정판.

CSS에서

@font-face {
  font-family: 'Inter';
  src: url('Inter-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;  /* 범위 명시 */
}

.heading {
  font-family: 'Inter';
  font-weight: 425;  /* 임의 값 가능 */
  font-variation-settings: 'wght' 425, 'slnt' -5;
}

한계

브라우저 지원은 2024년 기준 거의 100%지만, 일부 디자인 도구는 여전히 완벽 지원이 어렵습니다. Figma는 2022년 본격 지원했습니다.

바이브 메이커가 챙길 한 가지

웹 사이트에서 여러 폰트 두께를 쓴다면 variable font로 전환하는 게 성능에 좋습니다. Pretendard Variable 한 파일이면 한국 웹의 거의 모든 두께 필요를 커버합니다. 로딩 속도가 의외로 크게 개선됩니다.

관련

Web fonts · WOFF · FOUT