웹 디자이너를 위한 글꼴 페어링 가이드 + 30가지 놀라운 예!

게시 됨: 2021-01-27

웹 디자이너는 다음 프로젝트에서 작업할 때 많은 중요한 결정을 내려야 합니다. 색상 팔레트, UI 상호 작용, 레이아웃, 일러스트레이션, 타이포그래피... 목록은 계속됩니다. 그러나 종종 간과되는 웹 디자인 영역 중 하나는 글꼴 페어링입니다. 올바른 글꼴을 선택하는 것은 한 가지입니다. 브랜드의 목소리와 스타일을 정하고 나면 원하는 분위기를 전달할 글꼴을 식별하는 것이 일반적으로 비교적 쉽습니다.

하지만 브랜드를 나타내는 글꼴이 하나 있고 웹사이트 전체에서 반복되는 글꼴이 두 개인데 왜 하나를 가질 수 있습니까? 성공적이고 균형 잡힌 글꼴 조합은 콘텐츠의 계층 구조를 설정하고 방문자의 참여를 유지하며 브랜드의 개성과 접근 방식에 대한 더 많은 이야기를 전하는 데 도움이 됩니다.

그러나 글꼴 페어링은 까다로울 수 있습니다. 결국 믹스에 복잡성 레이어를 하나 더 추가하게 됩니다. 그러나 성공적으로 완료되면 디자인을 완전히 새로운 수준으로 끌어올릴 수 있습니다.

완벽한 커플을 찾는 것과 같은 글꼴 페어링을 생각하십시오! 수천 개의 글꼴이 있으며 그 중 일부는 정말 아름답고 잘 디자인되어 있습니다. 이들 중 많은 수가 짝을 이루면 처음에는 효과가 있는 것처럼 보일 수 있지만 사용하기 시작한 후에는 서로 잘 맞지 않는다는 것이 분명해질 수 있습니다. 예를 들어:

거의 동일한 두 개의 글꼴이 안전한 옵션처럼 보일 수 있지만 결과를 독자/사용자에게 지루하고 지루하게 만들 수 있습니다.
반면에 서로 매우 다른 두 개의 글꼴은 사용자에게 브랜드 스타일에 대한 혼란스러운 인상을 줄 수 있습니다.
두 글꼴이 모두 매우 화려하고 대담하며 지배적이라면 계층 구조를 완전히 엉망으로 만들 것입니다.

따라서 관계에서와 마찬가지로 두 개의 동일한 글꼴이나 두 개의 반대 글꼴을 찾는 것이 아닙니다. 그것은 모두 균형과 상호 보완에 관한 것입니다. 성공적인 '글꼴 커플'을 위해서는 브랜드를 대표하고 조화, 유동성 및 가장 중요한 일관성의 느낌을 만들기 위해 팀으로 작업해야 합니다.

글꼴을 페어링하는 방법

완벽한 글꼴 조합을 찾는 공식은 없으며 수천 개의 무료 글꼴이 온라인에서 제공되므로 숙련된 디자이너에게도 시간이 많이 소요되는 작업이 될 수 있습니다. 그러나 항상 염두에 두어야 할 몇 가지 사항이 있으며 이 과정에서 도움이 되기를 바랍니다.

1. 원하는 느낌 연출

올바른 글꼴과 스타일을 선택하는 것만으로 방문자에게 브랜드에 대해 많은 것을 알릴 수 있습니다. 선택한 두 글꼴 모두 브랜드와 잘 어울리고 청중이 원하는 감정을 불러일으키는 데 도움이 되어야 합니다. 올바르게 사용하면 사용자가 사이트에서 내리는 결정에도 영향을 줄 수 있습니다.

브랜드의 분위기와 목적을 개별적으로뿐만 아니라 조합하여 반영하는 글꼴을 선택하십시오. 예를 들어, 세리프 글꼴은 더 전통적이고 진지한 것으로 간주됩니다. 그러나 현대적인 산세리프체와 결합하면 전체 결과가 정말 신선하고 우아할 수 있습니다.

2. 역할 할당

선택한 각 글꼴은 웹 사이트에서 수행할 역할이 있으며 캐스팅 프로세스는 귀하가 담당합니다. 큰 제목에서는 멋지게 보이는 글꼴이 작은 텍스트에서는 잘 작동하지 않을 가능성이 큽니다. 따라서 필요한 '역할'(타이포그래피 스타일)(예: 본문 텍스트, 캡션 텍스트, 큰 제목, 부제목 등)을 생각하고 이를 염두에 두고 글꼴을 선택해야 합니다.

헤드라인과 큰 텍스트 조각 모두에 스크립트 글꼴을 사용하는 것은 분명히 좋은 생각이 아니기 때문에 이렇게 하면 옵션이 자동으로 약간 좁아집니다. 따라서 원칙적으로 선택한 글꼴 중 하나 이상은 긴 텍스트에서도 잘 읽고 작은 크기에서도 읽을 수 있어야 합니다.

반면에, 더 창의적이고 큰 제목에 대해 대담하고 독특한 글꼴을 선택할 수 있습니다.

3. 가독성 및 가독성

브랜드에 대해 어떤 스타일과 분위기를 선택하든 웹사이트에 읽기 쉽고 읽기 쉬운 텍스트가 있어야 합니다.

가독성은 글이 단순하고 읽기 쉽게 흐르도록 글꼴과 단어를 배열하는 것입니다. 이것은 큰 텍스트 블록에 특히 중요합니다. Serif 및 Sans-serif 글꼴은 의심할 여지 없이 이 경우 더 나은 옵션입니다. 반면에 필기체 또는 슬랩 글꼴은 읽기가 너무 어려울 수 있습니다. 제목의 경우 예상 글꼴의 아름다움 요소를 조금 더 강조할 수 있습니다. 그러나 텍스트 덩어리가 큰 단락의 경우 항상 가독성이 우선입니다.

가독성은 문자가 서로 얼마나 쉽게 구별되는지를 나타냅니다(예: 문자 'I' 및 'i'). 이것은 제목과 같은 큰 텍스트와 작은 텍스트 모두에 중요합니다. 따라서 선택한 글꼴은 사용하게 될 다양한 크기에서 읽기 쉽고 가독성이 좋은지 확인하고 웹사이트에서 모두 대문자로 된 제목을 사용할 계획이라면 모두 대문자로 사용하세요.

4. 고전을 두려워하지 말라

많은 웹 디자이너(나를 포함하여 고백해야 함)는 Helvetica 또는 Baskerville과 같은 고전적인 서체를 과도하게 사용하기 때문에 사용하기를 꺼립니다. 그러나 글꼴 선택 및 페어링은 웹사이트의 타이포그래피에 대한 느낌이 아닙니다. 그것은 사용자가 어떻게 느끼고 그것을 읽는 경험에 관한 것입니다.

따라서 작업이 완료되면 클래식 중 하나를 선택하는 것이 부끄러운 일이 아닙니다!

글꼴 페어링 규칙

다음은 글꼴을 페어링할 때 지켜야 할 간단하지만 중요한 몇 가지 규칙입니다.

규칙 #1: 웹사이트에 3개 이상의 글꼴을 사용하지 마십시오.

더 큰 크기로 멋지게 보이고 방문자의 관심을 끌 수 있는 제목 글꼴이 필요합니다. 그리고 읽기 쉽고 읽을 수 있는 본문 텍스트 글꼴이 필요합니다. 이 두 가지를 선택하여 시작하고 절대적으로 필요한 경우에만 다른 것을 추가하십시오.

글꼴이 너무 많으면 혼란스러운 경험을 만들어 사용자가 브랜드의 분위기와 스타일에 대해 혼란스러워하고 결과를 읽기 어렵게 만들 수 있습니다.

규칙 #2: 대조는 좋고 갈등은 나쁘다

선택한 글꼴 조합은 균형이 맞아야 하며 각 글꼴은 서로를 보완해야 합니다. 즉, 모양이 다르거나 글꼴 모음이 다르더라도 방문자에게 통일된 결과를 제공해야 합니다.

이를 확인하는 일반적인 방법은 serif 글꼴을 sans-serif 글꼴과 페어링하는 것입니다. 또는 대담한 성격의 제목 또는 표시 글꼴을 사용하고 중립적으로 디자인된 본문 텍스트 글꼴과 균형을 맞출 수 있습니다.

무엇을 하든지 선택한 글꼴이 스타일과 디자인 면에서 서로 충돌하지 않는지 확인하십시오. 갈등과 대조 사이의 완벽한 균형을 찾아야 합니다. 그렇지 않으면 최종 사용자에게 좋지 않은 모순된 스타일이 될 수 있습니다.

규칙 #3: Super-Families 내에서 페어링해도 됩니다.

다른 스타일을 사용하는 한 동일한 글꼴 패밀리에 속하는 글꼴을 결합하는 데 전혀 문제가 없습니다. 대부분의 수퍼 패밀리 글꼴에는 추가 라이트에서 울트라 블랙에 이르기까지 수십 가지의 다양한 스타일이 있습니다. 또한 그 중 일부에는 세리프체와 산세리프체 대안이 모두 포함되어 있습니다.

서로 잘 어울리기 때문에 안전한 페어링 옵션입니다. 대비를 만들기 위해 다른 무게와 크기를 사용하는 한, 결과는 성공적이고 균형 잡히고 매력적일 수 있습니다.

규칙 #4: 글꼴의 크기와 모양이 적절한지 확인하십시오.

글꼴을 선택하는 즉시 적절한 글꼴 페어링이 중단되지 않습니다. 웹사이트 콘텐츠 내에서 원하는 계층 구조와 대비를 얻으려면 각 글꼴에 사용할 다양한 크기와 두께에 주의를 기울여야 합니다. 두 개의 잘 결합된 글꼴은 강도가 동일하고 크기가 비슷하면 원하는 결과를 생성하지 않습니다.

Fontjoy는 타이포그래피 스타일 간에 원하는 대비 정도를 확인하는 데 사용할 수 있는 유용한 도구입니다. 또한 글꼴이 다양한 크기에서 어떻게 보이는지 미리 볼 수 있는 빠른 방법을 제공합니다.