최근 수정 시각 : 2024-09-06 10:10:13

가변 글꼴

글꼴 관련 문서
{{{#!wiki style="margin:0 -10px -5px; min-height:calc(1.5em + 5px)"
{{{#!folding [ 펼치기 · 접기 ]
{{{#!wiki style="margin:-5px -1px -11px; word-break:keep-all"		 손글씨
서예 · 캘리그래피 · 필기체 · 서명 · 필기 · 필적
필기도구 · 문방사우
분류
한글바탕 · 돋움
라틴 문자Vox-ATypI 분류 · 세리프 · 산세리프 · 이탤릭 · 블랙 레터
한자관련 틀 참조
인쇄 / 디자인
활자(금속활자) · 합자 · 타이포그래피
포스트스크립트 · OTF · TTF · 웹 폰트 · 클리어타입 · 가변 글꼴
목록
글꼴 목록 · 상업용 목록 · 분류:글꼴
기타/관련 항목
속기 · 문자 체계 · 문장 부호 · 전각과 반각 · 볼드
}}}}}}}}} ||

파일:Chinese_variable_fonts_Lanting_Hei.gif
1. 개요2. 특징3. 활용4. 축
4.1. 기본 축4.2. 커스텀 축
5. 목록6. 관련 사이트

1. 개요

可變- / Variable fonts

기존의 글꼴 패밀리가 너비, 두께, 기울기 등에 따라 각각의 파일을 모두 따로 디자인하여 여러 파일로 사용하던 것과 달리, 한 글꼴 파일에 디자이너가 설정한 각 속성의 축을 만들어 속성마다 임의의 값을 적용하면 그에 맞는 폰트 모양이 만들어지는 글꼴이다. 즉, 하나의 글꼴 파일로 무한한 모양을 만들 수 있는 차세대 글꼴 포맷이라고 할 수 있다.

Adobe, Apple, Google, Microsoft가 협력하여 개발하였으며 2016년 9월 14일 OpenType 1.8에서 발표되었다.

사실 이 기술은 아주 새로운 개념은 아니고 1990년도에 존재하던 트루타입 GX의 기술을 발전시킨 것이다.

2. 특징

어떤 기존 글꼴 파일의 패밀리가 두께에 따라 Thin, ExtraLight, Light, Regular, Medium, SemiBold, Bold, ExtraBold, Black의 총 9가지 파일을 따로 만들었다고 하자. 게다가 여기서 너비에 따라 Condensed, SemiCondensed까지 추가하면 총 27종을 만들어야 한다. 하지만 가변 글꼴로 만든다면 하나의 글꼴 파일에서 두께와 너비라는 축을 만들고, 그 축을 기준으로 가장 가는 서체에서 서서히 굵은 서체로, 가장 좁은 서체에서 넓은 서체로 변하는 알고리즘을 적용한다.

따라서 가변 글꼴 파일의 용량은, 물론 1개 글꼴 파일보다는 크지만, 적어도 굵고 가늘고 넓고 좁은 4개 글꼴 파일의 용량보다는 작거나 비슷한 정도로 위의 27개보다 훨씬 많은 글꼴 모양을 표현할 수 있게 된다. 이에 따라 웹 폰트로 사용할 때, 많은 폰트 패밀리를 필요로 한다면, 가변 글꼴 파일의 수가 적어서 브라우저의 글꼴 파일 요청 횟수가 줄기 때문에 기존의 방식으로 많은 글꼴을 불러오는 것보다 성능 향상에도 도움을 준다.

두께라고 해서 무작정 원래 글꼴 모양을 단순히 수학적으로 굵게만 늘리는 느낌이 아니라, 디자이너가 원래 굵은 패밀리 글꼴을 만들 때 사용하는 여러 시각적 원리 등의 로직을 적용할 수 있기 때문에, 단순 두께 변화를 주는 것이 전혀 아니다.

그리고 두께, 너비 등의 정해진 축이 따로 정해져 있는 게 아니라 디자이너가 정의한 커스텀 축을 만들 수 있고, 축의 속성값을 이동시킬 때 무조건 선형적으로 증가하도록 만드는 게 아니라, 특정 분기점에는 다른 로직을 적용할 수도 있도록 설계되었기 때문에, 굉장히 다양한 속성을 만들 수 있다. 예를 들어, 세리프와 산세리프의 정도를 조정할 수도 있으며, 아예 다르게 생긴 4개의 폰트를 섞어 서서히 변화시킬 수 있는 폰트[1]도 존재한다. 심지어는 이러한 축의 특성을 사용해 이모지에 움직이는 애니메이션을 적용할 수도 있다.

속성값을 통해 서서히 변화시킬 수 있기 때문에, 기존의 글꼴은 불가능했던 글꼴의 두께, 너비 등에 애니메이션을 줄 수 있게 되었다. 물론 당연히 단순 글꼴 모양 자체를 임의로 잡아 늘이거나 굵게 만드는 등의 애니메이션은 원래도 가능했지만, 같은 패밀리에서 디자이너가 의도하여 설계한 굵은 폰트에서 얇은 폰트로의 애니메이션을 주는 게 가능해졌다는 말이다.

3. 활용

어도비 포토샵에서는 CC 2018 버전부터 가변 글꼴 기능을 공식으로 지원한다. 가변 글꼴은 글꼴 선택창에 variable을 치면 사용 가능한 가변 글꼴들을 볼 수 있으며, 가변 글꼴들은 글꼴 아이콘에 작게 VAR이라고 적혀있다. 가변 글꼴을 선택하면 문자 속성 창에서 가변 글꼴의 축값을 조절할 수 있다.

웹에서는 CSS의 font-variation-settings 속성을 통해 각종 축값을 지정할 수 있다. 아래 축 문단에서 설명하는 미리 등록된 기본 축의 경우 CSS의 다른 속성을 통해서도 접근할 수 있다.
#!syntax css
p { font-variation-settings: 'wght' 300, 'wdth' 115; }

4. 축

4.1. 기본 축

아래는 미리 등록되어 있는 축(Registered axes)을 말한다.
  • Weight: wght라는 태그를 사용하며, 문자의 두께를 조절한다. CSS에서 font-weight 속성을 통해 접근할 수도 있다.
  • Width: wdth라는 태그를 사용하며, 문자의 너비를 조절한다. CSS에서 font-stretch 속성을 통해 접근할 수도 있다.
  • Italic: ital이라는 태그를 사용하며, 문자의 이탤릭[2] 여부를 1, 0으로 조절한다. CSS에서 font-style 속성에 italic을 주어 설정할 수 있다.
  • Slant: slnt라는 태그를 사용하며, 문자의 기울기를 조절한다. CSS에서 font-style 속성에 oblique와 기울일 각도를 입력하여 설정할 수 있다.
  • Optical size: opsz라는 태그를 사용하며, 글자의 크기에 따라 적용되는 두께를 의미한다. CSS에서 font-optical-sizing 속성으로 사용 여부를 설정할 수 있다.

4.2. 커스텀 축

위의 기본 축 외에도 글꼴 디자이너가 따로 커스텀 축을 만들 수 있다.
  • Grade: 많이 사용되는 커스텀 축 중 하나. 보통 GRAD라는 태그를 사용하며, 너비를 변화시키지 않는 선에서 변하는 두께를 설정할 수 있다. 그래서 두께에 따라 너비가 변하여 줄 바꿈이 생김으로 인해 레이아웃이 바뀌는 것을 막을 수 있다.

5. 목록

  • 라틴 문자
    • San Francisco
    • Inter #
    • Bahnschrift: Windows 10의 버전 1709 업데이트로 가변 글꼴화되었고 버전 1803에서 width 축이 추가되었다.
    • Roboto Flex
  • 한글

6. 관련 사이트

  • Variable Fonts: 각종 가변 폰트와 폰트에서 제공하는 축을 실시간으로 조절할 수 있는 사이트이다. 해당 폰트의 출처 주소를 함께 제공하고 있다.
  • 구글 폰트: 구글의 웹 폰트 서비스 사이트. 'Show only variable fonts'를 체크하면 가변 글꼴에 해당하는 글꼴만 볼 수 있다.

[1] https://v-fonts.com/fonts/varianz[2] 아래 Slant로 따로 있는 기울기와는 다른 개념이다. 자세한 내용은 글꼴 문서의 이탤릭 부분 참조.

분류