CSS 가변 굵기 적용법: 400·500·700 사이를 안전하게 쓰는 기준

가변 폰트 파일을 연결했다고 해서 모든 굵기가 자동으로 안전해지지는 않는다. @font-face에 범위를 어떻게 선언했는지, 디자인 토큰이 그 안의 값을 쓰는지, 브라우저가 실제 파일을 적용했는지 확인해야 한다. 400·500·700 사이를 쓰려면 숫자보다 역할이 먼저다.

본문 400 · 보조 강조 500 · 핵심 제목 700

공식 배포본과 축 범위를 확인한다

프리텐다드 공식 저장소는 가변 파일과 정적 파일을 따로 제공한다. 가져온 CSS의 font-face가 연속 weight 범위를 선언하는지 보고, 프로젝트가 실제로 어느 파일을 요청하는지 네트워크에서 확인한다. 정적 Regular 파일 하나를 가변 파일처럼 선언해서는 안 된다.

Google Fonts CSS2 API를 쓸 때도 요청한 축과 값이 URL에 반영됐는지 확인한다. 서비스가 자체 호스팅하는 파일과 외부 CSS를 섞으면 같은 family 이름 아래 다른 자산이 들어올 수 있으므로 출처를 하나씩 기록한다.

토큰은 적은 값으로 시작한다

본문 400, 버튼 500, 제목 700을 실제 화면에 놓고 대비가 충분한지 본다. 역할이 겹치면 550 같은 값을 추가하기 전에 크기와 색, 여백이 위계를 맡을 수 있는지 살핀다. 굵기 토큰은 수치 목록이 아니라 사용 규칙이다.

중간값이 필요한 경우 한 컴포넌트의 예외로 남기지 않는다. 이름, 쓰임, 지원하지 않는 환경의 대체값을 함께 정해 디자이너와 개발자가 같은 결정을 재현하게 한다.

450은 캡션, 550은 버튼: 이 구분이 작은 화면에서도 보이는가

합성 굵기를 눈과 도구로 찾는다

요청한 값이 파일 범위 밖이거나 폰트가 제대로 연결되지 않으면 브라우저가 가까운 굵기를 고르거나 인위적으로 두껍게 보이게 할 수 있다. 계산 스타일, 렌더링 폰트, 네트워크 파일을 함께 읽어 실제 적용을 확인한다.

font-synthesis를 설정했다면 지원 환경과 폴백 결과도 시험한다. 합성을 막았을 때 강조가 사라진다면 토큰이 실제 제공 굵기와 맞지 않는 신호다.

정적 대체와 화면 차이를 비교한다

같은 400·500·700을 정적 파일과 가변 파일로 각각 렌더링해 문장 폭, 획 두께, 줄바꿈을 비교한다. 패밀리가 같아도 배포본과 힌팅 차이 때문에 결과가 완전히 같다고 미리 단정하지 않는다. 브라우저와 운영체제도 기록한다.

작은 라벨, 긴 본문, 큰 제목을 한 화면에 넣어야 값마다 역할이 보인다. 확대 캡처만 보면 작은 크기에서 사라지는 대비를 놓칠 수 있다.

정상 파일 · 로딩 지연 · 가변 파일 미지원, 세 상태의 굵기를 확인

디자인 도구와 브라우저를 같은 기준에 맞춘다

디자인 도구가 가변 축을 읽는지, 내보낸 이미지가 같은 값으로 렌더링되는지 확인한다. 지원하지 않는 도구에서는 허용한 정적 인스턴스로 접고 그 규칙을 문서화한다. 시안과 코드가 각각 다른 500을 쓰지 않게 만드는 과정이다.

프리텐다드 상세에서 자산 정보를 확인한 뒤 폰트 시뮬레이터로 토큰 예문을 비교하자. 마지막에는 파일 URL, 선언 범위, 실제 토큰, 대체값 네 항목을 한 표에 남기면 유지보수가 쉬워진다.