글꼴 하나로 달라지는 목소리

1. 파일 하나에 굵기가 전부 들어갑니다

예전에는 웹사이트에 글꼴을 올리려면 굵기마다 파일을 따로 준비해야 했습니다. 본문은 Regular, 강조는 Bold, 큰 제목은 Black, 파일도 세 개였죠. 이 공식을 바꾼 게 가변 폰트(Variable Fonts)입니다. 2016년 9월 폴란드 바르샤바에서 열린 타이포그래피 학회 ATypI에서 어도비, 애플, 구글, 마이크로소프트가 함께 OpenType 1.8을 발표했는데, 그 안에 가변 폰트가 들어 있었습니다. 굵기나 너비 같은 축을 파일 하나에 담아 두고, 그 사이 어떤 값이든 꺼내 쓰게 한 겁니다. 400과 700 사이에서 520 같은 값도 고를 수 있습니다. 지금은 주요 브라우저 어디서나 씁니다.

2. 숫자 하나로 조절하는 글자의 표정

CSS에서 가변 폰트를 다루는 방법은 생각보다 익숙합니다. 굵기는 늘 쓰던 font-weight에 1부터 1000 사이 숫자를 넣으면 되고, 너비는 font-stretch로 조절합니다. 표준으로 등록된 축은 굵기, 너비, 기울기, 이탤릭, 광학 크기 다섯 가지이고, 글꼴 디자이너가 직접 만든 축은 font-variation-settings로 다룹니다. 그레이드(GRAD) 축이 좋은 예입니다. 글자 폭은 그대로 두고 획 두께만 바꿔서, 마우스를 올렸을 때 글자가 굵어져도 옆 단어가 밀려나지 않습니다. 지난해 11월 구글이 자사 브랜드 글꼴을 여러 축의 가변 폰트로 다시 만든 Google Sans Flex를 무료로 푼 것도 같은 흐름으로 보입니다.

3. 한글 글꼴에서 더 크게 느껴지는 차이

요즘 국내 웹사이트에서 가장 자주 마주치는 글꼴을 꼽으라면 Pretendard가 빠지지 않을 겁니다. 길형진 디자이너가 Inter와 본고딕(Source Han Sans), M PLUS 1p를 바탕으로 다듬어 오픈 폰트 라이선스로 공개했고, 굵기 아홉 개와 가변 버전 Pretendard Variable을 함께 제공합니다. 1.3.9 버전 파일을 직접 열어 보면 굵기별 woff2 파일이 하나에 700~800KB 안팎, 아홉 개를 합치면 6.9MB쯤 됩니다. 가변 파일은 하나에 약 2MB라서 굵기를 세 가지만 써도 가변 쪽이 가볍습니다. 한글은 담을 글자가 워낙 많아 이 차이가 더 크게 벌어지죠. 굵기 하나만 쓰는 사이트라면 정적 파일이 낫고요.

4. 세컨드펭귄의 시선: 굵기도 브랜드의 말투입니다

글꼴을 정할 때 우리는 서체 이름만큼 굵기 체계를 오래 고민합니다. 같은 제목도 700이면 단호하게, 600이면 한결 부드럽게 들리거든요. 가변 폰트라면 그 사이 값도 고를 수 있어서, 어두운 배경에서 글자가 번져 보이지 않게 굵기를 살짝 낮추는 조정도 가능합니다. 이렇게 정한 숫자는 디자인 토큰으로 묶어 피그마와 코드에 같은 이름으로 넣고, 글꼴은 페이지에 쓰인 글자 묶음만 내려받는 Pretendard Variable 다이내믹 서브셋으로 불러옵니다. 굵기가 바뀌는 애니메이션은 재밌지만, 움직임 줄이기를 켠 사용자에게는 꺼 둡니다.