가변 폰트란?

정의

Adobe, Apple, Google, Microsoft 가 협력하여 폰트의 너비, 두께, 스타일마다 별도의 다른 파일을 사용하는 기존 폰트 대신 다양한 유형의 폰트를 단일 파일에 통합할 수 있는 OpenType 폰트 사양을 발전시킨 것

정적 폰트와 가변 폰트의 차이

기존 폰트는 각각의 폰트가 width, weight, style 등이 조합되어 만들어졌기 때문에, 그래서 ‘Roboto Regular’, ‘Roboto Bold’, ‘Roboto Bold Italic’ 과 같이 별도의 파일을 사용해야 함.

한 페이지에서 디자인 가이드에 맞춰 폰트를 사용하기 위해 최소 4개의 파일(regular, italic, bold, bold italic) 이 필요하며 만약 더 다양한 강조를 위해 weight를 조절하고 싶으면 더 많은 파일이 필요.

반면, 가변 폰트의 경우 모든 스타일의 조합이 단일 파일에 통합됨. 따라서 별도로 로드한 몇 가지 형태로 제한되지 않고 width, weight, style 에 접근할 수 있음.

활용방법

가변 폰트는 css의 font-variation-settings 속성을 활용하여, 무궁무진한 폰트 변형을 만들어낼 수 있으며, 애니메이션도 가능함

출처

Variable fonts (가변 폰트)
https://yozm.wishket.com/magazine/detail/1239/