이미지 출처 https://eyeondesign.aiga.org/parametric-and-variable-typeface-systems-shape-shifters-for-letterforms/

UI 개발자가 알던 기존의 가변 폰트는 em, rem 단위를 사용하여 브라우저 비율에 따라 글자 크기가 늘어나거나 줄어드는 폰트였는데요, 여기서 말하는 가변 폰트는 다른 의미를 가지게 됩니다.
가변 폰트는 Adobe, Apple, Google, Microsoft 가 협력하여 폰트의 너비, 두께, 스타일마다 별도의 다른 파일을 사용하는 기존 폰트 대신 다양한 유형의 폰트를 단일 파일에 통합할 수 있는 OpenType 폰트 사양을 발전시킨 것이며 가변 폰트(Variable fonts)를 오픈타입 가변 폰트(OpenType Variable Fonts) 라고 부르기도 합니다.
가변 폰트는 width(너비), weight(두께), slant(기울기) 등 폰트 별로 다양한 축을 가지고 있으며 이 축을 수치로 조정하여 원하는 스타일을 지정하고 조합할 수 있습니다.
예를들면 대표적인 가변 폰트인 Amstelvar는 width, weight, optical size, 총 3개의 축을 가지고 있으며 아래와 같이 weight 축을 조절하여 총 200개의 폰트 스타일을 지정할 수 있습니다.

다음과 같이 가변 폰트가 가진 이 기능이 공식적으로 ‘OpenType Font Variations’, ‘OT1.8’ 이라는 이름의 기술로 발표 되었습니다.
Adobe Photoshop CC는 이미 다양한 가변 폰트를 지원하고 있습니다.
폰트 Type Tool에 ‘variable’이라고 입력하면 여러가지 가변 폰트가 나오는 걸 확인 할 수 있습니다.
그리고 가변 폰트를 선택하면 기존 폰트를 선택할 때와 다르게 Properties 창에서 폰트의 두께(Weight), 폭(Width), 기울기(Slant) 를 슬라이더로 설정할 수 있게 됩니다.

가변 폰트와 기존(정적) 폰트의 비교

기존 폰트는 각각의 폰트가 width, weight, style 등이 조합되어 만들어졌습니다. 그래서 ‘Roboto Regular’, ‘Roboto Bold’, ‘Roboto Bold Italic’ 과 같이 별도의 파일을 사용했습니다. 한 페이지에서 디자인 가이드에 맞춰 폰트를 사용하기 위해 최소 4개의 파일(regular, italic, bold, bold italic) 이 필요하며 만약 더 다양한 강조를 위해 weight를 조절하고 싶으면 더 많은 파일을 추가해야합니다.
반면, 가변 폰트의 경우 모든 스타일의 조합이 단일 파일에 통합됩니다. 따라서 별도로 로드한 몇 가지 형태로 제한되지 않고 width, weight, style 에 접근할 수 있게 됩니다. 이 파일은 단일 글꼴 보다 크기가 크지만 여러 단일 폰트를 합친 파일 크기보다 작거나 거의 같습니다. 즉, 폰트 요청 횟수가 줄어서 성능 향상에 도움이 됩니다.

Variation axis (변형축)

가변 폰트의 핵심은 변형축의 개념입니다.
변형축은 표준 변형축과 커스텀축, 두가지 종류가 있습니다. 표준 변형축은 표준화 할 가치가 있다고 느낄 만큼 일반적인 축입니다. 현재 등록된 5개의 표준 변형축은 weight(두께), width(너비), slant(기울임), italic(이탤릭), optical size(광학크기) 입니다.
커스텀축은 실제로 제한이 없으며 폰트 개발자가 원하는 축을 정의하고 범위를 지정할 수 있습니다.
변형축은 4글자의 tag로 명명하여 사용하며 표준 변형축은 소문자로, 커스텀 축은 대문자로 사용합니다.

1. 표준 변형축

• weight | tag: wght
  문자의 두께가 얼마나 얇거나 두꺼운지를 정의합니다. CSS에서 100~900 의 값과 normal, bold와 같은 키워드를 가지는 font-weight 속성을 통해 이를 지정하는 기능이 있습니다.
  

  font-variation-settings: 'wght' 375;

• width | tag: wdth
  문자 너비가 좁거나 넓은지를 정의합니다. CSS에서 font-stretch 속성에 의해 제어되며 키워드 또는 백분율 값을 사용할 수 있습니다. 기존에는 scaleX 또는 scaleY을 사용하여 width를 확장할 수 있었지만 의도하지 않은 방식으로 글꼴이 늘어나기도 하였습니다. 이 속성을 활용하면 폰트 디자이너가 지정한대로 확장, 축소가 가능합니다.
  

  font-variation-settings: 'wdth' 115;

• italic | tag: ital
  이탤릭체를 사용할지 안할지 ON/OFF 로 작동합니다. 이탤릭체로 전환할 때 문자 형태가 크게 달라지므로 문자를 대체하게 됩니다. 따라서 문자를 기울이는 것과 비슷할 것 같지만 실제로 다릅니다. (문자의 기울임은 아래 Slant 속성에서 정의됩니다.) CSS에서는 italic과 slant를 font-style 속성에서 설정할 수 있습니다.
  

  font-variation-settings: 'ital' 1;

• slant | tag: slnt
  문자가 얼마나 기울어지는지를 정의합니다. 문자의 각도를 변경하지만 문자 대체는 수행하지 않는 다는 점에서 italic과 다르며 Slant는 ON/OFF가 아닌 숫자 범위로 표현됩니다. CSS에서 font-style: oblique + degree 속성으로 설정하여 제어하며 기본값은 20deg 이지만 -90deg ~ 90deg 사이의 지정된 각도도 허용 할 수 있습니다.
  

  font-variation-settings: 'slnt' 14;

• optical size | tag: opsz
  문자의 두께가 폰트의 크기에 따라 변경되는 것을 말합니다. CSS에서font-optical-sizing 속성을 사용하여 광학 사이징을 켜거나 끌 수 있습니다.
  

  font-variation-settings: 'opsz' 36;

2. 커스텀축

• Grade | tag: GRAD
  Grade는 실제로 서체에서 잘 알려진 커스텀 축입니다. 문자의 두께를 조절하지만 텍스트가 차지하는 물리적 공간을 변하지 않게하는 점에서 Weight와는 다릅니다. Grade를 변경해도 문자나 그 주변의 전체 레이아웃이 바뀌지 않아서 유용한 변동축으로 사용하고 있습니다.
  

  font-variation-settings: 'GRAD' 88;

폰트 개발자가 변형축을 정의하기 때문에 폰트의 문서를 확인하여 사용할 수 있는 축을 파악하는 것이 중요합니다. 예를 들어 Christoph Koeberlin이 디자인 한 Gingham 가변 폰트는 두 가지 축인 wght, wdth 가 있습니다. Amstelvar 폰트는 slnt 축이 포함되어 있지 않지만 GRAD 축이 있고 더 많은 커스텀 축이 존재합니다.
https://v-fonts.com/ 에서 어떤 가변 폰트가 존재하는지 테스트할 수 있으며 변형축과 라이센스 정보를 확인할 수 있습니다.

CSS font-variation-settings

font-variation-settings CSS 속성은 간략하게 Variable fonts(가변 폰트) 의 폰트 스타일을 제어하는 CSS 속성입니다. 즉, 과거에 사용해왔던 폰트에는 적용되지 않으며 가변 폰트에서 적용됩니다.

Syntax

font-variation-settings: normal | [<string> <number>, ...];

• normal
  • 폰트 기본값(default)으로 설정합니다.
• <string> <number>
  • <string>에 4문자 변형축을, <number>에 해당하는 값을 대입합니다.
  • <string>은 4문자를 초과하거나 아스키코드의 U + 20 ~ U + 7E 범위를 벗어나는 문자가 포함되어 있으면 전체 속성이 적용되지 않습니다
  • 표준변형축은 소문자를, 사용자정의축은 대문자를 대입합니다.
  • font-variation-settings: 'wght' 375, 'GRAD' 88;

Example

/* 폰트 선언 */
@font-face {
    font-family: 'AmstelvarAlpha';
    src: url('AmstelvarAlpha.woff2') format('woff2');
    font-style: normal;
    font-weight: normal;
}

h1 {
    font-family: 'AmstelvarAlpha', sans-serif;
    /* 가변 폰트 스타일 설정 */
    font-variation-settings: 'wght' 200 , 'wdth' 500, 'GRAD' 88;
}

활용

CSS Custom property

font-variation-settings 속성을 사용하여 값을 설정하고 해당 값 중 하나를 변경하려면 모든 값을 다시 채워야 합니다 (font-feature-settings 속성을 사용하여 OpenType 글꼴을 설정할 때와 같은 방식).
CSS Custom 속성을 사용하여 개별 값을 수정할 수 있습니다.

p {
    font-variation-settings: 'wght' var(--text-wght) , 'wdth' 300, 'GRAD' 88;
}
.custom {
    --text-wght: 200;
}

Animation

font-variation-settings 속성에 CSS Animation 을 함께 사용하여 가변 폰트를 애니메이션화 할 수 있습니다.
아래 애니메이션은 가변 폰트 ‘Amstelvar’를 사용하여 표준변형축 ‘wght'(font-weight) 만 변경시킵니다. 각각의 문자를 인라인 요소로 묶고 요소 마다 0.1초의 지연을 발생시킵니다.

브라우저 지원

font-variation-settings 속성은 Chrome 62에서 부터 지원을 시작하여 Firefox 62, Safari 11.2 이상에서 지원이 가능합니다.

@supports 사용

font-variation-settings 속성을 지원하는 브라우저에 가변 폰트를 적용하기 위해 @supports를 사용할 수 있습니다.

h1 {
    font-family: non-variable-font-family, sans-serif;
}
@supports (font-variation-settings: 'wdth' 115) {
     h1 {
        font-family: variable-font-family, sans-serif;
    }
}

지금까지 Variable Font(가변 폰트)와 font-variation-setting 속성에 대해 살펴보았습니다.
가변 폰트는 웹에 더 빠르고 효율적인 포맷을 제공할 뿐 아니라 풍부한 타이포그래피까지 제공할 수 있어 전망이 매우 밝습니다.
Windows10, Creators Fall 업데이트를 통해 새로운 가변 폰트 ‘Bahnschrift’ 를 제공합니다.

Adobe Creative Cloud 2018 에서 ‘Acumin’, ‘Minion’, ‘Myriad’ 등의 가변 폰트를 제공하고 Chrome, Safari, Firefox에서도 지원되고 있습니다.
이렇게 가변 폰트 기술이 지원이 확대됨에 따라 글꼴 제조업체의 가변 폰트 개발도 빠르게 활성화 되고 있습니다.
한글 가변 폰트로는 2018년 4월 ‘준폰트’의 네모고딕 가변글꼴이 국내 최초의 한글 가변 폰트이며

2019년 6월, ‘윤디자인’의 머리정체2 Variable도 개발되었습니다.