가변 폰트(Variable Font)란, 파일 하나로 굵기가 바뀌는 원리를 열어서 확인했습니다

폰트를 내려받다 보면 이름 뒤에 "Variable"이 붙은 파일을 마주칠 때가 있습니다.

Thin, Light, Regular, Bold처럼 굵기별로 파일이 따로 있는 게 아니라 딱 하나뿐인데,

정작 적용해 보면 슬라이더로 굵기를 자유롭게 조절할 수 있어 신기하게 느껴집니다.

 

실제로 윈도우에 이미 들어 있는 가변 폰트와, 국내에서 많이 쓰는 오픈소스 가변 폰트를 열어 그 안의 구조를 직접 읽어 봤습니다.

 

Pretendard 실측. 정적 폰트 9종(Thin부터 Black까지)을 낱개로 합치면 13.4MB, 가변 폰트 파일 1개는 6.4MB로 45부터 930까지 전 구간을 연속으로 지원

 

fvar이라는 이름의 조절판

가변 폰트에는 fvar이라는 테이블이 있고, 여기에 "이 폰트가 어떤 축을 따라 얼마나 변할 수 있는지"가 적혀 있습니다. 대표적인 축이 굵기(wght)이고, 폭(wdth)이나 기울기(slnt) 같은 축을 함께 가진 폰트도 있습니다.

 

fontTools 4.63.0으로 윈도우에 기본 포함된 Bahnschrift와, 오픈소스로 배포되는 Pretendard Variable을 열어 fvar을 읽어 봤습니다.

폰트	축	최소~최대	기본값
Bahnschrift	wght(굵기)	300 ~ 700	400
Bahnschrift	wdth(폭)	75 ~ 100	100
Pretendard Variable	wght(굵기)	45 ~ 930	400

숫자로 보면 감이 잘 안 오실 텐데, 이 값들은 화면에서 굵기를 조절하는 슬라이더의 눈금과 그대로 대응합니다. wght가 45면 아주 가는 획, 930이면 아주 굵은 획입니다.

 

---

이름 붙은 스타일도 같이 들어 있습니다

축은 연속된 숫자 범위라 자유롭게 값을 넣을 수 있지만, 자주 쓰는 지점은 이름이 붙은 인스턴스로 미리 정의되어 있습니다. Bahnschrift에는 이런 인스턴스가 15개 들어 있었습니다.

Light            wght=300 wdth=100
SemiLight        wght=350 wdth=100
Regular          wght=400 wdth=100
SemiBold         wght=600 wdth=100
Bold             wght=700 wdth=100
Light SemiCondensed  wght=300 wdth=87.5
... (총 15개, 굵기 5단계 × 폭 3단계)

프로그램의 글꼴 목록에 "Bahnschrift SemiBold"처럼 여러 이름이 뜨는 이유가 여기 있습니다. 파일은 하나지만, 자주 쓰는 굵기와 폭 조합에 미리 이름표를 붙여 둔 덕분에 마치 여러 폰트가 있는 것처럼 골라 쓸 수 있는 것입니다.

 

 

파일 하나가 실제로 얼마나 이득일까

Pretendard는 굵기별 정적 파일도 따로 배포합니다.

Thin부터 Black까지 9개 정적 파일을 전부 내려받으면 얼마나 될지, 가변 폰트 파일 하나와 실제로 비교해 봤습니다.

 

구성	파일 수	합계 용량	지원 굵기
정적 파일 9종	9개	14,078,480 B (13.4MB)	미리 정해진 9단계만
가변 폰트 1개	1개	6,739,336 B (6.4MB)	45~930 사이 모든 값

9개를 다 받는 것보다 가변 폰트 하나가 오히려 절반 이하로 가볍고, 심지어 9단계 사이의 값까지 자유롭게 씁니다. 다양한 굵기를 두루 써야 하는 웹사이트라면, 정적 파일을 여러 개 받는 것보다 가변 폰트 하나가 유리한 이유입니다.

 

이름표 없는 굵기도 실제로 뽑아 봤습니다

9개 인스턴스는 미리 이름 붙은 지점일 뿐,

fvar의 진짜 강점은 그 사이 어디든 값을 넣을 수 있다는 데 있습니다.

이름표가 없는 wght=550(SemiBold 600과 Medium 500 사이) 지점을 fontTools의 instancer 기능으로 실제로 뽑아내 봤습니다.

 

from fontTools.varLib import instancer
from fontTools.ttLib import TTFont

f = TTFont("PretendardVariable.ttf")
inst = instancer.instantiateVariableFont(f, {"wght": 550})
inst.save("pretendard_wght550.ttf")

정상적으로 wght 550 하나로 고정된 폰트가 만들어졌습니다. 그런데 용량을 재 보니 3,124,880B로, 정적 배포판의 비슷한 굵기(SemiBold 1,583,704B)보다 오히려 2배 가까이 컸습니다. 처음엔 뽑아내는 과정에서 뭔가 최적화가 덜 된 줄 알았는데, 두 파일이 담긴 테이블 구성을 비교해 보니 이유가 따로 있었습니다.

 

 

내가 뽑은 인스턴스: glyf, loca, STAT, GDEF, GPOS, GSUB, cmap, ...
정적 배포판(otf) : CFF , GDEF, GPOS, GSUB, cmap, ...

가변 폰트 원본이 glyf 방식(윤곽선을 선분과 곡선 좌표로 풀어 적는 TrueType 저장 방식)으로 만들어져 있어서,

거기서 뽑아낸 인스턴스도 그대로 glyf를 씁니다. 반면 공식 정적 배포판은

더 압축된 CFF 방식(OpenType/PostScript 계열)으로 다시 만들어 배포합니다.

 

이 glyf와 CFF의 저장 효율 차이는 앞서 맑은 고딕과 아리따를 비교했던 글에서도

같은 크기로 확인한 적이 있는 차이라, 이번 결과가 우연이 아니라는 걸 뒷받침합니다.

 

 

즉 직접 뽑은 인스턴스가 큰 이유는 "최적화가 안 돼서"가 아니라 "글자 윤곽을 담는 방식 자체가 다른 파일을 기준으로 뽑았기 때문"입니다. 실제 서비스에 쓸 용도로 특정 굵기를 뽑아낸다면, glyf를 CFF로 다시 변환하는 후처리 단계를 거쳐야 정적 배포판 수준의 용량에 가까워집니다.

---

그렇다고 항상 가변 폰트가 정답은 아닙니다

상황	선택
한 페이지에서 굵기 두세 가지만 고정으로 씀	필요한 굵기만 정적 파일로, 용량이 더 작을 수 있음
굵기를 슬라이더처럼 다양하게 쓰거나 애니메이션	가변 폰트가 유리
아주 오래된 브라우저까지 지원해야 함	가변 폰트 미지원 가능성 있어 정적 파일 고려

실제로 쓸 굵기가 한두 개뿐이라면, 오히려 그 굵기만 담은 정적 파일이나 서브셋 쪽이 더 가벼울 수 있습니다.

굵기별 용량을 실제로 줄이는 서브셋 방식은 예전에 다룬 글에서 확인하실 수 있습니다.

 

 

자주 묻는 질문

Q. 가변 폰트인지 아닌지 어떻게 구분하나요?
파일을 열어 fvar 테이블이 있는지 확인하면 됩니다. 위 코드처럼 fontTools로 'fvar' in f를 확인하면 바로 나옵니다.

Q. 워드 같은 일반 프로그램에서도 슬라이더로 조절할 수 있나요?
프로그램마다 다릅니다. 미리 정의된 인스턴스(이름 붙은 스타일)만 골라 쓰게 하는 프로그램이 많고, 축을 자유롭게 조절하는 기능은 디자인 도구나 웹에서 더 흔합니다.

 

 

이름 뒤에 Variable이 붙은 파일 하나가, 사실은 여러 굵기를 미리 구워낸 게 아니라 그 사이를 계산으로 메우는 조절판을 통째로 담고 있다는 걸 알면, 다음에 폰트를 고를 때 굳이 여러 파일을 받아야 하는지부터 따져보게 될 것입니다.

 

 

위 축 범위와 인스턴스, 용량은 실제 폰트 파일을 fontTools로 직접 열어 fvar 테이블을 읽고, 정적 파일들의 실제 크기를 합산해 얻은 값입니다.

 

 

한컴 없이 hwp 열기, 확장자 바꾸기가 안 통하는 이유와 실제로 되는 방법

 

한글 폰트 하나가 13MB, 잘못 받은 게 아니라 글자 수 때문입니다

 

사진 옮겼더니 찍은 날짜가 전부 오늘, 촬영일이 진짜 사라지는 지점은 따로 있습니다