가변 폰트(Variable Font)를 슬라이더로 실시간 조정. CSS font-variation-settings 코드를 한 번에 복사하세요.
🎛️ 미리보기
The quick brown fox
CSS 코드

Variable Font 플레이그라운드 사용법

  1. 샘플 텍스트와 사용할 가변 폰트를 선택합니다.
  2. weight / width / slant / opsz 등 axis를 슬라이더로 조정합니다.
  3. 실시간 미리보기로 변화를 확인합니다.
  4. 완성된 CSS 코드를 복사해 본인 프로젝트에 붙여넣습니다.
  5. Recursive는 CASL(캐주얼)·MONO(고정폭) 같은 독특한 axis가 있습니다.

주요 기능

  • 5종 인기 가변 폰트 내장 (Inter·Roboto Flex·Recursive·Outfit·DM Sans)
  • 주요 axis 6개 슬라이더 (wght·wdth·slnt·opsz·CASL·MONO)
  • font-variation-settings CSS 코드 자동 생성
  • 실시간 미리보기 + 한글·영문·숫자 동시 표시
  • Google Fonts 직접 로드 (별도 설치 X)

활용 예시

  • 디자인 시스템 — 한 폰트로 다양한 굵기·폭 변형 제공
  • 웹 폰트 용량 절약 — 가변 폰트 1개가 정적 폰트 10개를 대체
  • 모션 디자인 — wght 애니메이션으로 부드러운 transition
  • 반응형 타이포그래피 — opsz로 화면 크기별 최적 굵기
  • 특수 효과 — Recursive의 CASL로 인포멀 ↔ 포멀 전환

Variable Font가 뭔가요?

Variable Font(가변 폰트)는 OpenType 1.8(2016)에 추가된 기술로, 한 파일 안에 여러 굵기·폭·스타일이 모두 들어 있습니다. 기존 Roboto의 9가지 굵기를 받으려면 9개 파일이 필요했지만, Roboto Flex 1개 파일이면 100~1000 사이의 어떤 굵기든 사용할 수 있습니다. 축(axis)이라는 개념으로 wght(굵기), wdth(폭), slnt(기울기), opsz(광학 사이즈) 등을 조정합니다. CSS의 font-variation-settings로 정밀 제어할 수 있고, 모든 모던 브라우저에서 지원됩니다.

자주 묻는 질문

모든 폰트가 가변 폰트인가요?

아니요. 가변 폰트로 만들어진 폰트만 가능합니다. Google Fonts에서 "Variable" 태그가 붙은 폰트들이 가변 폰트입니다.

font-weight: 400과 font-variation-settings: "wght" 400 차이?

같은 결과지만 font-variation-settings가 더 정밀합니다. 또한 wdth·slnt 같은 비표준 axis는 font-variation-settings로만 제어 가능합니다.

오래된 브라우저에서 동작하나요?

Chrome 62+, Safari 11+, Firefox 62+에서 지원됩니다. 2018년 이후 브라우저는 모두 OK.

한글 가변 폰트도 있나요?

네, Pretendard Variable, IBM Plex Sans KR 등이 있지만 본 도구에는 영문 폰트만 내장했습니다.