웹 디자인에서의 타이포그래피에 대한 팁

 

 

 

1. 사용하는 폰트의 수를 최소로 유지하세요

3개 이상의 서로 다른 폰트를 사용하면 웹사이트가 정돈되지 않고 비전문적으로 보일 수 있습니다.
또한 너무 많은 글꼴 크기와 스타일을 동시에 사용하는 것은 레이아웃 전체를 망칠 수 있다는 점도 기억하세요.

 

이러한 상황을 방지하려면, 사용하는 글꼴 패밀리의 수를 최소한으로 제한하는 것이 좋습니다.

 

 

일반적으로 사용하는 글꼴 패밀리는 최소한으로 제한하는 것이 좋습니다. 두 개면 충분하고, 하나로도 충분한 경우가 많습니다. 그리고 웹사이트 전체에서 동일한 글꼴을 일관되게 사용하는 것이 중요합니다.

만약 두 개 이상의 글꼴을 사용할 경우, 글자 폭 등의 특성을 기준으로 서로 잘 어울리는 글꼴을 조합해야 합니다. 아래의 예시를 보세요.
왼쪽의 Georgia와 Verdana의 조합은 유사한 특징을 가지고 있어 조화로운 페어링을 이룹니다.
반면 오른쪽의 Baskerville와 Impact의 조합은, Impact의 강한 굵기 때문에 Baskerville이 묻히게 되어 균형이 깨집니다.

 

글꼴 패밀리를 선택할 때는 문자 폭(character width)이 서로 잘 어울리는지 확인하는 것이 중요합니다.

 

 

 

 

2. 표준 글꼴을 사용하는 것이 좋습니다.

Google Web Fonts나 Typekit과 같은 폰트 임베딩 서비스에는 새롭고 참신하며 예상치 못한 매력을 가진 다양한 글꼴들이 있습니다. 이런 글꼴을 사용하면 디자인에 개성을 더할 수 있죠. 하지만 문제도 있습니다. 지나치게 개성 있는 글꼴은 사용자의 집중을 방해할 수 있습니다. 사용자는 글을 읽기보다는 디자이너가 어떤 글꼴을 썼는지에 주의를 빼앗기게 될 수 있습니다.

웹사이트에 브랜딩 목적이나 몰입감 있는 경험을 위한 특별한 이유가 없다면,시스템 기본 글꼴을 사용하는 것이 대부분의 경우 더 나은 선택입니다. 좋은 타이포그래피는 독자의 시선을 글꼴 자체가 아닌 콘텐츠에 집중시키는 것임을 기억하세요.

 

 

 

3. 한 줄의 글자 수를 제한하세요.

한 줄에 적절한 글자 수를 유지하는 것은 텍스트의 가독성에 매우 중요합니다.
텍스트의 너비는 디자인적인 요소만으로 결정되어서는 안 되며, 반드시 읽기 쉬운 구조인지도 함께 고려해야 합니다.

 

 

Baymard Institute는 가독성과 줄 길이에 대해 다음과 같이 조언합니다.

“쾌적한 읽기 경험을 원한다면 한 줄에 약 60자의 텍스트가 적당합니다.
한 줄에 적절한 글자 수를 유지하는 것이 텍스트의 가독성을 높이는 핵심입니다.”

 

줄이 너무 짧으면 눈이 너무 자주 줄을 바꿔야 하므로 독서 리듬이 깨지고, 줄이 너무 길면 사용자의 눈이 텍스트에 집중하기 어려워집니다. 이미지 출처: Material Design

 

 

모바일 기기에서는 한 줄에 30~40자 정도가 적당합니다.
아래는 모바일에서 본 두 웹사이트의 예시입니다.

첫 번째 사이트는 50~75자의 줄 길이(이는 인쇄물이나 데스크톱 환경에서 적절한 범위)를 사용하고 있으며, 두 번째 사이트는 모바일에 최적인 30~40자 줄 길이를 사용하고 있습니다.

 

이미지 출처: Usertesting

 

 

웹 디자인에서는 텍스트 블록의 너비를 em이나 px 단위로 제한함으로써 한 줄에 적절한 글자 수를 조절할 수 있습니다.
이렇게 하면 가독성을 높이고 사용자 경험을 향상시킬 수 있습니다.

 

 

4. 다양한 크기에서도 잘 보이는 글꼴을 선택하세요.

사용자는 다양한 화면 크기와 해상도를 가진 기기로 웹사이트에 접속합니다.
또한 대부분의 UI에는 버튼 텍스트, 입력 필드 라벨, 섹션 헤더 등 여러 크기의 텍스트 요소가 포함되어 있습니다.

따라서 여러 크기와 굵기에서도 가독성과 사용성을 유지할 수 있는 글꼴을 선택하는 것이 중요합니다.

 

Roboto typeface by Google

 

 

선택한 글꼴이 작은 화면에서도 읽기 쉬운지 꼭 확인하세요! Vivaldi와 같은 흘림체(스크립트체) 글꼴은 아름답긴 하지만, 가독성이 떨어지므로 가능한 한 피하는 것이 좋습니다.

 

 

 

5. 글자 구분이 명확한 폰트를 사용하세요.

일부 글꼴은 특히 **“i”와 “l”(아이와 엘)**처럼 형태가 비슷한 글자들을 쉽게 혼동하게 만듭니다.
따라서 글꼴을 선택할 때는 여러 맥락에서 어떻게 보이는지 미리 확인하여 사용자에게 혼란을 주지 않도록 하는 것이 중요합니다.

 

 

 

 

6. 모든 글자를 대문자로 쓰는 것은 피하세요.

모든 글자를 대문자로 표기하는 All Caps 텍스트는 약어나 로고처럼 읽기보다는 인식에 초점이 맞춰진 경우에는 괜찮습니다.

하지만 사용자에게 실제로 읽히는 메시지에서는 All Caps를 피하는 것이 좋습니다.

Miles Tinker는 그의 저서 Legibility of Print에서 다음과 같이 말했습니다.

“모든 글자가 대문자인 인쇄물은 소문자 인쇄물에 비해
스캔 속도와 읽는 속도를 크게 저하시킨다.”

 

 

 

 

 

7. 줄 간격을 너무 좁게 설정하지 마세요.

타이포그래피에서는 두 줄 사이의 간격을 리딩(leading) 또는 라인 하이트(line-height)라고 부릅니다. 리딩을 넉넉하게 설정하면 텍스트 줄 사이에 수직 여백이 생겨 가독성이 향상되며, 화면 공간을 조금 더 차지하더라도 읽기 편한 레이아웃을 만들 수 있습니다.

일반적으로는 글자 높이보다 약 30% 더 큰 줄 간격을 설정하는 것이 좋은 가독성을 유지하는 기준입니다.

 

적절한 줄 간격은 가독성을 높이는 데 도움이 됩니다. 이미지 출처: Microsoft

 

 

문단 사이에 적절한 여백(화이트 스페이스)을 사용하는 것만으로도 이해도가 최대 20%까지 향상된다는 사실이 Dmitry Fadeyev에 의해 지적되었습니다.

화이트 스페이스를 잘 활용하는 능력이란, 사용자에게 한 번에 소화할 수 있는 적절한 양의 콘텐츠를 제공하고, 불필요한 요소들을 걷어내는 것에 있습니다.

 

왼쪽: 거의 겹쳐 보이는 텍스트. / 오른쪽: 적절한 간격은 가독성을 높여줍니다. / 이미지 출처: Apple

 

 

 

8. 충분한 색상 대비를 확보하세요.

텍스트와 배경에 같거나 비슷한 색상을 사용하는 것은 피해야 합니다. 텍스트가 눈에 잘 띌수록 사용자는 더 빠르게 정보를 스캔하고 읽을 수 있습니다.
W3C(Web 접근성 기준)에서는 다음과 같은 텍스트 대비 비율을 권장합니다.

• 작은 텍스트: 배경과의 대비 비율이 최소 4.5:1 이상
• 큰 텍스트(14pt 볼드 또는 18pt 일반 이상): 대비 비율이 최소 3:1 이상

이 텍스트 줄들은 색상 대비 비율 권장 기준을 충족하지 않으며, 배경색과의 대비가 부족해 읽기 어렵습니다.

 

 

이 텍스트 줄들은 색상 대비 비율 권장 기준을 충족하고 있어서 배경색과의 대비가 충분하여 읽기 쉽습니다.

 

 

색상을 선택한 후에는 대부분의 기기에서 실제 사용자와 함께 테스트하는 것이 반드시 필요합니다. 만약 테스트 중에 텍스트를 읽기 어려워하는 문제가 발견된다면, 실제 사용자들도 똑같은 문제를 겪게 될 것이라는 점을 명심하세요.

 

 

9. 텍스트에 빨간색이나 초록색만 사용하는 것은 피하세요.

색맹은 상당히 흔한 시각적 조건입니다. 따라서 중요한 정보를 구분할 때는 색상 외에도 다른 시각적 요소(예: 아이콘, 굵기, 밑줄 등)를 함께 사용하는 것이 좋습니다. 또한, 빨간색과 초록색은 가장 흔한 색맹 유형에서 잘 구별되지 않기 때문에 이 두 색만으로 정보를 전달하는 것은 피하는 것이 좋습니다.

 

 

 

10. 깜박이는 텍스트는 사용하지 마세요.

빠르게 깜박이거나 반짝이는 콘텐츠는 민감한 사용자에게 발작을 유발할 수 있습니다. 이러한 요소는 건강에 해로울 수 있을 뿐만 아니라, 대부분의 사용자에게도 불쾌하거나 주의를 산만하게 만들 수 있습니다. 따라서 깜박이는 텍스트는 가급적 사용하지 않는 것이 좋습니다.

 

깜박이는 텍스트는 피하세요!

 

 

 

 

출처:

https://uxplanet.org/10-tips-on-typography-in-web-design-13a378f4aa0d