🎹 가변 폰트 축 설정 가이드 | 어느 값이 유효할까?

축 목록 (한 줄에 하나 — '태그 최소 최대 희망값')

출력 방식

붙여 쓸 CSS

축별 정리

태그	입력한 지원 범위	희망값	판정	고수준 속성

권장 축 값은 제시하지 않습니다. 가변 폰트마다 축의 최소·최대가 달라 공통으로 쓸 수 있는 값이 없기 때문입니다. 폰트가 공표한 범위를 그대로 넣으면 희망값이 그 안에 드는지만 대조하고(경계 포함), 벗어나면 브라우저가 자르는 경계값으로 코드를 만듭니다. 태그는 소문자 4자가 등록 축, 대문자가 사용자 정의 축이라는 관행을 따릅니다. wght·wdth·slnt·ital·opsz 는 대응 고수준 속성이 있어 CSS Fonts 4 가 그쪽을 권장합니다(2026년 10월 기준).

가변 폰트 축 값 설정 가이드 사용법

가변 폰트는 한 파일에 여러 축을 담고 있어 축 태그와 값으로 모양을 고릅니다. 문제는 축의 범위가 폰트마다 다르다는 점입니다. 범위를 모른 채 값을 넣으면 브라우저가 조용히 경계값으로 잘라 의도한 굵기가 나오지 않습니다. 이 도구는 폰트가 공표한 범위와 희망값을 받아 범위 안인지 대조하고 font-variation-settings 문법을 만듭니다.

입력은 한 줄에 축 하나이고 '태그 최소 최대 희망값' 네 값을 공백이나 쉼표로 구분합니다. 축 태그는 반드시 4자이며, 소문자 4자는 등록 축, 대문자는 사용자 정의 축이라는 관행을 따릅니다. 등록 축 wght·wdth·slnt·ital·opsz 는 대응 고수준 속성도 함께 생성합니다. 2026년 10월 기준입니다.

권장 축 값은 제시하지 않습니다. 폰트마다 범위가 달라 공통 권장값이 없기 때문입니다. 또 폰트 파일을 읽지 않으므로 그 폰트가 실제로 어떤 축을 가졌는지는 확인해 주지 않습니다. 축 간 상호작용도 다루지 않으니 최종 확인은 브라우저에서 하세요.

자주 묻는 질문

축 값을 얼마로 두면 좋은지 알려 주나요?

알려 주지 않습니다. 같은 wght 축이라도 폰트에 따라 100~900 일 수도 있고 200~700 일 수도 있어 공통 권장값이 없습니다. 폰트가 공표한 범위와 희망값을 넣으면 그 범위 안에 드는지만 대조합니다.

범위를 벗어난 값을 넣으면 어떻게 되나요?

브라우저가 가장 가까운 경계값으로 자릅니다. 그래서 이 도구도 생성 코드에 잘린 값을 넣고, 표와 경고줄에 원래 희망값과 잘린 값을 함께 보여 줍니다. 경계값 자체는 범위 안으로 봅니다.

font-variation-settings 만 쓰면 안 되나요?

동작은 합니다. 다만 CSS Fonts 4 는 wght·wdth·slnt·ital·opsz 처럼 등록된 축에는 font-weight 같은 고수준 속성을 쓰는 쪽을 권장합니다. 상속과 애니메이션이 더 예상대로 동작하기 때문입니다.

🎹가변 폰트 축 값 설정 가이드

붙여 쓸 CSS

축별 정리

관련된 도구

드롭캡 첫글자 강조 크기 계산기

텍스트 줄 간격 최적화 계산기

가변 폰트 축 값 설정 가이드 사용법

자주 묻는 질문

붙여 쓸 CSS

축별 정리

관련된 도구

드롭캡 첫글자 강조 크기 계산기

텍스트 줄 간격 최적화 계산기

가변 폰트 축 값 설정 가이드 사용법

자주 묻는 질문

같은 카테고리 도구