글꼴 페어링 가이드: 웹사이트에 가장 적합한 글꼴 조합 선택

게시 됨: 2020-11-02

웹 디자이너는 구축하는 각 웹 사이트에 대해 많은 중요한 결정을 내려야 합니다. 색상 팔레트, UI 상호 작용, 탐색 레이아웃, 웹 사이트에 가장 적합한 글꼴 선택 등.

그러나 생각하는 데 충분한 시간을 할애하지 않을 수 있는 웹 디자인 영역 중 하나는 글꼴 페어링입니다.

하나의 멋진 글꼴을 선택하는 것은 한 가지입니다. 브랜드의 목소리와 스타일을 잘 이해하면 비슷한 분위기를 전달하는 글꼴을 훨씬 쉽게 식별할 수 있습니다.

목차

  • 글꼴 페어링이 필요한 이유는 무엇입니까?
  • 글꼴을 페어링할 때 고려해야 할 사항
  • 웹 디자인에서 글꼴을 페어링하기 위한 4가지 규칙
  • 규칙 #1: 사이트에 글꼴을 3개 이상 사용하지 마십시오
  • 규칙 #2: 일치와 대비가 좋습니다. 갈등은 나쁘다
  • 규칙 #3: 글꼴 슈퍼패밀리 내에서 페어링을 두려워하지 마십시오
  • 규칙 #4: 글꼴이 적절한 크기와 모양인지 확인
  • 웹 디자인을 위한 30가지 최고의 글꼴 조합

글꼴 페어링이 필요한 이유는 무엇입니까?

웹사이트는 계층 구조를 설정하고 방문자가 많은 텍스트에 계속 참여하도록 하고 잠재 의식적으로 방문자에게 브랜드의 개성과 접근 방식에 대해 더 많이 알려주기 위해 둘 이상의 글꼴이 필요합니다.

이 추가 복잡성 레이어를 믹스에 추가하면 상황이 까다로워질 수 있습니다. 글꼴을 서로 페어링할 뿐만 아니라; 웹 디자인과도 짝을 이루고 있습니다.

웹을 여행하는 동안 다음과 같은 시나리오를 접했을 것입니다.

  • 두 개의 지루한 글꼴로 인해 긴 블로그 게시물을 읽기가 매우 어려워지고 결국 머리글을 훑어보고 그런 식으로 이야기를 구성할 수 있는지 확인하게 됩니다.
  • 재미 있고 독특한 초서체는 방문자에게 비즈니스를 소개합니다. 첫인상과 모순되는 너무 작고 매우 단순한 본문 글꼴입니다.
  • 웹 사이트는 회사가 비즈니스에 대해 젊고 혁신적인 접근 방식을 취하기 때문에 복고풍 글꼴이 너무 어울리지 않는다고 주장합니다.

글꼴이 서로 어떻게 맞는지 이해하는 데 시간을 들이지 않으면 글꼴 쌍에서 잘못될 수 있는 것이 너무 많습니다.

WordPress에 사용자 정의 글꼴을 추가하는 방법 알아보기

글꼴을 페어링할 때 고려해야 할 사항

웹 사이트에 가장 적합한 글꼴에 대한 가이드에서 찾아야 할 주요 특성을 요약했습니다.

1. 가독성

문학과 신문에서 세리프가 많이 선호되는 이유 중 하나는 가독성 때문입니다. 문자의 상단과 하단에 있는 세리프(피트)는 독자가 대문자 "I"와 소문자 "l"과 같이 비슷한 모양의 문자를 더 쉽게 구별할 수 있도록 하므로 이해력 문제로 인한 속도 저하가 없습니다.

600단어가 넘는 페이지를 디자인하는 경우 바로 이러한 이유로 본문에 세리프를 사용하는 것이 나쁜 생각은 아닙니다.

그렇긴 하지만(세리프가 없는 경우에도) 뚜렷한 서체를 가진 산세리프를 찾으면 실험하는 것을 두려워하지 마십시오. 아래에 본문 및 헤더 배치 모두에서 산세리프체를 사용하는 방법에 대한 몇 가지 예가 있습니다.

2. 가독성

산 세리프체가 온라인 텍스트에 대해 세리프체보다 더 나은 선택으로 오랫동안 여겨졌던 이유 중 하나는 높은 가독성 때문이었습니다. 그러나 연구에 따르면 사람들이 세리프체와 산세리프체 텍스트를 얼마나 빠르고 쉽게 읽을 수 있는지에는 차이가 거의 없습니다.

화면 해상도가 수년에 걸쳐 크게 향상됨에 따라 타이포그래퍼는 두 가지 스타일 모두에서 똑같이 읽을 수 있는 글꼴을 만들 수 있었습니다. NNG는 다음과 같이 설명합니다.

“온라인 타이포그래피에 대한 기존 사용성 지침은 단순했습니다. 산세리프체를 고수하는 것이었습니다. 컴퓨터 화면이 너무 형편없어 세리프체를 제대로 렌더링할 수 없었기 때문에 본문 크기로 세리프체를 시도하면 글자 모양이 흐릿해졌습니다.”

지나치게 장식적인 글꼴과 같은 다른 글꼴 유형은 큰 헤더 텍스트 외부에서 읽기가 너무 어려울 수 있지만 디자이너는 세리프 산 세리프를 사용하여 페이지의 텍스트 스타일을 지정하는 방법에 대해 많은 옵션이 있습니다.

그렇다면 가독성과 가독성에 영향을 미치기 때문에 문자의 크기와 간격을 더 잘 알아야 합니다.

3. 편안함

Helvetica 또는 Times New Roman과 같은 서체를 너무 많이 사용하기 때문에 사용하기를 꺼리는 웹 디자이너가 있습니다. 그러나 글꼴 선택 및 페어링은 웹사이트의 타이포그래피에 대한 느낌이 아니라 방문자가 이를 얼마나 편안하게 읽을 수 있는지에 관한 것입니다.

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

4. 스타일

브랜드와 잘 어울리는 스타일로 글꼴 유형과 글꼴을 선택하십시오. 예를 들어, 세리프체는 더 기발하고 재미있는 경향이 있는 필기체 글꼴과는 대조적으로 더 전통적이고 진지한 느낌을 줍니다.

시작할 올바른 종류의 글꼴을 선택하는 것만으로도 방문자에게 브랜드에 대해 많은 것을 알릴 수 있습니다.

타이포그래피로 디자인하는 다음 단계로 넘어갈 때 다음 규칙을 놓치지 마십시오.