댓글 검색 목록

[design] Google 글꼴에서 가변 글꼴 최대한 활용하기

페이지 정보

작성자 운영자 작성일 20-08-16 09:27 조회 698 댓글 0

저는 지난 몇 년 동안 Recursive Sans & Mono라는 글꼴 패밀리에 대해 (많은 재능 있는 사람들과 함께) 작업 해 왔으며, Google Fonts에서 공식적으로 출시되었습니다!

https://css-tricks.com/getting-the-most-out-of-variable-fonts-on-google-fonts

매우 빠르게 시도하고 싶습니까? 다음은 Google Fonts의 전체 재귀 변수 글꼴 모음을 사용하는 소스 코드입니다 (하지만 더 읽어 보면 훨씬 더 많은 유연성과 성능을 얻을 수 있습니다!).

image-10.png?resize=1024%2C695&ssl=1

재귀는 코드, 웹 사이트, 앱 등을 위해 만들어졌습니다.

image-11.png?resize=1024%2C1024&ssl=1

Recursive Mono는 원하는 경우 필기체 이탤릭체와 함께 코드에서 서로 다른 '음성'에 대한 선형 및 캐주얼 스타일과 모노 스페이스 디스플레이 타이포그래피를 위한 더 넓은 가중치 범위를 제공합니다.

image-12.png?resize=1024%2C1024&ssl=1

Recursive Sans는 비례 적이지만 대부분의 비례 글꼴과 달리 문자는 UI 상호 작용 및 레이아웃의 유연성을 높이기 위해 스타일 간에 동일한 너비를 유지합니다.

저는 KABK TypeMedia에서 서체 디자인 마스터 프로그램을 위한 논문 프로젝트로 Recursive를 시작했고, 제 유형 파운드리 인 Arrow Type을 시작했을 때 Google Fonts로부터 Recursive를 완성하고 오픈 소스 OFL 글꼴로 출시하라는 의뢰를 받았습니다.

Recursive를 보고 recursive.design에서 수행 할 수 있는 작업에 대해 자세히 알아볼 수 있습니다.

Recursive는 웹 사이트와 코드 모두를 위한 유연한 유형 패밀리로 만들어졌으며, 주요 목적은 개발자와 디자이너에게 새로운 미학을 최신 글꼴 기술과 결합하여 재미 있고 유용한 유형을 제공하는 것입니다.

첫째, 필요한 정의 : 가변 글꼴은 일반적으로 글꼴 사용자가 다양한 스타일 범위에서 스타일을 선택할 수 있는 방식으로 하나의 파일 내에서 다양한 스타일에 맞는 글꼴 파일입니다. 이러한 스타일 범위를 가변 축이라고 하며 글꼴 두께, 글꼴 너비, 광학 크기, 글꼴 기울기 또는 더 창의적인 것과 같은 매개 변수가 될 수 있습니다. Recursive의 경우 "Monospacedness"(Mono에서 Sans까지) 및 "Casualness"(일반, 선형 스타일 및 브러시, 캐주얼 스타일 사이)를 제어 할 수 있습니다. 각 유형 패밀리에는 하나 이상의 고유 축이 있을 수 있으며, 유형의 많은 기능과 마찬가지로 가변 축은 글꼴 디자이너를 위한 또 다른 디자인 고려 사항입니다.

Google Fonts가 방대한 컬렉션에 가변 글꼴을 추가하기 시작한 것을 보셨을 것입니다. 가변 글꼴이 할 수 있는 멋진 일에 대해 읽었을 것입니다. 그러나 Google Fonts (재귀 포함)에 제공되는 많은 가변 글꼴이 기본 Google Fonts 프런트 엔드에서 얻을 수 있는 것보다 훨씬 더 다양한 스타일 범위를 가지고 있다는 사실을 깨닫지 못할 수도 있습니다.

Google Fonts에는 웹 개발을 처음 접하는 사용자가 많기 때문에 가변 글꼴의 '가중치'축만 표시하여 단순함을 유지하고 있음을 이해할 수 있습니다. 그러나 Recursive와 같은 글꼴의 경우 이 단순화는 실제로 많은 옵션을 생략합니다. 재귀 페이지에서 Google Fonts는 방문자에게 8 개의 스타일과 1 개의 축을 표시합니다. 그러나 Recursive에는 실제로 64 개의 사전 설정 스타일 (명명 된 인스턴스라고도 함)과 조정할 수 있는 총 5 개의 가변 축 (더 많은 잠재적 인 사용자 지정 스타일을 고려함)이 있습니다.

재귀는 내가 생각하는 네 가지 "하위 패밀리"중 하나로 나눌 수 있습니다. Google Fonts에 표시된 부분은 가장 단순하고 비례적인 (sans-serif) 버전입니다. 4 개의 재귀 하위 패밀리는 각각 가중치 범위와 기울임 꼴을 가지며 다음과 같이 분류 할 수 있습니다.

Sans Linear: 비례적인 "보통"모양의 sans-serif 글꼴입니다. 이것은 Google Fonts 웹 사이트에 표시되는 것입니다.
Sans Casual: 비례적인 "브러시 캐주얼"글꼴
Mono Linear: 고정 폭 "일반"글꼴
Mono Casual: 고정 폭 "브러시 캐주얼"글꼴

이것은 아마도 말로 설명하는 것보다 시각화 하는 것이 더 낫습니다. 다음은 64 개의 명명 된 인스턴스를 보여주는 두 개의 테이블 (하나는 Sans 용, 다른 하나는 Mono 용)입니다.

image-14.png?resize=1024%2C1024&ssl=1

그러나 기본 Google Fonts 인터페이스는 이러한 스타일 중 8 개와 가중치 축에 대한 액세스 만 제공합니다.

image-15.png?resize=1024%2C1021&ssl=1

Recursive에는 64 개의 사전 설정된 스타일이 있으며 맞춤 축 설정을 사용할 때 더 많이 사용할 수 있지만 Google Fonts는 사전 설정된 스타일 중 8 개만 표시하고 사용 가능한 5 개의 가변 축의 가중치 축만 표시합니다.

오늘날 많은 가변 글꼴이 가중치 축 이상을 가지고 있지 않으므로 이것은 어떤 의미에서 이해할 수 있는 UX 선택입니다. 그래도 앞으로 조금 더 유연성을 더해주기를 바랍니다. 글꼴 디자이너이자 타이핑 팬으로서 현재의 가중치 전용 접근 방식을 보는 것은 마치 Google지도가 고속도로가 아닌 모든 도로를 제외하여 지도를 '단순화' 하는 것과 비슷합니다.

다행히도 Google Fonts에서 호스팅 하는 가변 글꼴의 모든 잠재력에 계속 액세스 할 수 있습니다. Google Fonts CSS API 버전 2를 만나보세요.이를 사용하여 재귀를 더 많이 활용하는 방법을 살펴 보겠습니다.

그러나 먼저 가변 글꼴의 작동 방식에 대해 몇 가지를 아는 것이 도움이 됩니다.

가변 글꼴의 작동 방식과 중요한 이유

웹에서 사진 작업을 해본 적이 있다면 더 작은 버전으로도 9,000 픽셀 JPEG 파일을 제공해서는 안된다는 것을 알고 있습니다. 일반적으로 사용자가 다운로드 할 때 대역폭을 절약하기 위해 압축을 사용하여 사진을 축소 할 수 있습니다.

글꼴 파일에 대해서도 유사한 고려 사항이 있습니다. 글꼴에 포함 된 문자를 부분 설정하여 글꼴 크기를 크게 줄일 수 있습니다 (필요한 영역을 벗어나기 위해 픽셀을 자르는 것과 비슷 함). 파일을 WOFF2 파일로 변환하여 추가로 압축 할 수 있습니다 (imageOptim과 같은 최적화 도구를 통해 래스터 이미지 파일을 실행하는 것과 비슷합니다). Google Fonts와 같이 글꼴을 호스팅 하는 공급 업체는 종종 이러한 작업을 자동으로 수행합니다.

이제 비디오 파일을 생각해보십시오. 60 초 동영상의 처음 10 초만 표시해야 하는 경우 마지막 50 초를 잘라서 훨씬 작은 동영상 파일을 만들 수 있습니다.

가변 글꼴은 비디오 파일과 약간 비슷합니다. 하나 이상의 정보 범위 (가변 축)가 있으며 이러한 글꼴은 종종 특정 위치로 잘 리거나 "고정"되어 파일 크기를 줄이는 데 도움이 됩니다.

물론 가변 글꼴은 비디오 파일과는 다릅니다. 글꼴은 각 문자 모양을 벡터로 기록합니다 (SVG가 모양 정보를 저장하는 방법과 유사). 가변 글꼴에는 애니메이션의 키 프레임과 같은 여러 "소스 위치"가 있습니다. 스타일 사이를 이동하기 위해 문자를 구성하는 제어점은 서로 다른 소스 위치 (델타라고도 함)간에 수학적으로 보간됩니다. 글꼴에는 많은 델타 세트가 있을 수 있습니다 (가변 축당 하나 이상, 때로는 더 많음). 가변 글꼴을 트리밍 하려면 불필요한 델타를 트리밍 해야 합니다.

구체적인 예로, 재귀의 캐주얼 축은 기본적으로 일반 그리기와 브러시 그리기라는 두 극단 사이에 벡터 제어점을 보간하여 '선형'에서 '캐주얼'로 문자 형식을 취합니다. 아래의 앰퍼샌드 글리프 애니메이션은 작동중인 메커니즘을 보여줍니다. 제어점은 한쪽 끝에서 둥근 모서리를 그리고 다른 쪽 끝에서 사각형 모서리로 이동합니다.

https://videos.files.wordpress.com/90AkMOai/interp_anime-2020_07_21-12_09_dvd.mp4

일반적으로 추가 된 각 축은 가변 글꼴이 작동하도록 하기 위해 존재해야 하는 도면 수를 두 배로 늘립니다. 때로는 숫자가 다소 많거나 적습니다. Recursive의 가중치 축에는 3 개의 위치 (그림 수의 3 배)가 필요하지만 필기체 축에는 추가 위치가 전혀 필요하지 않지만 실제로는 각 위치에 이미 존재하는 다른 대체 글리프 만 활성화됩니다. 그러나 일반적인 수학은 다음과 같습니다. 가변 글꼴에서 불필요한 축을 잘라낼 수 있다면 일반적으로 더 작은 파일을 얻게 됩니다.

Google Fonts API를 사용할 때 실제로 각 축을 선택하는 것입니다. 이렇게 하면 큰 파일로 시작하여 아래로 내려가는 대신 원하는 부분을 선택하고 선택할 수 있습니다.

가변 축 태그

Google Fonts API를 사용하려면 먼저 축에 레이블을 지정하는 방법을 알아야 합니다. 모든 축에는 전체 이름과 약어가 모두 있습니다.

이러한 축 약어는 4 자 "태그"형식입니다. 이는 Microsoft에서 정의하고 OpenType 사양에 기록 된 축의 경우 소문자이며 다른 사람이 발명하거나 정의한 최신 축의 경우 대문자입니다 ( "사용자 지정"또는 "개인"축이라고도 함). 이러한 새로운 축 중 일부를 표준화 하려는 노력이 있습니다.

현재 글꼴에는 다음과 같은 5 개의 표준 축이 있습니다.

wght – 가벼움과 대담함을 제어하는 무게
wdth – 너비 (전체 글자 너비 제어)
opsz – 다양한 크기에서 더 나은 가독성을 위해 디자인 조정을 제어 하는 광학 크기
ital – 기울임 꼴, 일반적으로 별도의 직립 / 기울임 꼴 디자인 간 전환
slnt – 경사, 일반적으로 중간 값을 사용할 수 있는 직립형 설계를 제어합니다.

사용자 지정 축은 거의 모든 것이 될 수 있습니다. Recursive에는 Monospace (MONO), Casual (CASL), Cursive (CRSV)의 세 가지와 wght 및 slnt라는 두 개의 표준 축이 포함됩니다.

Google Fonts API 기본 사항

Google Fonts 인터페이스에서 글꼴 임베드를 구성하면 URL을 포함하는 약간의 HTML 또는 CSS가 제공되며 이는 궁극적으로 하나 이상의 @ font-face 규칙을 포함하는 CSS 문서를 호출합니다. 여기에는 글꼴 이름과 Google 서버의 글꼴 파일에 대한 링크가 포함됩니다.

이 URL은 실제로 Google Fonts API를 호출하는 방법이며 사용자가 생각하는 것보다 훨씬 더 강력한 기능을 제공합니다. 몇 가지 기본 부분이 있습니다.

API를 지정하는 기본 URL (https://fonts.googleapis.com/css2)
하나 이상의 패밀리 매개 변수에서 요청하는 글꼴에 대한 세부 사항
표시 매개 변수를 설정하기 위한 글꼴 표시 속성

예를 들어, Recursive의 정규 가중치 (Sans Linear 하위 패밀리에서)를 원한다고 가정 해 보겠습니다. 다음은 CSS @import와 함께 사용할 URL입니다.

@import url('https://fonts.googleapis.com/css2?family=Recursive&display=swap');

또는 HTML의 <head>에 연결할 수 있습니다.

그런 다음 CSS에서 글꼴 적용을 시작할 수 있습니다.

body { font-family: 'Recursive', sans-serif; }

각 축에 대한 기본값이 있습니다.

MONO 0 (Sans/proportional)
CASL 0 (Linear/normal)
wght 400 (Regular)
slnt 0 (upright)
CRSV 0 (Roman/non-cursive lowercase)

모험을 선택하세요 : 스타일 또는 축

Google Fonts API는 가변 글꼴의 일부를 요청하는 두 가지 방법을 제공합니다.

축과 여기에서 원하는 특정 기본값이 아닌 값 나열
축과 여기에서 원하는 범위 나열

특정 글꼴 스타일 얻기

Google Fonts URL에 매개 변수를 추가하여 글꼴 스타일을 요청합니다. 모든 축의 기본값을 유지하지만 캐주얼 스타일을 사용하려면 쿼리 Recursive : CASL @ 1을 만들 수 있습니다 (이는 Recursive Sans Casual Regular를 제공합니다). Recursive Mono Casual Regular로 만들려면 @ 앞에 두 개의 축을 지정한 다음 각각의 값을 지정하십시오 (단, 사용자 정의 축에는 대문자 태그가 있음을 기억하십시오).

https://fonts.googleapis.com/css2?family=Recursive:CASL,MONO@1,1&display=swap

Regular와 Bold를 모두 요청하려면 패밀리 호출을 Recursive : wght @ 400; 700으로 업데이트하여 wght 축과 특정 값을 추가하면 됩니다.

https://fonts.googleapis.com/css2?family=Recursive:wght@400;700&display=swap

Google Fonts의 매우 유용한 점은 API에서 개별 스타일을 여러 개 요청할 수 있으며 가능하면 각 스타일에 대해 별도의 글꼴 파일이 아닌 요청 된 모든 스타일을 포괄하는 가변 글꼴을 실제로 제공한다는 것입니다. 가변 축 범위가 아닌 특정 위치를 요청하는 경우에도 마찬가지입니다. API 요청에 더 작은 글꼴 파일을 제공 할 수 있다면 아마도 그렇게 될 것입니다.

앞으로 가변 글꼴을 더 유연하고 효율적으로 다듬을 수 있으므로 주어진 API 요청에 대해 제공되는 파일은 시간이 지남에 따라 더 스마트 해질 것입니다. 따라서 프로덕션 사이트의 경우 필요한 스타일을 정확히 요청하는 것이 가장 좋습니다.

그러나 흥미로운 점은 가변 축을 요청할 수도 있다는 것입니다. 따라서 새로운 스타일을 사용할 때마다 글꼴 요청을 변경하지 않고도 많은 디자인 유연성을 유지할 수 있습니다.

Google Fonts API로 전체 가변 글꼴 가져 오기

Google Fonts API는 사용자가 원하는 스타일과 축만 선택하도록 하여 글꼴을 더 작게 만들려고 합니다. 그러나 가변 글꼴의 모든 이점을 얻으려면 (더 적은 파일에서 더 많은 디자인 유연성) 하나 이상의 축을 사용해야 합니다. 따라서 Recursive : wght @ 400; 700으로 단일 스타일을 요청하는 대신 Recursive : wght @ 400..700 (범위를 나타 내기 위해;에서 ..로 변경)을 사용하여 전체 범위를 요청하거나 Recursive : wght @ 300..1000의 전체 Recursive 가중치 범위 (매우 적은 파일 크기를 추가하지만 많은 추가 디자인 효과가 있음).

@ 앞에 알파벳순으로 (먼저 소문자 표준 축을 사용하여 대문자 사용자 지정 축을 사용하여) 추가 축을 나열한 다음 동일한 순서로 해당 값 또는 범위를 지정하여 추가 할 수 있습니다. 예를 들어 MONO 축과 wght 축을 추가하려면 글꼴 쿼리로 Recursive : wght, MONO @ 300..1000,0..1을 사용할 수 있습니다.

또는 전체 가변 글꼴을 얻으려면 다음 URL을 사용할 수 있습니다.

https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,CASL,CRSV,MONO@-15..0,300..1000,0..1,0..1,0..1&display=swap

물론 다음과 같이 HTML 링크에 넣어야 합니다.

유연성과 파일 크기의 균형을 맞추기 위해 추가 사용자 지정

가변 글꼴의 모든 단일 축을 사용하고 싶을 수 있지만 각 추가 축이 전체 파일 크기에 추가된다는 점을 기억하는 것이 좋습니다. 따라서 실제로 축을 사용할 것으로 예상하지 않는 경우에는 그대로 두는 것이 좋습니다. 나중에 언제든지 추가 할 수 있습니다.

다양한 가중치에서 Recursive의 Mono Casual 스타일을 원한다고 가정 해 보겠습니다. Recursive : wght, CASL, MONO @ 300..1000,1,1 다음과 같이 사용할 수 있습니다.

물론 추가 패밀리 매개 변수를 사용하여 API 호출에 여러 글꼴 패밀리를 추가 할 수 있습니다. 글꼴 이성에 따라 알파벳순인지 확인하십시오.

가변 글꼴 사용

표준 축은 모두 기존 CSS 속성으로 제어 할 수 있습니다. 예를 들어 가중치 범위가 있는 가변 글꼴이 있는 경우 font-weight : 425;로 특정 가중치를 지정할 수 있습니다. 모든 축은 글꼴 변경 설정으로 제어 할 수 있습니다. 따라서 Mono Casual의 매우 무거운 Recursive 스타일을 원한다면 (위에 표시된 대로 전체 제품군을 호출했다고 가정) 다음 CSS를 사용할 수 있습니다.

body { font-weight: 950; font-variation-settings: 'MONO' 1, 'CASL' 1; }

알아두면 좋은 점 : font-variation-settings는 CSS 사용자 정의 속성과 함께 사용하는 것이 훨씬 더 좋습니다.

VariableFonts.io 및 가변 글꼴에 대한 훌륭한 CSS-Tricks 기사 모음에서 가변 글꼴을 사용한 디자인에 대한 자세한 내용을 읽을 수 있습니다.

가변 글꼴의 성능에 대한 괴상한 메모

64 개의 사전 설정된 Recursive 스타일을 모두 별도의 WOFF2 파일 (전체, 하위 집합이 아닌 문자 집합 포함)으로 사용하면 총 약 6.4MB가 됩니다. 반대로 가변 글꼴에서 537KB에 불과한 스타일 범위 (및 그 사이의 모든 것)를 가질 수 있습니다. 물론 이것은 약간 터무니없는 비교입니다. 특히 전체 문자 집합이 아닌 단일 웹 페이지에서 64 개의 스타일을 실제로 사용하지 않을 것입니다 (그리고 그렇게 한다면 유니 코드 범위의 하위 집합을 사용해야 합니다).

더 나은 비교는 하나의 축 범위와 해당 축 범위 내의 스타일을 사용하는 재귀입니다. 내 테스트에서 "Google Fonts Latin Basic"문자 집합 (영어 및 서유럽 언어를 포함하는 문자 만 포함)의 하위 집합 인 Recursive WOFF2 파일은 전체 300–1000 Weight 범위 (및 기타 모든 축이 "고정"되어 있음)를 포함합니다. 기본값)은 60KB입니다. 한편 동일한 하위 집합이 있는 단일 스타일은 25KB입니다. 따라서 Recursive의 가중치를 세 개만 사용하면 개별 파일 대신 가변 글꼴을 사용하여 약 15KB를 절약 할 수 있습니다.

서브 세트 WOFF2로서의 전체 가변 글꼴은 281KB로 클럭되는데, 이는 글꼴의 경우 많은 양이지만 큰 JPEG 이미지의 무게와 비교하면 그다지 많지 않습니다. 따라서 개별 스타일이 약 25KB라고 가정하고 11 개 이상의 스타일을 사용하려는 경우 가변 글꼴을 사용하는 것이 좋습니다.

이러한 종류의 수학은 두 가지 큰 이유 때문에 대부분 학문적 연습입니다.

가변 글꼴은 파일 크기에 관한 것이 아니라 원하는 정확한 글꼴 두께 (또는 다른 스타일)를 선택하여 디자인 할 수 있다는 것입니다. 글꼴이 너무 밝게 보입니까? 글꼴 두께를 400에서 425로 약간 올리세요!
더 중요한 것은 (앞서 설명했듯이) Google Fonts에서 가변 글꼴 스타일 또는 축을 요청하면 API 요청과 방문자가 액세스하는 브라우저를 기반으로 가장 성능이 좋고 유용한 것으로 간주되는 글꼴을 보내어 무거운 작업을 대신 처리합니다. 귀하의 사이트.

따라서 파일 크기를 비교하기 위해 Google Fonts API가 반환하는 글꼴을 다운로드 할 필요가 없습니다. 하지만 가변 축을 선택할 시기와 몇 가지 스타일로 제한 할 시기를 가장 잘 결정할 수 있도록 일반적인 장단점을 이해하는 것이 좋습니다.

향후 계획?

CodePen을 실행하고 API를 사용해보세요! CodePen의 경우 CSS 패널에서 다음과 같이 CSS @import 구문을 사용하고 싶을 것입니다.

@import url('https://fonts.googleapis.com/css2?family=Recursive:CASL,CRSV,MONO,slnt,wght@0..1,0..1,0..1,-15..0,300..1000&display=swap');

다른 리소스의 병렬 다운로드를 차단하지 않으려면 HTML 링크 구문을 사용하는 것이 분명히 좋습니다. CodePen에서는 펜 설정을 열고 HTML을 선택한 다음 HTML 헤드 설정에 <link>를 드롭합니다.

image-17.png?resize=1024%2C792&ssl=1

또는 내 CodePen을 포크하고 거기에서 실험 할 수 있습니다.

https://codepen.io/thundernixon/pen/dyGQZbx

API 구성 바로 가기 사용

정확한 API 호출을 파악하고 Recursive의 가변 축을 선택하고 반 고급 API 호출을 수행하는 복잡한 과정을 생략하고 싶다면 Recursive 미니 사이트에 간단한 구성 도구를 추가했습니다 ( "Get Recursive"를 클릭하십시오. 단추). 이를 통해 사용하려는 고정 된 스타일 또는 가변 범위를 빠르게 선택할 수 있으며 결과 파일 크기에 대한 추정치를 제공 할 수도 있습니다. 그러나 이는 API의 일부 기능 만 노출하며 원하는 경우 더 구체적으로 지정할 수 있습니다. 가변 글꼴 인스 턴싱의 현재 한계를 고려하여 가장 작은 파일에서 가장 스타일리시 한 범위를 사용하는 사람들을 확보하려는 시도입니다.

코드에 재귀 사용

또한 Recursive는 실제로 코드에 사용할 글꼴로 처음 설계되었습니다. 계정 설정을 통해 CodePen에서 사용할 수 있습니다. 더 좋은 점은 GitHub에서 최신 Recursive 릴리스를 다운로드하여 사용하고 모든 코드 편집기에서 설정할 수 있다는 것입니다.

더 많은 글꼴을 탐색하십시오!

Google Fonts API 문서에는 사용 가능한 축 범위에 대한 세부 정보와 함께 가변 글꼴의 (일부) 목록이 포함되어 있습니다. Weight 이외의 축으로 내가 가장 좋아하는 두 가지는 Encode Sans (wdth, wght) 및 Inter (slnt, wght)입니다. Google 글꼴을 필터링하여 가변 글꼴 만 표시 할 수도 있지만 이러한 결과의 대부분에는 가중치 축만 있습니다 (여전히 멋지고 유용하지만 맞춤 URL 구성이 필요하지 않음).

더 놀라운 가변 글꼴이 Google 글꼴에 제공됩니다. 특히 기대되는 것은 다음과 같습니다.

Fraunces: “Windsor, Souvenir, Cooper Series와 같은 20 세기 초 서체의 매너리즘에서 영감을 받은 디스플레이“Old Style”소프트 세리프 서체”
Roboto Flex: Roboto와 유사하지만 광범위한 무게, 너비 및 광학 크기
Crispy: 창의적이고 각도가 있으며 매우 유연한 가변 디스플레이 글꼴
Science Gothic: 정사각형은 "1930 년대 초의 서체 인 Bank Gothic을 기반으로 하지만 소문자, 디자인 축 및 언어 범위가 추가되었습니다."
Commissioner: 거의 고전적인 비율을 가진 저 대비 인본주의 자 sans-serif는 똑바로, 감각적이거나 쐐기 형일 수 있는 줄기가 있는 3 개의 "목소리"를 사용합니다.

그리고 예, 오늘 프로젝트에서 사용하려는 경우 이러한 글꼴을 절대적으로 다운로드하여 자체 호스팅 할 수 있습니다. 하지만 앞으로 더 놀랍도록 유연한 서체를 위해 Google Fonts를 계속 지켜봐 주십시오!

물론 문자의 세계는 오픈 소스 글꼴보다 훨씬 큽니다. 흥미 진진하고 경계를 밀어 붙이는 글꼴을 개발하는 믿을 수 없는 유형의 파운드리가 많이 있으며, 그들 중 다수는 가변 글꼴에서 새롭고 흥미로운 영역을 탐색하고 있습니다. 많은 사람들이 라이선싱에 대해 다른 접근 방식을 취하는 경향이 있지만 올바른 프로젝트의 경우 좋은 서체가 매우 좋은 가치가 될 수 있습니다 (분명히 편향되어 있지만 간단한 주장을 위해 타이포그래피가 Apple, Stripe, Google, IBM, Figma, Slack 등). 더 많은 가능성을 보고 싶고 이 이름을 아직 모르신다면 DJR, OHno, Grilli, XYZ, Dinamo, Typotheque, Underware, Bold Monday 및 Future에 대한 매우 재미있는 WIP 프로젝트를 확인하세요. 글꼴. (다른 놀라운 파운드리를 많이 제외했지만, 이들 각각은 내가 특히 좋아하는 작업을 수행했으며 이것은 유형 파운드리의 디렉토리가 아닙니다.)