다양한 글꼴을 사용한 타이포그래피의 진화 : 소개

얇고 두껍고 그 사이의 모든 것 : 모노 타입의 FF 메타 변수

말은 힘이 있고 활판 인쇄는 그들의 목소리입니다

수세기 동안, 유형은 우리가 읽은 것을 '듣는'방식이었습니다. 또한 서체와 활판 인쇄는 브랜딩, 표현, 보컬 범위의 핵심 요소라는 것이 일반적으로 이해됩니다. 훌륭한 타이포그래피는 수많은 방식으로 이해, 분위기 및 의미에 영향을 미치며 디자인의 필수 부분입니다. 안타깝게도 웹이 등장한 후 수년 동안 가장 기본적인 인쇄 디자인을 제외한 모든 것을 온라인 콘텐츠에 적용 할 수 없었습니다. 합자, 특정 그림 세트, 분수 및 실제 자간과 같은 실제 글꼴과 OpenType 기능을 사용할 수있게되면서 활판 인쇄 환경이 엄청나게 향상되었습니다. 그러나 웹에서 콘텐츠를 보는 현실은 속도가 디자인의 가장 중요한 요소라는 것을 나타내므로 인쇄 속도의 '보컬 범위'를 페이지 속도로 바 꾸었습니다. 즉, 글꼴 무게가 줄어들고 브랜드 충실도와 음성이 줄어 듭니다.

많은 것에서 하나 (패러다임 : 변화)

가변 글꼴은 많은 글꼴로 작동하는 단일 글꼴입니다.
— 존 허드슨

가변 글꼴의 출현으로 전체 동적이 변경됩니다. 존 허드슨 (John Hudson)이 설명했듯이, 가변 글꼴은 많은 글꼴과 폭, 무게, 기울기 및 이탤릭체 등을 모두 효율적이고 압축 가능한 단일 글꼴 파일에 포함 할 수있는 단일 글꼴입니다. 또한 기술적으로 OpenType 1.8 사양의 일부인 형식은 완전히 확장 가능합니다. 타입 디자이너는 사용되는 축, 범위 및 심지어 새로운 축의 정의를 완벽하게 제어합니다. 현재 5 개의 '등록 된'축 (너비, 무게, 기울기, 기울임 꼴 및 광학 크기)이 있지만 설계자는 선택한 축을 다양하게 변경할 수 있습니다. 일부 예에는 오름차순 및 내림차순의 높이, 텍스트 등급, 심지어 세리프 모양이 포함됩니다. 가능성은 거의 무한합니다. 우리는 성능 장벽을 제거함으로써 더욱 흥미롭고 역동적 인 디자인과 브랜드의 진정한 목소리를 표현할 수있는 훨씬 더 큰 능력을 제공합니다. 활자체 자체에 대한 충실도를 유지하면서이 모든 것이 가능합니다. 유형 디자이너가 노출 한 축만 변할 수 있습니다. 인공 왜곡이 허용되지 않습니다.

재 설계된 웹 디자인

기술이 아직 성숙하고 있으며 유형 디자이너가이 새로운 작업 방식에보다 유창 해 지도록 노력하고 있지만 웹에서의 디자인에 대한 약속은 획기적입니다. 일반적인 시나리오는 특정 디자인을 3 ~ 5 개의 다른 글꼴로 제한하여 본문 디자인 및 제목에 대한 모든 순열을 포함하여 사이트 디자인 언어 및 음성의 모든 측면을 나타냅니다. 가장 간단한 구현에서 가변 글꼴을 사용하면 모든 수준의 제목에 대해 서로 다른 가중치를 자유롭게 사용할 수 있으므로 명확성과 가독성이 크게 향상됩니다.

100 ~ 900의 앰퍼샌드

제목이나 데이터 밀도가 높은 정보 표시에 약간 좁은 문자 너비를 사용할 수도 있습니다. 실제로 전체 타이포그래피 시스템은 비례 적으로 설계 될 수 있습니다. 표준 바디 카피 설정에서 무게와 너비가 배수가 될 수 있습니다. 이렇게하면 화면 크기 나 사용자 기본 설정에 따라 설정이 변경되는 경우 본문 사본과 함께 이러한 측면을 쉽게 확장 할 수 있습니다. HTTP 요청 (글꼴 파일 수가 적음) 및 다운로드 할 데이터의 전체 절약 (글꼴 및 압축에 따라 다름)으로 인해 성능이 향상됩니다.

그러나 이러한 자유로 인해 표현력이 향상 될 수 있지만 실제로 흥미로운 기능 중 일부는 읽기 경험 자체를 변화시키는 데 도움이됩니다. 이 페이지 (실제 데모 페이지 자체)는 1991 년 처음 출시 된 Erik Spiekermann의 고전적인 산세 리프 디자인 인 FF Meta의 새로운 가변 글꼴 버전으로 설정되었습니다. 로마자 및 이탤릭체 변형의 경우 성능이 크게 향상되어 훌륭한 음성 범위를 얻을 수 있습니다. 18 개 파일과 288k 이상은 84k의 단일 파일로 대체되었습니다.

화면에서 다시 읽음

[메타] 예뻐 보이는 것보다 더 많은 것을해야한다 : 꽤 열심히 일해야한다
— 에릭 스 피케 만

좋은 독서 경험을 만드는 데있어 가장 큰 어려움 중 일부는 세부적인 부분의 세부적인 부분이 부족하다는 것입니다. 최신 CSS와 OpenType 기능 및 변형의 조합은 강력한 조합을 나타냅니다. 언어를 기반으로 합자 및 하이픈과 같은 기능을 설정하고, 화면 크기를 기준으로 하이픈을 켜거나 끄고, 작은 화면에서 문자 너비를 조정하여 글꼴 크기를 줄이지 않고 한 줄에 더 많은 문자를 맞추면 글꼴 크기를 크게 향상시킬 수 있습니다. 독서 경험의 부드러움과 편안함.

클로즈업 준비

Garamond의 18 세기 컷은 광학 크기로 컷되었습니다. 첫 번째 이미지의 크기는 6pt이고 두 번째 이미지의 크기는 72입니다. 획 대비의 차이에 유의하십시오. 더 큰 크기로 훨씬 더 세련됩니다.

금속 유형에서는 일반적이지만 사진 조판 및 디지털로 변환 할 때 손실되는 또 다른 기능은 광학 크기 조정이었습니다. 산세 리프 디자인에서 흔히 볼 수있는 것은 아니지만 수십 년 전 (실제로, 수 세기 동안) 물리적으로 작은 크기의 서체는 약간 더 무거운 스트로크, 더 열린 그릇 및 카운터로 자르는 것이 일반적이었습니다. 가독성을 유지하기 위해 조리개가 더 넓은 경우도 있습니다. 특히 신문에서는 줄을 잃지 않거나 문자가 잉크를 너무 많이 쓰지 않도록하는 것이 중요하다는 것을 알았습니다.

광학 크기 조정은 가변 글꼴로 반환되었으며 사용 가능한 경우 자동으로 적용하거나 웹 디자이너 또는 개발자가 명시 적으로 설정할 수 있습니다. 언급했듯이, 산세 리프 서체에서는 이와 같은 기능이 빈번하지는 않지만 스트로크 대비가 높은 세리프 디자인에서 극적인 효과를내는 데 사용될 수 있습니다.

폴란드어와 포이즈

이미 논의 된 이점으로 인해 가변 글꼴의 경우는 매우 매력적입니다. 그러나 훌륭한 타이포그래피가 훌륭한 디자인을위한 것은 아닙니다. 너비와 무게와 같은 축의 범위는 엄청난 수의 파일 자산을로드하지 않고도 웹에서 더 많은 편집 디자인을 수용 할 수있는 자유를줍니다. 그리고 우리는 이미 필요한 가변 글꼴이 거의 없기 때문에 콘텐츠 게시자가 사용할 글꼴을 공개 할 기회가 있습니다. 웹 사이트가있는 컨텐츠 관리 시스템 (또는 CMS) 내부의 디자이너 역할을 상상해보십시오. 이 디자이너는 CMS에 내장 된 몇 가지 간단한 컨트롤을 사용하여 특정 헤드 라인이나 인용 부호를 조판 할 수 있으므로 매번 사용자 지정 코드를 작성할 필요없이 인쇄물에있는 것과 같은 완전히 새로운 수준의 디자인이 가능합니다.

우리는이 새로운 시대의 시작 일지 모르지만 미래는 확실히 밝습니다.

2018 년 5 월 현재, 4 개의 주요 웹 브라우저 중 3 개가 이미 지배적 인 모바일 플랫폼 외에도 다양한 글꼴을 지원합니다 (caniuse.com에서 지원 확인). 이를 염두에두고 오늘 웹 조명을 시작할 준비가되었습니다.

CodePen의 전체 페이지는 다음과 같습니다. 모든 것을 함께 살펴보고 그것을 작동시키는 CSS를 들여다보십시오. 여기에는 Jen Simmons와 Tim Brown으로부터 배운 일부 아이디어를 기반으로 뷰포트 단위, CSS 사용자 정의 속성 (일명 변수) 및 많은 계산을 사용하여 만든 스케일링 인쇄 체계가 포함됩니다. CodePen에서 직접 보거나 실제로 아래에 포함되어 있는지 확인할 수 있습니다.

서체와 프로젝트에 대한 몇 가지 생각

저는 항상 Erik Spiekermann의 작품의 팬이었습니다. Meta, Officina, Fira의 연대기 및 역사는 정말 흥미롭고 지난 25 년 동안 저에게있어 디지털 디자인의 일부였습니다. 디자인 세계에서 그런 종류의 역사와 영향을 가진 서체를 사용하여 새로운 기술의 맥락에서 함께 작업 할 수있는 기회는 정말 흥미로 웠습니다. 특히 동일한 파일의 일부로 가중치와 기울임 꼴로 작업 할 수 있다는 점에 특히 감사했습니다. 변수 글꼴 형식의 값을 실제로 잘 보여줍니다.

기사 자체를 작성할 때까지 페이지 디자인을 시작하지 않기로 결정했습니다. 디자인 언어 및 브랜드 표현과 같은 우려를 불러 일으킬 수있는 다양한 글꼴의 이점을 디자이너와 브랜드 소유자에게 소개하기 위해 좋은 소개를 작성하고 싶었습니다. 좋은 초안이 있다고 생각되면 서체 자체와 디자인 어휘의 위치에 대해 좀 더 구체적으로 추가했습니다. 이것은 서체와 역사를 모두 보여주는 방법에 대한 아이디어를 주었다.

기본 조판에 대해 생각하면서, 나는 규모를 went습니다. 나는 대부분의 디자인이 사용 된 가중치에 더 구속되어 있기 때문에 웹에서 자주 볼 수없는 방식으로 극심한 무게와 크기로 놀고 싶었습니다. 이 경우 로마자 및 이탤릭체로 100에서 900까지의 모든 범위의 가중치를 사용했습니다. 내가 좋아하는 레이아웃을 얻기 시작했을 때, 기능을 설명하기 위해 그래픽을 만드는 대신 그림을 풀 인용 부호와 약간의 '인쇄 적'스타일 글꼴 데이터로 만드는 것이 더 흥미로 웠습니다.

앰퍼샌드의 상단 터치는 실제로 FontFont 사이트의 유형 견본 페이지에서 영감을 얻었습니다. 앰퍼샌드의 모든 가중치를 서로 겹쳐서 표시하는 글리프 샘플러가 있습니다. 원래는 루프에서 애니메이션을 적용 할 때와 동일한 방식으로 모두 쌓아 놓았습니다. 그러나 일부 브라우저에서는 여전히 가변 글꼴과 키 프레임 애니메이션을 구현하고 있습니다. 재생 / 일시 정지 옵션을 사용하여 겹치는 레이아웃을 칠 때 (특히 모바일에서) 퍼지는 모양이 마음에 들었습니다. 그래서 나는 그것을 뒤집어 정적으로 시작한 다음 애니메이션을 한 번 재생하고 스프레드 / 레이어 레이아웃으로 돌아갑니다.

콘텐츠와 디자인 모두에 만족하고 다른 화면 크기에서도 콘텐츠가 움직이고 진화하는 방식에 만족합니다. 다른 사람들에게도 영감과 교훈이되기를 바랍니다.

[Monotype은 최근에 Erik Spiekermann의 클래식 디자인 인 FF Meta의 새로운 가변 글꼴 릴리스를 제공하는 데모 페이지를 작성하고 디자인했습니다. 이것은 해당 페이지의 텍스트와 일부 비주얼입니다. 전체 라이브 페이지는 CodePen에서 호스팅되며 위에 포함되어 있습니다. 모두에게 공개되어 있으므로 자유롭게 복사하여 직접 연주하십시오. 기술에 대한 소개도 볼 수 있습니다.]

내 블로그에 게시 된 원본 콘텐츠