Variable Font

Creator

Creator

Created

Created

2022 May 11 11:2

Editor

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

https://material.io/blog/color-fonts-are-here

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

https://developer.chrome.com/blog/colrv1-fonts/

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블로그

https://wit.nts-corp.com/2019/10/07/5686

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

https://www.oddbird.net/2025/02/12/fluid-type/

Reimagining Fluid Typography

Recommendations

////////