Jason Pamental과 함께하는 Smashing Podcast 에피소드 5: 가변 글꼴이란?

2주마다 우리는 웹 업계의 누군가와 다른 주제에 대해 이야기하는 팟캐스트를 게시합니다. 이번 에피소드에서는 가변 글꼴의 모든 것에 대해 알아보겠습니다! 나는 이 문제에 대한 지식의 원천인 제이슨 파멘탈과 이야기하고 있습니다.

메모 표시

주간 업데이트

• "브랜드 일러스트레이션 시스템: 강력한 시각적 아이덴티티 그리기", Yihui Liu
• Suzanne Scacca, "교통량 급증에 대처하기 위해 고군분투"
• "CSS 레이아웃 구축: Rachel Andrew와 함께하는 라이브 스트림", Rachel Andrew
• "2019년 웹 디자인 및 개발 강림 요약" Rachel Andrew
• "포트폴리오 사이트가 PWA여야 합니까?", Suzanne Scacca

가변 글꼴

• rwt.io의 웹에서 Jason을 찾으십시오.
• 웹 타이포그래피 뉴스 뉴스레터
• "가변 글꼴: 웹 작성자가 알아야 할 사항", Jason Pamental
• Ellen Lupton의 책 "Thinking With Type"
• Erik Spiekermann의 책 "Stop Stealing Sheep & Find Out How Type Works"

성적 증명서

Drew McLellan: 그는 디자인 전략가, UX 리더, 기술자, 웹 타이포그래피 전문가이자 W3C Web Fonts Working Group의 초대 전문가입니다. 그는 디지털 플랫폼에서 문자를 더 잘 설정하는 방법에 대해 쓰고, 말하고, 팀 및 브랜드 소유자와 협력합니다. 그는 Adobe, Audible, Conde Nast, GoDaddy, IBM과 같은 조직과 이야기를 나누었고 전 세계에서 프레젠테이션, 워크샵 및 회의를 진행했습니다. 그의 뉴스레터인 Web Typography News는 웹상의 타이포그래피에 대한 최신 업데이트와 팁을 원하는 사람들에게 인기가 있습니다. 그는 분명히 웹 타이포그래피의 전문가입니다. 그러나 그가 1984년 올림픽 게임 론 크로케에서 스웨덴을 대표했다는 사실을 알고 계셨습니까? 내 스매싱 친구, 제이슨 파멘탈을 환영하십시오. 안녕, 제이슨. 잘 지내고 있나요?

제이슨 파멘탈: 굉장 합니다. 특히 그 인트로 이후.

Drew: 저는 오늘 분명히 웹 타이포그래피에 대해 이야기하고 싶었습니다. 왜냐하면 그것이 정말로 당신의 것이기 때문입니다. 당신은 웹 타이포그래피의 진정한 전문가입니다. 일반적으로 이것에 대해 이야기하지만 특히 가변 글꼴에 대해 조금 이야기하십시오. 제가 타이포그래피 전문가가 아님을 먼저 인정하겠습니다. 제 말은, 저를 듣고 있는 사람처럼 정보가 없는 사람으로 간주해 주십시오. 당신은 타이포그래피에 관한 어떤 정보로도 나를 애용할 수 없습니다. 나는 우리가 웹에서 사용할 수 있는 웹 글꼴을 아마 약 10년 동안 가지고 있었던 것 같아요. 맞나요?

제이슨: 네. 사실, 며칠 전에 트위터에서 무언가를 시작한 것은 당신이 아니었나요? 2009년 11월 9일 같았습니다. Typekit이 출시된 지 이틀 만에 10년이 된 것 같습니다. 나는 Font Deck이 같은 기간에 옳았다는 것을 알고 있습니다. 그런 다음 Google Fonts 및 Monotype Service가 오래지 않아 있습니다. 제 친구 John Cianci가 베타 초대를 받았습니다. 그는 실제로 현재 아내가 2009년 언젠가 Typekit에서 일하는 에이전시의 동료이기도 합니다. 그것은 웹에 대한 제 관심을 완전히 재발명한 것이었습니다. . 내 말은, 그것은 나에게 혁명이나 다름없었다. 학교에서 타이포그래피를 공부할 때 항상 타이포그래피를 좋아했지만 15년 동안 웹에서 아무것도 할 수 없었습니다. 그것은 꽤 놀라운 일이었습니다.

Drew: 10년 이상 웹 글꼴을 사용하고 잠재적으로 웹 작업을 하는 디자이너가 있을 것입니다. 현재 웹 작업을 하는 디자이너 중에는 다양한 서체 중에서 선택할 수 있는 능력 없이는 사이트를 디자인한 적이 없는 디자이너가 있습니다.

제이슨: 네, 사실입니다. 그 경험이 없는 사람은 우리가 자라면서 했던 것처럼 픽셀을 양방향으로 위로 밀어 올릴 필요가 없었습니다. 우리는 하늘을 향해 주먹을 휘두르는 괴팍한 노인들이 아닙니다. 그러나 네, 웹에서 변경된 모든 것들과 함께 놀랍습니다. 일부 사람들은 다른 방식으로 경험하지 못한 아이디어는 놀랍습니다.

Drew: 우리가 웹 글꼴을 얻었을 때는 웹에서 실제로 타이포그래피를 사용할 수 있었기 때문에 웹에서 타이포그래피를 사용하기 시작하는 방식에 엄청난 변화가 있었습니다. 웹 안전 글꼴로 할 수 있는 일이 분명히 있었지만 매우 제한된 팔레트로 제한되었습니다. 그러나 잠재적으로 가변 글꼴과 마찬가지로 거의 중요한 또 다른 큰 변화가 있습니다. 가변 글꼴이란 무엇입니까? 그들은 우리를 위해 무엇을합니까? 우리는 어디에서 시작합니까?

Jason: 저는 항상 사람들에게 참조의 틀을 제공하려고 노력하고 시작합니다. 따라서 웹에서 글꼴을 사용하는 것에 대해 생각할 때 기억해야 할 점은 현재 "전통적인" 글꼴을 사용하는 모든 글꼴이 해당 서체의 개별 너비, 두께, 기울기, 변형이라는 것입니다. 웹에서 사용하려는 모든 항목에 대해 파일을 로드해야 합니다. 본문 복사에 사용하는 일반적인 웹 사이트의 경우 일반적으로 일반, 볼드, 기울임꼴 및 볼드 기울임꼴의 네 가지 글꼴을 로드합니다. 그 모든 것들이 로드되어야 합니다. 이들 각각은 다운로드하고 처리하고 렌더링해야 하는 약간의 데이터입니다.

Jason: 그래서 일반적으로 우리가 수년에 걸쳐 수행한 것은 매우 적은 수의 글꼴을 사용하도록 제한하는 것이었습니다. 이는 실제로 특별히 훌륭한 타이포그래피 연습이 아닙니다. 훨씬 더 넓은 범위를 사용하는 것이 그래픽 디자인에서 훨씬 더 일반적입니다. 주어진 디자인에서 8개 또는 10개의 다른 두께와 서체 변형을 사용할 수 있습니다. 웹에서는 성능 때문에 매우 제한적이었습니다. 가변 글꼴의 가장 큰 차이점은 이러한 순열이 모두 단일 파일에 포함되어 있다는 것입니다. 이 형식은 해당 문자의 일반 모양을 저장한 다음 해당 곡선을 따라 점이 이동하여 굵게 또는 가늘거나 넓거나 좁게 렌더링할 위치의 델타라고 하는 것을 저장하기 때문에 이 형식은 정말 효율적입니다.

Jason: 따라서 차이점만 저장하면 전체 개요를 저장할 필요가 없습니다. 훨씬 더 효율적인 형식입니다. 단일 글꼴 파일만큼 작지는 않지만 개별적으로 찍은 모든 개별 파일보다 훨씬 작습니다. IBM의 Plex Sans와 같은 파일을 보면 모든 개별 파일이 거의 메가바이트에 달할 수 있습니다. 한 파일에는 모든 너비와 두께가 포함된 두 개의 가변 글꼴 파일이 하나의 파일에 있고 다른 파일의 기울임꼴은 230K와 같습니다. 그것은 정말로, 정말로 완전한 캐릭터 세트를 위한 것입니다. 대부분의 사람들은 그 중 일부를 사용하고 더 작게 만들 수 있습니다. 나는 일반적으로 전형적인 서양 언어 웹사이트에 필요한 파일 크기를 약 50~100K로 보고 있습니다. 로드하는 것과 별반 다르지 않습니다... 3~4개의 개별 글꼴 파일을 로드하면 아마도 그보다 더 많은 데이터를 로드하게 될 것입니다. 성능 면에서 흥미로운 승리이지만 또한 CSS를 통해 웹에서 사용할 수 있도록 서체의 전체 범위를 열어줍니다.

Drew: 그래서 식사보다는 레시피를 전달하는 것과 비슷합니다. 여기 기울임꼴 버전이 아니라 볼드체 버전이 있습니다. "여기 일반 버전이 있으며 기울임꼴로 만들려면 이렇게 하고 굵게 만들려면 저렇게 하십시오."와 같습니다. 그러면 유선을 통해 내려가는 파일 크기가 줄어듭니다.

제이슨: 네. 어떤 면에서는 모든 재료를 제공하고 원하는 레시피를 만들 수 있습니다. Plex 예제로 돌아가서 100에서 700으로 가중치를 지정하면 700은 일종의 굵은 글꼴이고 400은 일종의 일반 가중치입니다. 하지만 훨씬 더 가볍습니다. 따라서 정말 크고 정말 가는 줄 머리글을 만들거나 인용 부호 또는 다른 항목을 차단하거나 강조와 같은 것을 수행한 다음 다른 크기에서 굵게 표시하려는 것을 일종의 조정할 수 있습니다. 더 나은 타이포그래피, 더 나은 사용자 경험, 더 나은 성능을 위해 할 수 있는 모든 종류의 일이 있습니다. 바로 그 문지기입니다.

Drew: 그래서 오늘날 우리가 일반적으로 생각하는 것과 대담한 것 사이에 거의 무한한 단계의 조정이 있습니까? 실제로 그 축을 따라 어디든 갈 수 있어 둘 사이를 조정할 수 있습니까?

제이슨: 맞아. 그래픽 디자인을 공부하고 수년 동안 인쇄 디자인을 상당히 면밀히 관찰해 온 사람으로서 내게 정말 흥미롭다고 생각하는 것은 실제로 굵게 표시되는 것이 무엇인지에 대한 아이디어는 렌더링하는 텍스트의 크기에 따라 달라져야 합니다. 따라서 기본적으로 400 및 700은 일반 및 굵게 표시되는 웹의 기본 설정입니다. 그러나 사실, 당신이 대담하게 말하는 유일한 이유는 당신이 강조하기를 원하고 눈에 띄는 것을 원하기 때문입니다. 그러나 작은 크기에서 글꼴이 무거울수록 읽기가 더 어렵습니다. 그것은 일종의 열린 공간을 채우는 것입니다. 대략 16픽셀 크기로 설정되어 있을 때 본문에 700을 사용하거나 거기에서 사용하는 모든 것을 사용하는 대신 충분한 강조를 얻을 수 있지만 문자 형식이 여전히 더 개방적인 경우 550, 575를 사용할 수 있습니다. 그러면 크기가 커지면 더 무거운 무게를 사용할 수 있습니다.

Jason: 하지만 다시 말하지만, 그 시점에서는 일종의 선택입니다. 적절한 수준의 강조를 얻기 위해 이를 변조하면서 여전히 가독성을 매우 좋게 유지함으로써 훨씬 더 많은 유연성을 갖게 되었습니다. 이것이 더 대중적이고 더 널리 사용됨에 따라 사람들이 해당 범위를 사용하는 방식에 대해 조금 더 미묘하게 가르치고 실제로 더 표현력이 풍부하고 가독성이 높아지도록 가르칠 수 있기를 진심으로 바랍니다. .

Drew: 디자인을 프론트 엔드로 구현하고 내게 주어진 디자인을 구현하면서 발견한 한 가지는 어두운 배경의 다른 색상 대비 조합과 밝은 텍스트와 밝은 배경의 어두운 텍스트는 가중치가 완전히 다르게 보일 수 있다는 것입니다. 아마도 이것은 그러한 변화를 기반으로 시각적 및 읽기 경험을 고르게하고 일종의 기교에 도움이 될 것입니다.

제이슨: 물론이죠. 그것은 내가 워크숍과 강연에서 보통 선보일 것 중 하나이며 라이트 모드 미디어 쿼리에 대한 지원을 추가하는 것입니다. 그 대비를 뒤집을 수는 있지만 미묘한 차이가 있는 방식으로 하고 싶을 것입니다. 서체에 따라 세리프체로 보면 정말 무거워 보이거나 가늘게 보일 수 있습니다. 때로는 조금 더 무겁거나 조금 더 가볍게 만들고 싶지만 어두운 배경에 글자가 있거나 글자가 함께 번지는 경우 글자 간격을 띄워야 하는 경향이 있습니다. 타이포그래피에서 조정할 수 있는 것이 거의 없습니다. 미디어 쿼리는 매우 간단합니다. 내 말은, 그것은 귀하의 사이트에 그것을 추가하는 두 줄의 코드와 같습니다. 그런 다음 당신이 그것으로 할 일입니다. 반드시 색상을 반전시키는 것만은 아닙니다. 때로는 대비를 조정해야 하지만 더 나은 가독성을 위해 유형 자체도 조정해야 합니다.

Drew: 아마도 가변 글꼴로 변경할 수 있는 것은 무게만이 아닙니다. 표시된 대로 글꼴을 변경할 수 있는 다른 방법이 있습니까?

제이슨: 네. 그것은 전적으로 유형 디자이너에게 달려 있습니다. 이것이 브라우저의 모든 사람에게 무료가 아니라는 점을 강조하는 것이 정말 좋다고 생각합니다. 브라우저는 글꼴에서 활성화된 것만 렌더링할 수 있습니다. 궁극적으로 무게가 이것까지라고 말하는 것은 활자 디자이너입니다. 너비 축이 있을 수 있습니다. 조금 좁아지거나 넓어지겠지만 등록된 축이라고 하는 것을 가질 수 있는 기능도 있습니다. 너비, 무게, 기울기, 기울임꼴 및 광학 크기가 있습니다. 이것들은 CSS 속성에 매핑되는 모든 종류의 핵심입니다. Slant는 서로 사이의 각도를 허용하므로 직립하고 나는 실제로 전방 경사뿐만 아니라 역 경사를 가진 것을 보았습니다. 완전히 열려 있습니다. 기울임꼴은 일반적으로 켜져 있거나 꺼져 있지만 반드시 그런 것은 아닙니다. 당신은 실제로 할 수 있습니다 ... 글쎄, 당신이 보통에서 기울임꼴로 바뀌면서 점차적으로 글자 형태를 변경하고 그 과정에서 일종의 글자를 대체하는 실험을 한 활자 디자이너가 있습니다. 그것은 일종의 흥미로운 일입니다.

Jason: 하지만 사용자 지정 축을 가질 수 있는 기능이 있습니다. 유형 디자이너는 변경하려는 사용자 정의 축을 정의할 수 있습니다. 당신은 일종의 중력 확산 물방울과 모든 종류의 재미있는 비틀림 모양 또는 세리프 확장을 추가하여 어센더와 디센더의 높이를 변경하는 것을 보았습니다. 소문자 형태에서 세리프인지 아닌지 변경합니다. 당신이 할 수 있는 모든 종류의 일이 있습니다. 그것은 정말로 활자 디자이너의 상상에 달려 있습니다. 나는 우리가 그 모든 것들에 대해 현실적으로 일어날 수 있는 일에 대해서만 표면을 긁고 있다고 생각합니다. CSS를 통해 모두 액세스할 수 있습니다.

드류: 네. 이러한 모든 속성은 나머지 디자인과 함께 제공하는 일반 CSS를 통해 조정할 수 있습니다. 이러한 변경을 트리거하기 위해 CSS에서 어떤 종류의 작업을 수행할 수 있습니까? 이를 트리거하는 미디어 쿼리가 있는 반응형 레이아웃과 같은 방식인가요?

Jason: 할 수 있는 모든 종류의 방법이 있습니다. 당신이 해야 할 작은 변화가 있습니다. 나는 우리가 사람들이 이 물건을 가지고 노는 데 도움이 될 몇 가지 물건에 대한 많은 링크를 제공할 것이라고 가정합니다. 잔뜩 썼단 말이에요. 바라건대, 그것이 사람들을 도울 것입니다. 그런 다음 사용 측면에서 글꼴 두께 축은 글꼴 두께에 매핑됩니다. 일반 굵게 표시하는 대신 숫자만 입력하면 됩니다. 미디어 쿼리를 사용하여 변경할 수 있습니다. JavaScript로 변경할 수 있습니다. 당신은 그것으로 당신이 원하는 무엇이든 할 수 있습니다. 저는 기본적으로 수학을 사용하기 위해 Tim Brown에게 배운 CSS Locks라는 기술을 사용하고 있습니다. CSS 사용자 정의 속성 및 크기 조정을 위한 계산은 작은 중단점에서 큰 중단점까지 도달하면 글꼴 크기와 줄 높이를 부드럽게 조정합니다.

Jason: 그러면 원하는 경우 약간의 JavaScript를 사용하여 가중치로 동일한 작업을 수행할 수도 있습니다. 가중치 축은 CSS 속성인 글꼴 가중치에 매핑됩니다. 글꼴의 너비 축은 글꼴 스트레치에 매핑되며 이는 백분율로 표시됩니다. 많은 서체 디자이너들이 이것이 어떻게 표현되는지에 대해 반드시 생각하고 있는 것은 아니므로 400에서 650과 같은 이상한 일을 하는 중량 범위를 볼 수 있습니다. 여전히 퍼센트로 표현해야 하지만 작동합니다. 괜찮아. 노멀이 무엇인지 알아야 하고 모든 글꼴이 문서화되어 있습니다. 그런 다음 이 두 가지 이외의 다른 항목을 사용하면 현재 기울어짐 및 기울임꼴 구현에 약간 고르지 않은 지원이 있습니다. 글꼴 변형 설정을 사용하는 것으로 돌아가야 하는 많은 것들이 한 번에 여러 가지를 제공할 수 있습니다. 일종의 글꼴 기능 설정과 비슷합니다. 이것은 네 글자 축과 값, 다음 값, 다음 값의 쉼표로 구분된 목록을 제공할 수 있는 일종의 하위 수준 구문입니다.

Jason: 사람들이 염두에 두어야 할 한 가지는 글꼴 변형 설정을 사용할 때 해당 설정에 대한 의미론적 이해를 모두 잃게 되고 대체를 잃게 된다는 것입니다. 글꼴 두께 및 글꼴 늘이기 기능은 모든 브라우저에서 보편적으로 지원됩니다. 반드시 해당 속성을 사용해야 합니다. 다른 경우에는 글꼴 변형 설정을 사용할 수 있습니다. 그러나 일반적인 방식으로 글꼴 두께를 사용하는 것의 장점은 가변 글꼴이 로드되지 않아도 브라우저에서 여전히 그 작업을 수행할 수 있다는 것입니다. 반면에 가변 글꼴을 이해하지 못하거나 로드되지 않는 경우 모든 것이 글꼴 변형 설정에 있으면 모든 스타일 정보를 잃게 됩니다. 어디에서 지원되는지에 대한 약간의 참고 사항입니다. 하지만 대부분의 상황에서 접할 수 있는 모든 배송 브라우저에서 지원된다는 점도 말씀드리고 싶습니다. I-11은 작동하지 않지만 정적 웹 글꼴을 제공한 다음 CSS에서 광고 지원을 사용하여 가변 글꼴로 변경할 수 있습니다. 그러면 자산의 중복 다운로드를 피할 수 있으며 정말 잘 작동합니다. 이미 여러 사이트에서 생산 중입니다.

Drew: 저는 여러분이 보고 있는 대부분의 최신 웹 기술과 마찬가지로 잠시 동안 조용히 거품을 내며 사라지고 있는 가변 글꼴이 있고 마침내 일종의 종지부를 찍고 브라우저에서 지원을 받는 경우라고 생각합니다. 당신과 같은 사람들은 그것에 대해 소음을 내고 모든 사람에게 그것이 있다는 것을 알립니다. 모든 최신 다운로드를 추적하지 않고 일상적인 작업을 수행하는 표준 디자이너 또는 개발자에게 거의 느껴질 수 있습니다. 갑자기 튀어나온 것처럼 보일 수 있습니다. 그러나 이것은 꽤 오랫동안 거품을 일으키고 있다고 생각합니다. 제 말은, 당신은 우리가 지금 다루고 있는 약간 다른 두 가지 구현에 대해 언급했습니다. 구현을 위한 일종의 이전 표준과 새로운 표준이 있습니까?

Jason: 글쎄요, 실제로는 더 오래되고 더 새로운 것이 아닙니다. 둘 다 매우 의도적입니다. 차이점이 무엇인지 이해하는 것이 정말 가치가 있기 때문에 잠시 후에 다시 설명하겠습니다. 하지만 당신 말이 맞아. 이 형식은 3년 전인 2016년 9월에 도입되었습니다. 실제로 3주 후에 Safari의 야간 빌드에서 첫 번째 작업 구현이 구현되었습니다. 작동하는 브라우저가 있다는 것은 매우 놀라울 정도로 빨랐습니다. Safari는 이에 대한 완전한 지원을 제공한 최초의 제품이었습니다. High Sierra가 나왔을 때라고 생각합니다. 잘 모르겠습니다. Safari 12 같은 것이었습니다.

Jason: 하지만 얼마 지나지 않아 Firefox, Edge 및 Chrome에서 지원을 받게 되었습니다. 우리는 실제로 거의 2년 동안 브라우저를 지원했습니다. 그러나 글꼴이 많지 않았습니다. 이런 종류의 꾸준한 진화가 있었습니다. 웹에서 사용하기 위한 지원은 실제로 다른 어느 곳보다 오래되었습니다. 기술적으로 이 형식은 데스크톱 OS에서도 작동합니다. 따라서 TTF 형식이 있는 경우 Windows 또는 Mac의 데스크톱 OS에 설치할 수 있으며 모든 응용 프로그램에서 사용할 수 있습니다. 축을 무한대로 가지고 놀고 싶은 방식으로 항상 축을 변경할 수는 없지만 해당 글꼴 파일에 포함된 명명된 인스턴스의 개념이 우리에게 익숙한 것으로 다시 매핑합니다.

Jason: 예를 들어, Keynote에서는 가변 글꼴에 대한 명시적인 지원이 없지만 Tech Sense에서 다시, 축약된, 가벼운 것과 같은 것이 있으면 형식이 작동합니다. 일반, 일반, 일반 굵게, 좁게 등이 있으며 전체 가족을 설치하는 것처럼 드롭다운 메뉴에서 모두 사용할 수 있습니다. 그런 다음 Illustrator나 Photoshop을 사용 중이거나 지난주에 출시된 InDesign이나 몇 주 전에 출시된 Sketch를 사용 중이라면 모두 이제 가변 글꼴을 지원하므로 다른 모든 축에 액세스하여 원하는 대로 사용할 수 있습니다. 마음의 내용. 하지만 브라우저에서는 더 많은 작업이 필요했습니다. 당신의 아내에게서 힌트를 얻어 나는 사람들이 더 잘 알도록 하기 위해 한동안 이 북을 두드리고 있습니다. 그런 다음 Firefox 팀이 개발자 도구를 만드는 데 수행한 작업에 감사드립니다. Jen Simmons가 이를 추진하면서 우리는 글꼴의 기능을 이해하는 데 도움이 되는 브라우저에서 작업할 수 있는 놀라운 도구를 갖게 되었습니다.

Drew: 서체 디자이너와 글꼴 기능에 대해 언급하셨습니다. 사용할 수 있는 글꼴이 많이 있습니까?

제이슨: 글쎄요, 많은 사람들이 지금 그것을 하고 있습니다. 아마도 그들을 찾을 수 있는 가장 훌륭하고 종합적인 곳은 Nick Sherman의 사이트인 v-fonts.com, v-fonts.com일 것입니다. 바로 카탈로그 사이트입니다. 정말, 정말 빠르게 커지고 있습니다. 현재 더 많은 가변 글꼴이 나오고 있습니다. 오픈 소스가 많지는 않지만 GitHub에서 가변 글꼴을 검색하면 실제로 거기에서 전체 프로젝트를 찾을 수 있습니다. 그러나 Google은 약 12개의 가변 글꼴을 사용할 수 있는 새 API의 베타 버전을 출시했습니다. 그들에게서 더 많은 것이 있습니다. 그들은 Stephen Nixon의 환상적인 새 서체인 recursive.design에서 Recursive를 출시했습니다. 오픈 소스인 Plex 변수 하나를 사용할 수 있습니다. 그 다음에는 수많은 상업적인 것들이 있습니다.

Jason: 멋진 점은 Monotype이 꽤 큰 제품을 출시했다는 것입니다. 그러나 이 형식을 실험하는 데 있어 일종의 선도적인 역할을 하는 것은 많은 소규모 파운드리와 개별 디자이너입니다. 새로운 디자이너나 소규모 디자이너가 이 새로운 영역을 개척하는 새로운 디자인을 모두 볼 수 있다는 것은 디자인에 정말 좋고 웹에도 훌륭하다고 생각합니다. 저는 그들이 이것으로 성공하는 것을 보고 싶기 때문입니다. 왜냐하면 그들이 정말로 주도권을 잡고 훌륭한 물건을 내놓는 데 앞장서고 있기 때문입니다.

Drew: 패밀리가 단일 가변 글꼴로 대체되도록 기존 글꼴을 가변 글꼴로 업데이트하는 것이 보입니까? 전혀 그런 일이 일어나고 있습니까?

제이슨: 그렇지 . Monotype이 출시한 것은 정말 고전적인 서체에 대한 업데이트입니다. FF Meta는 제가 작년에 데모를 디자인하여 출시하는 데 도움을 준 것입니다. 그들은 그것을 가지고 있습니다. Univers, Frutiger, Avenir, 그 4가지가 지금까지 발매된 것 같아요. 그것들은 정말로 일종의 핵심 클래식 브랜드 서체입니다. 더 많은 작업을 하고 있습니다. 나는 그들이 다양한 생산 단계에 있는 또 다른 6개 정도가 있다는 것을 알고 있습니다. 대기업을 위해 수많은 맞춤 서체 작업을 수행하는 Dalton Maag에는 정말 멋진 가변 글꼴이 여러 개 있다는 것을 알고 있습니다. TypeTogether로 작업을 해왔습니다. 그들은 또한 몇 가지 정말 훌륭한 서체를 가지고 있습니다. 그거 알아요...

Jason: 나는 Adidas도 거의 2년 동안 인쇄된 모든 브랜드 작업에 사용하고 있는 이러한 것들에 대해 이야기한 컨퍼런스 중 일부를 보여주었습니다. 정말, 정말 놀라운 물건입니다. 그러나 Mark Simonson도 Proxima Nova의 가변 버전을 작업하고 있습니다. 그것은 일종의 큰 문제입니다. 그것은 모든 시간의 베스트 셀러 웹 글꼴 중 하나였습니다. 그것은 일어나고있다. 그것은 규모의 위아래로 조금씩 일어나고 있습니다. 그러나 Font of the Month Club인 David Jonathan Ross를 구독하는 것과 같이 간단한 일이라도 거의 매달 가변 글꼴을 받게 됩니다. 내 말은, 그는 그가 내놓은 것들에 대해 정말 놀라웠어요. 1년에 $72 정도입니다. 그는 온갖 종류의 정말 아름다운 것들을 내놓았습니다.

Drew: 그러면 분명히 가변 글꼴의 기능을 사용하여 이러한 글꼴을 사용하는 새로운 디자인을 만들 수 있기 때문에 매우 흥미롭습니다. 그러나 잠재적으로 누군가가 돌아가서 다시 방문하여 여러 글꼴 파일을 새로운 가변 글꼴 버전을 기반으로 하는 새 구현으로 대체할 수 있는 가변 글꼴 버전이 있는 프로덕션에 있는 사이트가 있을 수 있습니다.

제이슨: 네, 물론입니다. 꽤 정기적으로 받는 질문 중 일부입니다. 최근에 개발팀이 저에게 같은 질문을 한 꽤 큰 스포츠 중계 사이트를 보고 있었습니다. 나는 그들이 사용하고 있는 두 개의 서체에 대해 보았고, 확실히 가변 글꼴을 사용할 수 있습니다. 잠깐의 연구에 따르면 한 서체의 네 가지 인스턴스와 다른 세 개의 인스턴스를 두 개의 가변 글꼴 파일로 대체할 수 있으며 다섯 번의 요청으로 파일 크기의 70% 이상을 차지할 수 있습니다. 내 말은, 그것은 성능 관점에서 질문 승리가 될 것입니다. 정말 대규모 사이트의 경우 수백만 명의 사용자에 걸쳐 거의 300K 데이터 다운로드를 제거하면 실제로 실제 비용 절감과 대역폭 비용이 추가됩니다. CSS를 다시 작성하지 않고 해당 글꼴을 교체하는 순전히 실용적인 관점에서도 이미 성능, 페이지 렌더링 시간 및 실제 대역폭 비용면에서 상당한 이점이 있을 것입니다.

Drew: 실제적인 측면에서, 하나를 다른 것으로 교체하는 것이 들리는 것처럼 간단합니까?

제이슨: 그럴 수 있습니다. 그 완벽한 예는 Google이 9월 ATypI에서 하루에 1억 5000만 번이나 오스왈드와 함께 그렇게 하기 시작한 ATypI에서 무심코 넘어간 것입니다. 그들은 가변 글꼴 버전을 만들고 상당한 이점을 얻을 수 있는 충분한 인스턴스를 사용하는 웹 사이트에서 서핑을 시작했습니다. 그들은 아무에게도 말하지 않았습니다. 그들은 사이트 소유자에게 말하지 않았습니다. 아무도 할 필요가 없었습니다. 가중치 축에 대한 올바른 매핑이 있었기 때문에 기본값이 제대로 작동합니다. 하루 1억 5000만 번은 많은 서체를 제공하고 있다. 그것은 그들이 제공하는 상위 5개 웹 글꼴로 전환하기 시작할 수 있다면 이 풍경이 어떻게 보일지에 대한 더 나은 통찰력을 제공하기 시작했습니다. 나는 Open Sans가 아마도 그 중 하나라고 가정합니다. 거기에 Lato가 있을 거라는 걸 알아, Roboto.

Jason: 그래서 만약 당신이 그것들을 보고 그것들의 최적화된 버전이 어떻게 생겼는지 보면, 구글이 그것에 관심을 가질 아주 분명한 이유가 있다는 것을 알 수 있습니다. 그런 다음 반대쪽을 보면 디자인 공간만 있으면 회사가 다른 글꼴로 바꾸거나 더 많은 글꼴을 바꾸지 않고 자체 브랜드 글꼴의 전체 범위로 작업한다면 브랜드 보이스에 얼마나 더 충실할 수 있을까요? 팔레트에서 제한적입니다. 그래서 그 스펙트럼의 양쪽 끝에서 배우고 탐구할 정말 흥미로운 것들이 있습니다.

Drew: 그것은 우리가 전에 할 수 있었던 것보다 더 민감하고 잠재적으로 더 창의적인 방식으로 웹에서 타이포그래피와 타이포그래피의 새롭고 멋진 세계처럼 들립니다.

제이슨: 글쎄요, 그게 제가 바라는 바입니다. 나는 모든 단계에서 웹에서 글꼴을 채택하는 데 있어 가장 큰 장벽 중 하나가 성능이라고 생각합니다. 그래서 무슨 일이? 로드하는 데 얼마나 걸립니까? 페이지의 렌더링 시간은 무엇을 의미합니까? 보이지 않는 텍스트나 스타일이 지정되지 않은 텍스트가 번쩍이는 문제가 있습니다. 그 모든 것들과 씨름하면서 정말로, 모든 것이 거기에 도달하는 데 얼마나 걸립니까? 브라우저는 이에 어떻게 반응합니까? 이러한 문제를 완화하기 위해 우리가 할 수 있는 일이 많이 있습니다. 그러나 더 나은 글꼴과 더 나은 서비스 방법이 있다면 이러한 모든 문제가 훨씬 덜 중요해집니다. 그렇게 하면 훨씬 더 표현력이 좋아집니다. 우리는 이것의 디자인 끝을 정말로 시도하고 밀어붙이고 조금 더 창의적이 되도록 노력할 수 있습니다.

Drew: 최근에 웹이 사이트별로 기사 템플릿을 디자인하는 함정에 빠졌다는 느낌을 표현하는 방식으로 글을 작성하셨기 때문입니다. 그러나 모든 사람들은 내 눈에 매우 읽기 쉬운 단일 열의 텍스트로 된 이 medium.com 스타일로 표류하고 있습니다. 멋지게 조판. 그게 그렇게 나쁜 일입니까?

제이슨: 나쁘지 않은 것 같아요. 지루할 것 같아요. 내 말은, Medium이 나왔을 때, 그것은 꽤 참신했습니다. 내 말은, 내 생각에 한 칼럼은... 당신이 말했듯이, 그것은 꽤 멋지게 조판된 카피였습니다. 좋은 지역이 있습니다. 붐비지 않았습니다. 그것은 비좁고 사이드바와 다른 모든 것들이 아닙니다. 비즈니스 모델과 이를 뒷받침할 것이 무엇인지에 대한 질문이 항상 있을 것입니다. 이것이 Mule Design의 Mike Monteiro가 몇 년 전에 한 시애틀 타임즈의 정말 아름다운 재설계 이유입니다. 출시 전까지는 정말 멋졌습니다. 그런 다음 그들은 기둥의 양쪽에 이 거대한 배너를 설치했고 그 공백을 모두 없앴습니다. 정말 부끄러운 일이었습니다.

Jason: 회사는 돈을 벌어야 한다는 것을 이해합니다. 그에 따른 여파가 있습니다. 그래서 하나의 옵션을 갖는 것이 좋을 것입니다. 그 멋진 깨끗한 레이아웃을 가지려면. 하지만 그것만이 아니어야 합니다. 우리는 여백과 레이아웃으로 정말 흥미로운 일을 할 수 있게 해주는 CSS의 이러한 모든 기능을 가지고 있습니다. 제 말은, 우리가 지금 그리드를 가지고 있다는 사실만이 아닙니다. 그러나 CSS의 브라우저에서 계산을 할 수 있다는 사실은 우리가 훨씬 더 흥미로운 일을 할 수 있게 해줍니다. 거기에 글자를 더 많이 표현할 수 있는 기능을 추가하면 잡지에서 그들이 하는 일을 살펴볼 수 있습니다. Vanity Fair에는 하나의 기사 템플릿이 없습니다. 6개, 7개 또는 8개가 있습니다. 그것들이 어떻게 배치되어 있는지 실제로 보면 엄청난 양의 가변성이 있지만 시스템 내에서 재생되고 있습니다.

Jason: 따라서 웹사이트용 디자인 시스템을 만들 때 하나의 레이아웃에서 멈추지 않고 콘텐츠 관리 시스템에 몇 가지 스위치를 구축할 수 있는 비교적 쉬운 방법이 있습니다. 대부분은 상당한 유연성을 지원합니다. 우리가 사람들에게 선택권을 주지 못할 이유가 없습니다. 레이아웃 1, 2, 3, 4, 5, 6을 사용하고 싶습니다. 그것은 다른 여백, 다른 오프셋을 도입할 것입니다. 일부 열을 만드는 기능을 도입할 수도 있습니다. 훨씬 더 흥미로운 웹을 만들기 위해 우리가 할 수 있는 일들이 많이 있습니다. 그런 부분에서 정말 큰 역할을 할 수 있을 것 같아요.

Drew: 웹에 좀 더 개성을 추가할 때 타이핑이 우리의 구원자입니까?

제이슨: 글쎄요, 그럴 수도 있을 것 같아요. 나는 우리가 웹에서 더 나은 사용성을 위해 오랫동안 진화해 왔다고 생각합니다. 그러나 사상자 중 하나는 우리가 항상 염려하는 것이 실용적이고 사용 가능한 접근 방식일 때라고 생각합니다. 그것은 성격을 이기는 경향이 있습니다. 그리고 모든 단일 웹사이트가… 그러다가 갑자기… 디스플레이가 더 좋아졌습니다. 그래서 세리프가 다시 혼합되었습니다. 웹에서 다시 사용할 수 있습니다. 이러한 것들이 생명을 더했습니다. 그런 다음 하나 또는 두 개의 San-serif를 사용하여 모든 사람에게 다시 최적화되었습니다. Open Sans 또는 Roboto 또는 Oswald 등입니다. 우리는 정말 훌륭하고 정말 읽기 쉬운 서체가 수없이 많았던 것과 같은 방식으로 돌아갑니다. 우리는 타이포그래피에 관해 많은 것을 주도하는 현 세대의 UX 디자이너를 실제로 가르치지 않았습니다. 얼마나 표현력이 좋은지, 분위기와 어조를 얼마나 바꿀 수 있는지에 대한 모든 것입니다.

Jason: 그래서 우리는 그래픽 디자인과 가독성 개념을 연구한 사람만큼 정보가 부족할 수도 있는 활자에 대한 아이디어를 가지고 웹상의 디자인 방향을 지시하는 많은 사람들을 보유하고 있습니다. 그런 것들을 하나로 모아야 합니다. 둘 중 하나가 아닙니다. 그리고 입니다. 그럴 필요가 있다.

Drew: 특히 성격과 어조와 분위기에 대해 이야기할 때요. 비즈니스 관점에서 또는 우리가 이야기하는 것은 브랜드의 측면입니다. 모든 것을 동일하게 보이게 하는 과정에서 고객에게 브랜드를 전달할 수 있는 능력을 상실하고 있습니까?

제이슨: 물론이죠. 정치에 뛰어드는 것이 아니라 전체가... 미국에서 확실히 경험한 주요 문제 중 하나이며 지난 몇 년 동안 영국에서 일어난 일과 크게 다르지 않다고 확신합니다. 모든 뉴스가 하나의 플랫폼을 통해 소비되고 모든 것이 똑같아 보이면 음성의 구별이 없습니다. 따라서 미국 성인의 75%가 Facebook에서 뉴스의 상당 부분을 얻는다고 말합니다. 내 말은, 그것이 얼마나 일반적으로 끔찍했는지 제쳐두도록 합시다. 그러나 모든 것이 획일적으로 제시된다는 점에서 가디언의 기사, 뉴욕타임즈, 월스트리트저널, 워싱턴포스트, 조의 우익뉴스 사이에는 별 차이가 없다. 그것은 모두 정확히 동일하게 제시됩니다.

Jason: 저 로고, 저 활자 스타일을 볼 때 Guardian은 매우 특징적입니다. 월스트리트 저널은 매우 특징적입니다. 우리는 헤드라인만 보더라도 즉시 인식합니다. 우리는 그것이 어디에서 왔는지 압니다. 그런 다음 해당 브랜드 및 해당 진정성과의 자동 연결이 있습니다. 이 모든 것을 제거하면 "좋아, 나는 이것을 헤드라인에서 평가할 것이다. 그렇다면 누가 더 나은 헤드라인을 썼습니까? 계속 할 일이 많지 않습니다. 그래서 우리는 엄청난 손실을 입었다고 생각합니다. Apple News Plus가 하려는 작업을 살펴보면 일부 기업에서 이를 재도입하려는 노력이 있습니다. Blundell은 유럽에서 정말 흥미로운 일을 했습니다. 그들은 미국에서 시작했지만 실제로 그렇게 성공적이었는지는 잘 모르겠습니다. That was a platform that would allow you to subscribe and see content from all these different top level newspapers and publications. It would always be in their own design. So that was really kind of an interesting approach there. It was always preserving the brand voice, that authenticity and that authority that would go along with that news. It really helped provide some cues for you as a reader to kind of evaluate what you're reading.

Jason: I think that's important. I think it's not something to be taken lightly.

Drew: Thinking back to RSS readers in days gone past, the same sort of problems we were seeing then where everyone's content was being just distributed via RSS and appearing in a reader in identical format, identical layout. I think you do lose something of the personality and the voice.

Jason: Yeah. 사실이야 I don't think that's an entirely solvable problem. I think if you can imagine an RSS reader with a different typeface for every headline, it would be crazy. There's a reason why that that doesn't work that well, but there has to be some middle ground. Type does play a role in that. Then certainly, once you get back to the website, there is that sort of instant recognizability that will help that experience stand apart from seeing it anywhere else.

Drew: So say I'm a designer. I'm working in a small agency. I'm turning out designs for all sorts of different clients. I look at my work. I think, “This is all good. This is readable, but it's got no personality in it.” Where do I start to actually put back some interest, some excitement, and not just lean on this sort of uniform UX driven layout that I've sort of conditioned myself to use?

Jason: Well, I think the thing to do is if you've never studied typography, you haven't necessarily kind of trained your eyes to see what the differences are in one typeface to another. Even when you have studied graphic design, you have to remind yourself of these things all the time. So I think oftentimes that I'll recommend, and actually, I wrote about this a few weeks ago because I kept getting asked like, “Where do you start?” I made a list of books that I think are really helpful. So something like Ellen Lupton's book, Thinking with Type is a fantastic introduction to looking at type and seeing it. Erik Spiekermann's book, Stop Stealing Sheep is a great one although I think at the moment, it's out of print. I think that he might be working on another edition but that's so… If you find that one, that's a good one as well.

Jason: Those will help introduce you to the terminology and understanding what the differences are between the different styles of text. Then once you have that basic introduction, it gives you a better frame of reference when you look at other websites. Getting a sense of like, why does this one feel warmer than that one? What are the combinations of type? 특성은 무엇입니까? As a web developer often does or web designer often does, you inspect an element, see what the typeface is that's being used there, and that can start to help build a palette of ones that you become familiar with. Very often, designers do hone in on a few that they get to know well and they tend to use them on a lot of different projects. That's not necessarily a bad thing. It's certainly better now if you're working with a variable font and you can be that much more varied.

Jason: So you can decide that on this website, this is what I want to call normal. This is the width that I want to use and the other aspects of it. So even using the same typeface across websites because you have access to the full range of characteristics, it could still look quite different.

Drew: So I think there's a lot of reading to be done. I'm sure we'll add some links to the show notes of all the excellent articles you've written up and some references to these books and what have you. Because I think there's so much to learn. I think we've always got to be learning with these things. The learning never ends.

Jason: It's true. 그건 진실이야. That is something that I've enjoyed immensely when I started writing this newsletter. Every week when I'm writing it, I'm reading more of the specs. I'm reading more of what other people have discovered and written. There's tremendously knowledgeable folks out there. Rich Rutter, for instance, from Clearleft, wrote a fantastic book called Web Typography. He was one of the founders of Font Deck, which was one of the very first services to launch. He's always been kind of the most scholarly of authors about this stuff. I mean, he's really tremendously thoughtful in the way he puts those things together. But there's a bunch of people doing really interesting stuff. That has kind of forced me to kind of keep up with what other people are doing all the time, which is really fantastic.

Drew: Is there anything in particular that you've been learning lately?

Jason: The stuff that I've been learning the most is actually the corners of the specs. I think it's something that… I mean, again, probably the biggest influence for me on that is probably Rachel [Andrew]. That she's always talking about like, “Well, if you actually read what's written here, there's actually really good stuff to know.” So in reading exactly what the specs are, there's a tremendous amount of great typographic control that is available to us. Then layering into that different things like mix blend modes and CSS and learning more about different size units and how they interact together and learning how to use and where you can use CSS custom properties. I keep reading little bits more and more and then kind of compare that to what the browsers are doing. It really has been a tremendous experience for me in what I've been learning every week. Even having been doing this stuff for 25 years, there's still like a new gem every time I dig into one of these things.

Drew: That's fantastic. 감사합니다. So if you dear listener would like to hear more from Jason or perhaps hire him to work with you on your web typographic challenges, you can follow him on Twitter where he's @jpamental, or find his website at rwt.io where you can also find the web typography newsletter to sign up to. So thanks for talking to us today, Jason. Do you have any parting words?

Jason: Yeah, experiment. I mean, there's lots of open source stuff to play with. I think once people get this in their hands and get familiar with it, that I think they'll start to see more and more how much fun they can have with this stuff and how much more expressive they can be. I think I was talking to the design director at The Wall Street Journal actually on Friday. I was then talking to their design team. We were talking about it's great that you have a design system that standardizes things, but it's then like any good design where you break that rule. That's where the exciting things really happen. So we've gotten this necessary evolution of like getting really good at the system. Now we've got to break it some. That's when we can get excited again. Break the rules. That's my best advice, I think.