타이포그래피, 이메일에서 어떻게 활용할까?

좋은 타이포그래피는 콘텐츠를 효과적으로 전달할 수 있게 해줍니다. 웹사이트의 95%는 텍스트로 이루어져 있고, 그 텍스트를 표현하는 타이포그래피는 매우 중요합니다.

이메일도 마찬가지입니다. 이미지, 일러스트, 인포그래픽 등을 활용하기도 하지만, 텍스트 그 자체의 가독성을 높였을 때 콘텐츠를 더 효과적으로 전달할 수 있습니다.

Smashing Magazine은 2013년에 진행한 웹사이트 타이포그래피 조사(Typographic Design Patterns And Current Practices (2013 Edition))에 이어 지난 8월에 이메일 타이포그래피 조사를 진행했습니다. 50개의 이메일을 무려 95개의 항목으로 분석했습니다.

Helvetica VS Georgia

• 타이틀에 사용한 폰트 중 74%는 고딕체, 26%는 명조체입니다.

• 본문에 사용한 폰트 중 64%는 고딕체, 36%는 명조체입니다.

• 고딕체 폰트 중 가장 많이 사용한 것은 Helvetica 입니다.

• 명조체 폰트 중 가장 많이 사용한 것은 Georgia 입니다.

일반적으로 명조체는 텍스트 크기가 작을 때 뭉개지는 현상이 있기 때문에 본문에는 잘 사용하지 않습니다. 이메일은 본문과 타이틀 모두 고딕체의 사용 비중이 훨씬 높습니다.

Helvetica는 타이틀에서는 16%, 본문에서는 20% 사용됐습니다. Gerogia는 타이틀에서는 14%, 본문에서는 24% 사용됐습니다. 이 외에도 Arial, Open Sans 등의 폰트가 사용됐습니다.

이메일에서 명조체를 사용하는 비율은 36%로, 웹사이트의 56.1%에 비해 훨씬 낮습니다. 조사한 웹사이트에 뉴스 사이트가 많이 포함됐기 때문이기도 하고, 이메일은 본문 내용이 상대적으로 적기 때문이기도 합니다. 이메일은 핵심적인 마케팅 메시지만 타이틀 형태로 표시하고, 자세한 내용은 랜딩페이지에서 전달합니다. 타이틀에는 대부분 고딕체를 사용하기 때문에 명조체 사용 비율이 낮을 수 밖에 없습니다.

14px VS 16px

• 가장 많이 사용된 본문 텍스트 크기는 16px 입니다. (44%)

• 본문 텍스트 크기의 범위는 최소 13px부터 최대 20px까지 입니다.

• 72%가 데스크톱, 모바일에서 모두 같은 텍스트 크기를 사용합니다.

텍스트 크기가 너무 작으면 가독성이 떨어집니다. 특히 데스크톱보다 화면 크기가 작은 모바일에서 이메일을 확인하는 사용자가 많아지면서 가독성은 더 중요해졌습니다. 모바일 환경을 고려하면 적어도 14px 이상의 텍스트 크기를 사용하는 것이 좋습니다.

540px VS 600px

타이포그래피의 중요한 요소 중 하나는 얼마나 많은 텍스트를 보여주느냐 입니다. 가독성을 높이기 위해서는 적당한 본문 가로 크기를 설정하고, 그 안에 적당한 양의 텍스트를 표시해야 합니다.

• 가장 많이 사용된 본문 가로 크기는 600px 입니다.

• 본문 가로 크기의 범위는 최소 480px부터 최대 760px까지 입니다.

• 데스크톱을 기준으로 했을 때 한 줄에 평균 53.86자가 표시됩니다.

• 모바일에서는 한 줄에 최소 22자에서 최대 57자가 표시됩니다.

The Elements of Typographic Style Applied to the Web에서 데스크톱을 기준으로 한 줄에 45자에서 75자의 텍스트를 표시할 것을 권장하고 있습니다. 가장 이상적인 것은 66자입니다. 66px의 Georgia 폰트로 테스트 해보면, 본문 가로 크기가 540px일 때는 한 줄에 71자가, 480px일 때는 66자가 표시됩니다.

#000000 VS #333333

• 본문 텍스트에서 가장 많이 사용된 색은 #000000(검정색)입니다. (20%)

• 두 번째로 많이 사용된 색은 #333333입니다. (16%)

• 56%가 타이틀과 본문 텍스트에 같은 색상을 사용했습니다.

주요 이메일 뉴스레터들의 타이틀, 본문 텍스트 색상 조합

거의 모든 이메일이 검정색 계열을 사용하는데, 경우에 따라 완전한 검정색을 사용하기도 하고, 다양한 명도의 회색을 사용하기도 합니다. 내용을 강조하기 위해 다른 색을 써야할 때가 있지만 가독성을 높이기 위해서는 한 가지 계통의 색을 사용하고 강조할 텍스트는 명도를 다르게 하는 것이 좋습니다.

가운데 정렬 VS 왼쪽 정렬

• 데스크톱에서 열어봤을 때 타이틀은 가운데 정렬이 54%, 왼쪽 정렬이 46%입니다.

• 모바일에서 열어봤을 때 타이틀은 왼쪽 정렬이 54%, 가운데 정렬이 46%입니다.

• 데스크톱에서 열어봤을 때 본문 텍스트는 왼쪽 정렬이 74%, 가운데 정렬이 26%입니다.

• 모바일에서 열어봤을 때 본문 텍스트는 왼쪽 정렬이 76%, 가운데 정렬이 24%입니다.

가운데 정렬된 긴 글은 읽기 어렵습니다. 매 줄마다 시작되는 지점이 다르기 때문입니다.

데스크톱, 모바일 모두 타이틀은 가운데 정렬이 많고, 본문 텍스트는 왼쪽 정렬이 많습니다. 본문처럼 길이가 긴 텍스트를 가운데 정렬로 표시하면 보기도 어색하고 가독성도 떨어집니다. 타이틀이나 이미지 설명 같은 짧은 텍스트는 가운데 정렬을 사용해도 되지만, 본문 텍스트는 왼쪽 정렬을 사용하는 것이 좋습니다.

정리하면 이메일에서는,

• 고딕체를 더 많이 사용합니다.
• 가장 많이 사용되는 본문 텍스트 크기는 16px 입니다.
• 가장 많이 사용되는 본문 가로 크기는 600px 입니다.
• 가장 많이 사용되는 본문 텍스트 색상은 #000000과 #333333입니다.
• 타이틀은 가운데 정렬, 본문은 왼쪽 정렬을 사용합니다.

이 외에도 타이틀의 텍스트 크기, 미리보기 텍스트의 사용 여부, 로딩 속도 등 다양한 항목에 대해 다루고 있습니다. 자세한 내용이 궁금하시면 원문 Typographic Patterns In HTML Email Newsletter Design를 확인하세요.

잘 디자인 된 이메일 사례가 필요하다면 Really Good Emails를 방문해보세요. 카테고리별로 다양한 참고 사례가 정리되어있습니다.

> 더 읽기: 타이포그래피, 웹에서 어떻게 활용할까?, 올바른 웹, 모바일 폰트 사용하기

by 낙타 발자국