가변 글꼴(Variable Font)은 하나의 폰트 파일 안에 여러 스타일(굵기, 너비, 기울기 등)의 연속적인 변형을 포함할 수 있는 타이포그래피 기술이다. 전통적인 고정 스타일 폰트가 각각 별도의 파일(예: Regular, Bold, Italic)로 제공되는 것과 달리, 가변 글꼴은 단일 파일에 다중 축(axis)과 그 축을 따라 변할 수 있는 파라미터(parameter)를 정의함으로써 무한에 가까운 스타일을 실시간으로 생성한다.
역사
- 2016년 마이크로소프트, 어도비, 애플, 구글 등 주요 서체 기업이 공동으로 제정한 OpenType Font Variations(OpenType 1.8) 사양에 따라 표준화되었다.
- 초기 연구는 1990년대 후반에서 2000년대 초반에 걸쳐 진행됐으며, 가변 글꼴은 특히 웹 및 모바일 환경에서 파일 용량 절감과 디자인 유연성을 목표로 도입되었다.
기술적 구성
| 구성 요소 | 설명 |
|---|---|
| 축(axis) | 가변 글꼴이 제공하는 변형 차원(예: wght(weight), wdth(width), ital(italic), opsz(optical size) 등) |
| fvar 테이블 | 축과 각 축의 최소·최대·기본값을 정의 |
| gvar 테이블 | 글리프(문자)의 형태 변형 데이터를 저장 |
| avar 테이블 (선택적) | 축 값에 대한 보정 곡선을 제공 |
| cvar / cvt 등 | 기존 OpenType 테이블과의 호환성을 유지 |
이러한 테이블을 통해 렌더링 엔진은 사용자가 지정한 축 값에 따라 실시간으로 글리프를 보간(interpolation)한다.
파일 형식
- 일반적인 OpenType 파일(
.ttf,.otf) 형식을 그대로 사용하지만, 가변 글꼴 전용 메타데이터가 포함된다. - 파일 확장자는 기존과 동일하므로 기존 폰트 관리 시스템과의 호환성이 유지된다.
웹에서의 활용
- CSS
@font-face규칙에font-variation-settings속성을 사용해 축 값을 지정한다. 예시:@font-face { font-family: 'ExampleVariable'; src: url('example-variable.woff2') format('woff2'); } h1 { font-family: 'ExampleVariable'; font-variation-settings: 'wght' 700, 'wdth' 75; } font-weight,font-stretch,font-style등 기존 CSS 속성으로도 일부 축을 제어할 수 있다.
지원 브라우저(2026년 기준)
| 브라우저 | 지원 버전 |
|---|---|
| Chrome | 61 이상 |
| Edge | 79 이상 (Chromium 기반) |
| Firefox | 62 이상 |
| Safari | 11.1 이상 |
| Opera | 48 이상 |
모바일 브라우저(Chrome for Android, Safari iOS 등) 역시 대부분 지원한다.
장점
- 파일 크기 절감: 여러 고정 스타일을 별도 파일로 제공할 경우 발생하는 중복 데이터를 하나의 파일로 통합한다.
- 디자인 유연성: 디자이너가 미세한 가중치 조절을 통해 일관된 타이포그래피를 구현할 수 있다.
- 반응형 레이아웃: 화면 해상도·크기에 따라 자동으로 최적화된 서체를 선택 가능.
한계·과제
- 일부 구형 운영체제·앱에서는 가변 글꼴을 인식하지 못한다.
- 디자인 툴 및 인쇄 워크플로에서 아직 가변 글꼴 지원이 완전하지 않은 경우가 있다.
- 축 설계와 보간 품질은 폰트 제작자의 구현 능력에 따라 차이가 발생한다.
관련 표준·문서
- OpenType Font Variations Specification (Microsoft, Adobe, Apple, Google)
- CSS Fonts Module Level 4 (W3C) –
font-variation-settings정의
참고
가변 글꼴은 현대 디지털 타이포그래피에서 점차 보편화되고 있으며, 웹·앱·디지털 디스플레이의 효율성을 높이는 핵심 기술로 평가받는다.