미니 튜토리얼 – 글꼴 조합 가이드

"타이포그래피는 경험과 상상력을 기반으로 하는 2차원 아키텍처이며 규칙과 가독성에 따라 결정됩니다." —헤르만 자프

불과 몇 년 전만 해도 디자이너는 웹 글꼴 선택에 심각한 제한을 받았습니다. 옵션은 일반적으로 시스템 글꼴로 제한되었으며 사이트 방문자가 해당 글꼴을 설치하기를 희망했습니다.

웹 글꼴은 90년대 후반에 기술적으로 가능했지만 WOFF 형식을 사용할 수 있고 W3C 공개 표준의 일부가 된 2009년까지는 널리 사용되지 않았습니다. 이는 디자이너에게 완전히 새로운 활자체 옵션의 세계를 열었습니다.

그리고 거기에 딜레마가 있습니다. 웹 디자이너가 사용할 수 있는 서체는 말 그대로 수천 가지인데, 함께 잘 작동하고 제공되는 콘텐츠를 지원하는 글꼴 조합을 만드는 방법은 무엇입니까?

좋은 타이포그래피와 최고의 글꼴 조합을 사용하면 동급 제품의 디자인을 더욱 돋보이게 하고 보다 즐거운 사용자 경험을 제공할 수 있습니다. 효과적인 유형 조합은 방문자를 페이지에 더 오래 머물게 할 수 있는 디자인에 시각적인 흥미를 더합니다.

대조적으로 나쁜 유형은 내용을 읽기 어렵게 만들고 읽는 사람에게 덜 유쾌하게 만들 수 있습니다.

글꼴을 효과적으로 결합하는 방법을 배우는 것은 디자이너 교육의 중요한 디딤돌이며 지속적으로 개선되고 개선되어야 합니다. 타이포그래피를 마스터하는 디자이너는 가장 단순한 디자인도 더 효과적으로 만들 수 있습니다. 글꼴 결합에 대한 기본 타이포그래피 지침을 따르는 것이 가장 좋은 출발점입니다. 이러한 "규칙"을 마스터하면 디자이너는 이러한 규칙을 굽히거나 깨뜨리는 인쇄상의 조합을 만들기 위해 분기하고 실험할 수 있습니다.

유형 특성

수십만 개의 서체를 사용할 수 있기 때문에 고급 디자이너에게도 어디서부터 시작해야 할지 막막할 수 있습니다. 서로 다른 서체의 특성을 이해하는 것은 효과적으로 결합하는 방법을 배우는 첫 번째 단계입니다.

이러한 특성이 서로 어떻게 관련되는지 배우면 디자이너는 자신 있게 글꼴을 결합하고 예기치 않은 조합을 실험할 수 있습니다. 실험과 실습을 통해 디자이너는 글꼴 조합 기술을 진정으로 연마하고 다른 전문가와 차별화되는 디자인을 만들 수 있습니다. 때로는 직관에 귀를 기울이는 것이 정말 빛나는 서체 조합을 만드는 가장 좋은 방법입니다.

분류

서체 분류는 이해해야 할 가장 기본적인 개념 중 하나입니다. 배울 4가지 기본 분류가 있습니다: 세리프, 산세리프, 스크립트 및 장식.

세리프체와 산세리프체는 헤드라인과 본문 모두에 적합합니다. 그러나 스크립트(손글씨 글꼴이라고도 함) 및 장식 서체는 일반적으로 헤드라인과 제목 또는 기타 작은 텍스트 덩어리에만 사용할 수 있습니다.

Serif 글꼴은 특히 인쇄 디자인에서 긴 텍스트 청크(예: 본문 텍스트)에 대해 더 읽기 쉬운 것으로 간주됩니다. 그러나 산세리프체는 가독성이 높고 더 작은 크기(예: 캡션 또는 메타 정보에 사용되는 글꼴)에서도 탁월합니다.

산세리프체는 또한 웹에서 더 많이 사용되며 세리프체보다 가독성이 더 좋은 것으로 널리 알려져 있습니다. 그 중 일부는 저해상도 화면이 크기에 따라 세리프 글꼴을 다소 흐릿하게 만들던 컴퓨팅 초창기에서 비롯되었습니다. 최신 HD 및 Retina 화면에서는 이것이 문제가 되지 않으며 serif 및 sans serif 서체를 모두 효과적으로 사용할 수 있습니다.

이미 내장된 글꼴 사이에 대비 수준이 있기 때문에 서로 다른 분류의 서체를 결합하는 것이 분류 내에서 결합하는 것보다 더 간단합니다. 즉, 다른 특성을 고려하는 한 동일한 클래스의 서체를 효과적으로 결합하는 것도 가능합니다.

무게

두께는 서체 내의 글꼴 두께를 나타냅니다. Thin, regular, semibold, bold 및 검은색이 가중치의 예입니다.

서체를 결합할 때 가중치 간의 대비는 필수적입니다. 매우 두꺼운 글꼴과 매우 가벼운 글꼴을 결합하면 종종 균형이 잡히지 않습니다. 그러나 동일한 무게의 서체를 결합하는 것도 어려울 수 있습니다.

대신, 특히 글꼴 조합으로 시작할 때 눈에 띄지만 굵기의 차이가 크지 않은 서체를 찾는 것이 가장 쉽습니다. 디자이너는 거기에서 더 눈에 띄는 구별로 분기할 수 있습니다.

스타일

스타일은 때때로 분류와 같은 의미로 사용되지만 이 경우 글꼴은 normal , italic 또는 oblique 를 나타냅니다.

다른 스타일이 사용되는 글꼴을 결합할 때 기울임꼴 또는 사선 스타일이 일반 스타일과 마찬가지로 잘 작동하는지 확인하는 것이 중요합니다. 때로는 기울임꼴 스타일이 동일한 글꼴의 일반 스타일과 크게 다르기 때문에 함께 잘 작동하는 글꼴이 갑자기 충돌할 수 있습니다.

차이

서체 결합의 대비는 까다로울 수 있습니다. 대비가 너무 적으면 글꼴이 충돌할 수 있지만 대비가 너무 많으면 동일한 결과가 발생할 수 있습니다.

글꼴을 결합할 때 대비는 분류, 두께, 스타일 및 구조를 포함하여 글꼴이 다른 모든 방식을 나타냅니다.

시작할 때, 그 중 하나 또는 둘 사이의 대조에 초점을 맞추면서 나머지는 매우 유사하도록 하는 것이 가장 좋습니다. 두께는 글꼴 간의 대비를 만드는 가장 쉬운 방법 중 하나입니다. 이미 언급했듯이 무게의 대비가 너무 크면 너무 적더라도 거슬릴 수 있습니다.

대비를 만드는 또 다른 쉬운 방법은 산세리프체와 세리프체 또는 스크립트와 세리프체 등과 같은 다양한 글꼴 분류를 결합하는 것입니다. 이러한 경우 두 글꼴의 분위기 가 일치하는지 확인하는 것이 중요합니다.

예를 들어 Amatic SC와 같은 좀 더 캐주얼한 글꼴을 Baskerville과 같은 매우 격식 있는 글꼴과 결합하면 대비보다는 충돌이 발생합니다. 그러나 Amatic SC와 같은 것을 Josefin Slab과 같은 다른 캐주얼 글꼴과 결합하면 아름답게 작동합니다.

X 높이

X-높이는 서체 내 개별 문자의 높이, 특히 소문자 x 를 나타냅니다. 비슷한 x 높이를 가진 서체는 다양한 x 높이를 가진 서체보다 더 잘 작동합니다.

구조

서체의 기본 구조에는 모든 특성과 함께 문자의 기본 모양 및 간격과 같은 사항이 포함됩니다. 글꼴의 구조와 대비를 만드는 것은 글꼴을 결합하는 확립된 방법입니다. 그러나 크게 다른 글꼴보다는 최소한 몇 가지 공통된 구조적 요소(예: x 높이 또는 "보통" 스타일의 무게)가 있는 글꼴을 선택하는 것이 좋습니다.

분위기

분위기는 타이포그래피의 보다 주관적인 영역 중 하나입니다. 그것은 서체가 얼마나 형식적이거나 비공식적인지, 장난스러운지, 여성적인지, 남성적인지, 캐주얼한지, 진지한지 등을 나타냅니다.

예를 들어 Comic Sans는 대부분의 상황에서 사용하기에 부적절한 매우 비격식적인 글꼴입니다. 반면 Bickham Script는 매우 형식적이지만 비즈니스 서신과 같은 것에 대해 잘못된 인상을 줍니다.

폰트를 조합할 때는 분위기가 비슷한 서체를 찾는 것이 중요합니다. 장난기 넘치는 글꼴과 매우 진지한 글꼴을 결합하면 눈이 거슬릴 것입니다.

장식, 색상 및 질감

이러한 것들은 서체의 고유한 특성은 아니지만 글꼴을 결합할 때 유용합니다. 색상, 장식(예: 밑줄) 및 질감을 통해 통합(또는 더 많은 대비 만들기)하는 것은 매우 효과적인 기술이 될 수 있습니다.

효과적인 글꼴 조합

아름다운 활판 인쇄술이 있는 사이트가 끝없이 공급되고 있으며, 유형이 좋지 않거나 그저 광택이 없는 사이트도 끝없이 공급되고 있습니다. 올바른 사이트를 연구하는 것은 디자이너가 시작하거나 다음 단계로 자신의 기술을 발전시키려고 할 때 글꼴을 결합하는 방법을 배울 수 있는 좋은 방법입니다.

Work Notes는 세리프체 Adobe Caslon Pro와 산세리프체 Interstate를 결합하여 낡거나 구식 느낌 없이 전통에 대한 경의를 표하는 서체 조합을 만듭니다. 다양한 가중치와 스타일을 결합하면 시각적인 흥미를 더하고 타이포그래피를 실제보다 더 복잡하게 만듭니다.

Adjuvant Capital은 현대적인 GT America 산세리프체와 결합된 현대적이고 약간 기발한 세리프체 Orpheus Pro를 사용합니다. 금융 서비스 회사의 경우 이는 매우 현대적인 선택이지만 사회적으로 책임 있는 글로벌 투자라는 사명과 잘 맞습니다.

Bloomscape는 산세리프체인 Raisonne과 함께 캐주얼한 세리프체 Morion을 사용하여 인상적이고 현대적인 타이포그래피 디자인을 만듭니다. Morion은 더 장식적인 글자 형태로 인해 신체 유형에 대한 명백한 선택이 아닐 수 있지만 적절한 크기(여기에서와 같이)로 사용될 때 본문 텍스트의 더 짧은 덩어리에 적합합니다. Raisonne은 두 개의 웹 글꼴이 함께 아름답게 작동하도록 하는 유사한 장식적인 글자체를 가지고 있습니다.

Vogue는 1902년에 원래 디자인된 기괴한 산세리프체 Franklin Gothic과 현대적이고 우아한 Savoy 세리프체를 사용합니다. 이 두 가지의 조합은 잡지가 목표로 하는 교양 있는 청중에게 어필하는 고급형 디자인을 만듭니다.

남부 라이프스타일 잡지 Garden & Gun은 여기에 포함된 다른 것보다 사이트에 더 복잡한 타이포그래피를 가지고 있어 정말 차별화됩니다. 이 사이트는 4가지 주요 서체를 사용합니다. 주요 기사 제목은 세리프 Domaine Display입니다. 홈페이지의 본문 및 일부 헤드라인은 세리프체 Domaine Text입니다. 메타 정보, 탐색 및 섹션 헤더는 sans serif Avenir Next를 사용합니다. 홈페이지의 추가 섹션 헤더는 Domaine Sans Display에 있습니다.

더 큰 활자 계열 내에서 여러 글꼴을 사용하는 것은 완벽하게 조화되는 복잡한 타이포그래피 디자인을 만드는 검증된 방법입니다. Avenir Next에 추가하면 문제가 해결되고 시각적인 흥미가 더 높아집니다.

서체의 선택은 사용하는 것만큼 중요합니다.

— 보니 시글러

결론

효과적인 글꼴 조합은 좋은 디자인의 특징입니다. 디자이너는 동시대 사람과 차별화되는 뛰어난 디자인을 만들려면 이 기술을 마스터해야 합니다.

여기에 포함된 지침을 시작 지점으로 고려하여 문자를 효과적으로 결합하는 방법을 살펴보십시오. 견고한 기초는 완전히 부적합한 조합에 시간을 들이지 않고도 보다 효율적인 실험을 가능하게 합니다. 여기에서 디자이너는 최종 제품이 사용자에게 기쁨을 줄 것이라는 확신을 가지고 필요에 따라 지침에서 벗어나 자신의 스타일과 글꼴을 효과적으로 결합하는 방법을 만드는 연습을 할 수 있습니다.

Toptal Design 블로그에 대한 추가 정보:

• 가독성을 위한 디자인 – 웹 타이포그래피 가이드(인포그래픽 포함)
• 서체 분류의 뉘앙스 이해하기
• 타이포그래피 해부학의 복잡성 분석(인포그래픽 포함)
• 효과적인 타이포그래피 계층 구조를 구성하는 방법
• 웹 및 인쇄 디자인을 위한 서체 스타일