[Design Article] 웹과 모바일 타이포그래피에 대한 초보자 가이드

Medium에 작성된 Vichita Baheti의 아티클을 해석해 보았습니다

---

👇노션에서 보기

bit.ly/kimmyarticle08

웹과 모바일 타이포그래피에 대한 초보자 가이드

---

웹과 모바일 타이포그래피에 대한 초보자 가이드

정규 교육을 받지 않은 디자이너로서 타이포그래피는 제가 처음에 공부할 때 가장 힘들었던 부분이었습니다.

너무 많은 전문용어, 너무 많은 타입페이스, 너무 많은 사례들은 저를 당황스럽게 했습니다.

 

처음에 저는 타이포그래피를 Human Interface Guidelines 및 머티리얼 디자인의 권장 사항 내에서 작업했습니다.

그러나 저는 천천히 그리고 꾸준히, 타이포그래피를 즐기고 실험하는 것을 시작할만큼 충분히 배웠습니다.

이 기사에서, 저는 다른 사람들에게도 이 글이 도움이 되기를 바라며 지금까지 배운 내용을 요약합니다.

 

구체적으로 다음 사항을 살펴보겠습니다 :

 

• 중요 용어
• 폰트 유형 및 사용 위치
• 타입 시스템을 만드는 7가지 경험 법칙

전문 용어를 없애자…

네, 위의 모든 내용을 이해하고 기억하면 좋을 것입니다 🤓

그러나 타이포그래피에 대한 자신감을 가지는 것을 멈추지 마세요.

기초를 시작하기 위한 기본 사항은 다음과 같습니다 👉🏼

 

타입페이스와 폰트 (Typeface and Font)

타입페이스는 폰트의 모음이고 폰트는 타입페이스 패밀리 내의 특정 스타일 또는 두께를 나타냅니다.

종종, 부정확하게, 타입페이스와 폰트는 서로 바꿔서 사용됩니다. 그래서 만약 당신이 이런 상황을 마주친다면 혼동하지 마세요.

 

행간 및 행 높이 (Leading and Line-height)

손 조판에서, 행간은 글자 사이의 세로 거리를 늘리기 위해서 활자 사이에 삽입된 얇은 공간입니다.

따라서, 이것은 인쇄 디자인과 더 관련이 있습니다.

행 높이는 베이스라인 사이의 수직 공간입니다. 웹과 모바일의 경우에 당신은 행 높이를 사용할 것입니다.

그러나 위에서 살펴본 바와 같이 사람들은 두 용어를 같은 의미로 사용한다는 것을 볼 수 있습니다.

 

자간, 커닝 또는 문자 간격 (Tracking, Kerning or Letter spacing)

자간은 글자 범위의 간격을 의미하지만 커닝은 개별 문자 사이의 간격을 나타냅니다.

그리고 자간과 커닝은 함께 문자 간격을 만듭니다.

일반적으로 figma와 sketch와 같은 앱에서 폰트는 문자 간격에 맞게 자동으로 조정됩니다.

따라서 일반적으로 조정하는 것에 대한 걱정할 필요는 없어요!

 

타입페이스는 무엇이고 언제 타입페이스를 사용할까요?

주로 Serif, Sans Serif, Script 또는 Handwriting, Decorative 또는 Display의 네 가지 유형의 서체가 있습니다.

Script와 Decorative 타입페이스는 작은 디바이스에서 읽기 어렵기 때문에 헤드 라인 및 로고를 제외하고는 거의 사용되지 않습니다.

이제 두 가지 주요 옵션인 Serif 및 Sans Serif가 남습니다.

 

Serif

세리프는 글자에서 획의 시작 또는 끝에 나타나는 작은 모양 또는 돌출입니다.

serif가 있는 폰트를 serif 서체라고 합니다.

이 서체는 전통적이며 신문, 잡지, 도서 본문에 사용됩니다.

 

웹과 모바일의 경우, 긴 본문 텍스트를 읽기 어려울 수 있기 때문에 일반적으로 헤드 라인과 로고에만 사용됩니다.

Sans Serif

Serif가 없는 폰트를 Sans Serif 서체라고 합니다, 이것은 "없음"을 의미하는 프랑스어 단어로부터 나왔습니다.

 

이것은 디지털 응용 프로그램에서 가장 널리 사용되는 글꼴 유형입니다.

본문 텍스트로 널리 사용되지만 다른 곳에서도 자유롭게 사용할 수 있습니다.

만약 다양한 서체, 스타일에 대해 자세히 알아보려면 이 링크를 확인하세요.

 

이제 큰 질문이 남았네요, 어떻게 사용하나요?

타이포그래피는 과학보다 예술에 가깝습니다.

그래서 여기에는 법이 없습니다.

타이포그래피 작업을 시작하기 위해 기억해야 할 간단한 7가지 사항이 있습니다.

 

1. 정렬 (Alignment)

폰트 정렬은 주어진 공간에서 텍스트가 정렬되는 방식을 조절합니다.

 

네 가지 타입 정렬이 있습니다👉🏼

• 왼쪽 마진에 왼쪽 정렬
• 오른쪽 마진에 오른쪽 정렬
• 텍스트를 가운데로 조정하는 가운데 정렬
• 텍스트를 주어진 공간에 맞게 조정하는 양쪽 정렬

 

몇 가지 경험에 의한 법칙 👉🏼

• 대부분의 언어는 왼쪽에서 오른쪽으로 읽습니다. 텍스트가 왼쪽 정렬 된 경우 정해진 축과 앵커를 제공합니다.
• 만약 숫자만 작성한다면, 오른쪽 정렬을 합니다. 당신이 펜과 종이로 숫자를 더할 때 했던 것 처럼요.
• 텍스트 행의 끝을 나란히 맞추지 마세요. 이것은 텍스트 사이에 흐르는 강을 만듭니다.
• 헤드라인, 서브 텍스트, 클릭 유도 문구, 인용문 등의 경우 가운데 정렬을 사용해보세요.
• 나쁜 rags, widows, orphan을 피하기 위해 문구, 행 길이 또는 문자 간격을 조정하세요👇🏼

2. 크기 (Size)

작은 텍스트 크기는 사용자의 눈을 아프게 하지만, 큰 텍스트는 화면을 빠르게 채우고 글의 일관성을 깨뜨립니다.

따라서 제대로 하는 것이 중요합니다!

 

최소 권장 본문 텍스트 크기는 이것입니다 (영문 기준) 👉🏼

• (안드로이드) 머티리얼 디자인 가이드 라인 : 16sp (Scale independent pixels의 약자)
• (iOS) 휴먼 인터페이스 가이드 라인 : 17pt

3. 행 높이(Line Height)

행 높이는 텍스트 줄 사이의 간격입니다.

행 높이가 너무 빡빡하면, 수평으로 읽는 흐름이 약해집니다.

행 높이가 너무 느슨하면 텍스트가 서로 멀어지는 것처럼 보입니다.

 

👍🏼 좋은 법칙은 이것을 대략적으로 설정하는 것입니다.

폰트 크기의 140% ~ 160% (영문 기준)

4. 행 길이(Line Length)

행 길이를 측정할 수 있는 가장 효과적인 방법은 줄 당 평균 문자입니다.

행 길이가 늘어나면 당신의 눈은 한 선의 끝에서부터 다음 선의 시작까지 더 멀리 이동해야 합니다.

이것은 당신의 진행을 수직적으로 확인하기가 더 어려워집니다.

 

👍🏼 좋은 법칙은 공백을 포함하여 모바일 또는 웹에 따라 평균 45 ~ 70 자입니다. (영문 기준)

당신은 이 도구를 사용하여 문자 수를 계산할 수 있습니다.

5. 간격(Spacing)

웹 타이포그래피의 공간은 주로 행 사이의 공간, 여백 및 단락 공간으로 구성됩니다.

올바르게 사용하면 내용에 더 집중하거나 편안하게 읽을 수 있습니다.

그러나 간격을 잘못 조정하면 사용자를 혼란스럽게 할 수 있습니다.

 

• 게슈탈트 원칙에 따르면, 개별 요소를 하나의 영역으로 모아두면 사용자는 해당 요소가 서로 관련된 것으로 인식합니다.
  계층을 정의하거나 관련 이미지 또는 요소를 배치할 때 이 점을 염두하세요.
• 👍🏼 좋은 법칙은 단락 간격을 글꼴 크기의 0.75x 및 1.25x 범위로 유지하는 것입니다. (영문 기준)

6. 계층 (Hierarchy)

계층 구조는 대비를 만들고 강조합니다.

당신은 타입 시스템을 만들면서 빈 캔버스에 헤드 라인, 서브 텍스트, 본문 텍스트로 구성된 계층 구조를 만들 수 있어요.

그리고 다음과 같은 경험에 의한 법칙을 실험해 볼 수 있습니다 👉🏼

 

• 뚜렷하고 대조적인 서체를 사용하세요. ex) 본문 : Sans Serif / 제목 : Serif
• 서체를 최대 2 ~ 3개로 제한하세요.
• 두 폰트 사이의 굵기를 건너뛰세요. ex) 본문 : light / 제목 : medium (light - regular - medium)
• 증가하는 폰트 크기 단계에 2 또는 피보나치 황금 비율(1.61)을 곱합니다. ex) 본문 텍스트 : 16pt / 제목 텍스트 : 25pt
• 제목에 회색 또는 강조 색상을 사용하는 것처럼, 색상을 실험해보세요.

7. 접근성 (Accessibility)

우리 모두가 우리가 만든 것을 즐길 수 있기를 원합니다.

우리는 접근성을 위한 디자인을 하기 위해서 WCAG 가이드 라인을 자세히 확인할 수 있습니다.

 

몇 가지 경험에 의한 법칙 👉🏼

• WCAG 대비 기준을 따릅니다. 이 웹 사이트를 사용하여 대비를 계산할 수 있습니다.
• 시스템 서체(iOS용 샌프란시스코 및 Android용 Roboto)는 모든 장치에서 크기 변경이 더 잘됩니다.
• 본문 텍스트에 서체를 사용하고 제목에는 다른 서체를 사용하여 디자인에 더 많은 스타일을 추가하세요

놀아봅시다!

이제 경험에 의한 법칙으로 충분합니다! 만약 우리가 이것에 더 재미를 느낀다면, 우리는 더 잘 만들 것입니다.

따라서 규칙을 어기고, 실험하고, 자신의 스타일을 찾는 것을 피하지 마세요! 😎

---

유용한 툴 및 리소스

Guidelines

• HIG Typography Guidelines
• Material Design Guidelines

Plugins/Websites

• Like what you see? Find the font on any web page.
• Accessibility Contrast Check
• Material Design Type scale tool
• Character count tool
• Placeholder text generator

Fonts

• List of Type foundries
• Free typefaces and fonts — Google fonts, 1001fonts, Fontsquirrel, dafont

References

• Typography Terminology
• Understanding typography
• Different type of fonts and when to use them
• Kerning guide

---

👇 원문기사로 이동하기

A beginner's guide to web and mobile typography

A beginner’s guide to web and mobile typography