Variable Font

Creator
Creator
Seonglae ChoSeonglae Cho
Created
Created
2022 May 11 11:2
Editor
Edited
Edited
2025 Mar 4 0:4
Refs
Refs
한 글꼴 파일에 디자이너가 설정한 각 속성의 축을 만들어 속성마다 임의의 값을 적용하면 그에 맞는 폰트 모양이 만들어지는 글꼴
 

CSS

p { font-variation-settings: 'wght' 300, 'wdth' 115; }
width(너비), weight(두께), slant(기울기) 등 폰트 별로 다양한 축
 

COLRv1

First Batch of Color Fonts Arrives on Google Fonts - Material Design
Customize color palettes, add gradients, and more with COLRv1
First Batch of Color Fonts Arrives on Google Fonts - Material Design
COLRv1 Color Gradient Vector Fonts in Chrome 98 - Chrome Developers
In Chrome 98, the Chrome and Fonts teams have added support for COLRv1, an evolution of the COLRv0 font format intended to make color fonts widespread by adding gradients, compositing and blending, and improved internal shape reuse for crisp and compact font files that compress well.
COLRv1 Color Gradient Vector Fonts in Chrome 98 - Chrome Developers
Variable fonts (가변 폰트) | WIT블로그
이미지 출처 https://eyeondesign.aiga.org/parametric-and-variable-typeface-systems-shape-shifters-for-letterforms/ UI 개발자가 알던 기존의 가변 폰트는 em, rem 단위를 사용하여 브라우저 비율에 따라 글자 크기가 늘어나거나 줄어드는 폰트였는데요, 여기서 말하는 가변 폰트는 다른 의미를 가지게 됩니다.
Variable fonts (가변 폰트) | WIT블로그

Fluid Typography

A design approach that makes font sizes change fluidly based on screen size
Responsive Web Design
Reimagining Fluid Typography
Are we responding to the right inputs?
Reimagining Fluid Typography
 
 
 

Recommendations