한 파일에, 모든 굵기를 담습니다.

제가 타입을 처음 맡았을 때, 디자이너가 “여기는 660 굵기로”라고 했습니다. 660? 폰트에는 Regular(400)랑 Semibold(600)밖에 없는데요. 그래서 600으로 욱여넣었고, 그게 어쩐지 어색했습니다. 가변 폰트를 만나고 나서야 알았습니다. 굵기는 계단이 아니라 다이얼이라는 걸요. 400과 700 사이의 모든 숫자가, 진짜로 존재합니다.

그래서, 직접 만져보세요

말보다 빠릅니다. 아래 슬라이더를 움직여 보세요. 폰트 파일은 단 하나인데, 굵기도 크기도 자간도 즉시 바뀝니다. 이게 가변 폰트입니다.

슬라이더를 움직이기 전에, 한 파일에서 굵기 축(wght)만 바꾸면 같은 문구가 어디까지 변하는지 단계별로 펼쳐 둡니다. 전부 폰트 하나에서 나오는 값입니다.

400과 700 사이의 540 같은 ‘중간 굵기’가 진짜로 존재한다는 것 — 앞에서 말한 ‘굵기는 계단이 아니라 다이얼’이 이 다섯 줄입니다.

가변 폰트가 정확히 뭐길래?

가변 폰트(variable font)는 OpenType 포맷의 확장입니다. 보통 폰트 하나에 굵기 하나가 들어 있다면, 가변 폰트는 한 파일 안에 ‘축(axis)’이라는 다이얼을 여러 개 넣어 둡니다. 가장 흔한 게 굵기(wght)이고, 너비(wdth), 기울기(slnt), 광학 크기(opsz) 같은 축도 있습니다. 한 축을 100에서 900까지 연속으로 움직일 수 있으니, 폰트 하나로 사실상 무한한 변형을 씁니다.

그럼 페이지가 정말 빨라지나요?

여기가 사람들이 가장 궁금해하는 지점입니다. 정답은 “쓰는 굵기 수에 달렸다”입니다. Light·Regular·Medium·Bold·Black을 다 쓴다면, 예전 방식은 파일을 다섯 개 받아야 합니다. 가변 폰트는 단 한 개를 받아 그 안에서 다섯 굵기를 모두 꺼냅니다. 네트워크 요청과 총 전송량이 줄죠. 다만 솔직히 적자면, 가변 파일 하나의 용량은 단일 굵기 파일보다 큽니다. 그래서 굵기를 한두 개만 쓰는 사이트라면 단일 폰트가 더 가벼울 수 있습니다. 손익 분기점은 보통 ‘굵기 4종 이상’입니다.

코드로는 어떻게 굵기를 부르나요?

표준 굵기는 그냥 font-weight: 540처럼 줘도 됩니다. 가변 폰트의 매력은 정수를 자유롭게 쓸 수 있다는 거죠. 그 외의 축은 font-variation-settings로 제어합니다.

.title {
  font-weight: 540;                /* 표준 속성 우선 */
  font-variation-settings:
    "wght" 540,                    /* 굵기 */
    "wdth" 92,                     /* 너비(살짝 좁게) */
    "opsz" 28;                     /* 광학 크기(제목용) */
}

실무 팁 하나. 굵기는 가능하면 font-weight로 주는 게 안전합니다. font-variation-settings만으로 굵기를 주면 다른 축을 새로 쓸 때 굵기가 기본값으로 리셋되는 사고가 납니다. 표준 속성과 축 제어를 섞어 쓸 때 가장 많이 나오는 버그입니다.

폰트가 늦게 뜨면 글자가 ‘툭’ 밀리던데요?

맞습니다. 웹폰트가 도착하기 전에는 브라우저가 시스템 폴백 폰트로 글자를 먼저 그립니다. 그런데 폴백 폰트와 웹폰트의 글자 크기·높이가 다르면, 웹폰트로 교체되는 순간 줄이 밀리며 레이아웃이 흔들립니다. 이게 Core Web Vitals의 CLS(누적 레이아웃 이동) 점수를 깎습니다.

/* 폴백 전용 @font-face — 시스템 폰트의 치수를 웹폰트에 맞춤 */
@font-face {
  font-family: "Body-fallback";
  src: local("Apple SD Gothic Neo"), local("Malgun Gothic");
  size-adjust: 103%;        /* 평균 글자폭 맞춤 */
  ascent-override: 88%;     /* 윗선 높이 맞춤 */
  descent-override: 22%;    /* 아랫선 높이 맞춤 */
}
body { font-family: "Pretendard", "Body-fallback", sans-serif; }

여기에 font-display: swap으로 “폰트 오기 전엔 폴백이라도 일단 보여줘”를 지시하고, 폰트는 WOFF2로 압축해 전송량을 줄입니다. 이 세 가지(가변 폰트 + size-adjust 폴백 + WOFF2)가 제가 거의 모든 사이트에서 함께 쓰는 조합입니다.

그래서 한글은요? 여기가 진짜 함정입니다

가장 솔직하게 적습니다. 한글 가변 폰트도 분명히 있고, 잘 만든 것도 많습니다. 그런데 한글은 글자 수가 라틴(수십 자)과 비교가 안 되게 많아서(수천~수만 자), 파일 자체가 무겁습니다. ‘한 파일’이라는 가변 폰트의 장점이, 한글에서는 ‘한 무거운 파일’이 될 수도 있다는 뜻입니다.

그래서 한글에서는 가변이냐 아니냐보다 서브셋(subset)과 압축이 더 중요합니다. 사이트에 실제로 쓰는 글자만 추려 내고(자주 안 쓰는 한자·기호 제거), unicode-range로 쪼개 필요한 조각만 받게 하고, WOFF2로 압축합니다. 또 하나 자주 쓰는 절충은 본문은 시스템 폰트, 제목·로고만 가변 웹폰트로 가는 방식입니다. 모바일에서 CJK 본문을 시스템 폰트로 두는 건 성능상 합리적인 선택입니다.

타입을 이렇게 보는 사람이, 사이트 전체의 ‘목소리’를 정합니다

폰트는 사이트가 입을 열기 전부터 말하는 첫 인상입니다. 한 글자의 굵기를 600이냐 540이냐로 고민하는 사람이라면, 줄 간격도 위계도 로딩 흔들림도 같은 태도로 다룹니다. Findable에서는 이런 타이포 디테일이 기본값입니다. 당신의 사이트, 어떤 목소리로 말하게 할까요?