가변 폰트는 굵기 9개를 대신할까: 프리텐다드·Gothic A1·Hahmlet

가변 폰트 한 파일이 굵기 아홉 개를 모두 대신한다는 설명은 매력적이다. 그러나 제품이 실제로 쓰는 굵기가 세 개뿐일 수도 있고, 디자인 도구나 배포 환경이 같은 축을 다루지 못할 수도 있다. 파일 수와 표현 범위를 함께 봐야 가변 폰트의 이득을 제대로 판단할 수 있다.

얇은 안내 300 · 본문 400 · 강조 600 · 제목 800

정적 파일과 가변 축을 구분한다

프리텐다드 공식 저장소는 정적 아홉 굵기와 가변 배포본을 제공한다. 같은 패밀리여도 어떤 CSS를 불러왔는지에 따라 사용할 수 있는 방식이 달라진다. 파일명과 font-face의 font-weight 선언을 보고 현재 환경이 범위를 읽는지 확인한다.

Gothic A1은 카탈로그에 아홉 개 정적 굵기와 비가변 폰트로 기록돼 있다. 굵기 수가 많다는 사실과 연속 축을 제공한다는 사실은 다르다. Hahmlet도 공식 specimen과 실제 배포 CSS를 기준으로 필요한 굵기와 축을 확인한다.

제품이 쓰는 굵기 수부터 센다

본문 400, 강조 600, 제목 800만 쓴다면 정적 세 파일과 가변 파일을 비교하면 된다. 존재하는 아홉 굵기를 모두 내려받는 구성을 기본값으로 놓아서는 안 된다. 페이지별 사용량과 캐시 재사용까지 포함해 네트워크 기록을 본다.

마케팅 페이지처럼 300부터 900까지 폭넓게 쓰는 화면과 관리 도구처럼 400·600만 쓰는 화면은 답이 다를 수 있다. 한 서비스 안에서도 역할별 전략을 나눌 수 있다.

Weight 450과 500의 차이가 실제 위계에 필요한가?

중간값은 디자인 언어로 관리한다

가변 축은 450이나 575 같은 중간 굵기를 쓸 수 있게 하지만 값이 많아질수록 팀의 선택 기준이 흐려진다. 먼저 토큰 세 개로 화면을 만들고, 해결되지 않는 대비가 있을 때만 중간값을 추가한다. 추가한 값은 용도와 예문을 함께 남긴다.

작은 본문에서 450과 500의 차이가 보이지 않거나 브라우저마다 다르게 느껴진다면 세밀한 숫자가 품질을 보장하지 않는다. 인쇄 캡처와 실제 기기에서 같은 역할이 유지되는지 본다.

도구 사이 결과를 대조한다

디자인 파일, 브라우저, 이미지 내보내기에서 같은 폰트 파일과 축 값을 쓰는지 확인한다. 도구가 중간값을 지원하지 않아 가까운 정적 굵기로 접으면 시안과 구현이 달라질 수 있다. 폰트 이름만 같다는 이유로 동일한 자산이라고 보지 않는다.

브라우저 계산 스타일과 네트워크 요청을 읽고, 디자인 도구에서는 파일 정보와 인스턴스 이름을 기록한다. 협업 문서에는 허용 범위보다 실제 토큰 값을 앞에 둔다.

본문 400 / 버튼 600 / 제목 800, 세 단계가 화면에서 충분히 갈리는가

가변 파일은 실제 페이지에서 결정한다

최초 방문과 재방문, 굵기 하나만 쓰는 페이지와 여러 굵기를 쓰는 페이지를 각각 비교한다. 로딩 시간만 보지 말고 텍스트가 바뀌며 움직이는지, 지원하지 않는 환경에서 어떤 굵기로 보이는지까지 적는다.

프리텐다드 상세에서 굵기와 공식 경로를 확인하고 폰트 시뮬레이터에 300·400·600·800 문구를 놓자. 가변 폰트가 필요한지 묻기 전에 우리 화면이 몇 단계를 쓰는지 답하면 선택이 훨씬 단순해진다.