웹 타이포그래피 7원칙
7 Web Typography Rules
글은 읽혀야 합니다. 읽기 어렵게 디자인된 글은 읽기 힘들며, 결국에는 의미를 전달하지 못할 것입니다. 그렇다면 가장 읽기 편하게 디자인된 글은 어떤 모습일까요? 오늘은 웹 환경에서 적용할 수 있는 '웹 타이포그래피 7원칙'을 가져왔습니다.
https://medium.com/tradecraft-traction/7-web-typography-rules-27de68c60f6
*지금부터는 위 글에 대한 번역입니다.
웹 타이포그래피 7원칙
7 Web Typography Rules
"막힘없이 술술 읽히는 웹사이트를 원하시나요? 웹사이트 디자인의 숨은 1등 공신, 웹 타이포그래피로 디자인을 시작해보세요."
웹사이트를 디자인하느라 너무나 고민 중이신가요?
웹에서 사용할 수 있는 10만 개의 각자 다른 폰트와 1680만 개의 컬러 덕분에, 가능성은 사실상 무궁무진합니다. 어떤 사람들의 상상력은 아마 부르즈 칼리파처럼 높게 솟아오를 것입니다. 반면 어떤 사람들은 너무나 절망하여 차라리 드라마나 보며 흥청망청 지내다가 나중에 생각하고 싶을 수 있습니다.
만약 웹사이트를 만드는 게 어렵게 다가온다면, 당신은 혼자가 아닙니다.
다 같이 10분 동안 차근차근 웹 타이포그래피 가이드를 배워나가 봅시다. 차근차근 잘 따라온다면, 당신은 명확한 커뮤니케이션을 위한 최선의 웹 타이포그래피를 적용할 수 있을 것입니다. 당신은 편안한 가독성을 통해 아름답게 디자인할 수 있을 것입니다.
시작합니다.
1. 폰트를 고르세요
당신이 화면에서 읽는 모든 문장은 폰트를 사용합니다. 폰트는 전체적인 분위기와 시각적 인상을 결정합니다. 아래는 플랫 UI에서 자주 쓰이는 웹 폰트 Top7이 있습니다.
가장 마음에 드는 폰트는 어떤건가요?2. 글자 크기를 조절하세요
일반적으로, 웹은 작은 글자로 우리를 고문해왔습니다. 연구 결과에 따르면, 큰 글자가 작은 글자에 비해 더욱 강한 인상과 의미를 내포함을 보여줍니다.
그럼, 글자 크기를 어떻게 정하면 될까요?
먼저 본문부터 시작합니다. 글자 크기를 15 ~ 25px로 바꾸세요.
여기 예시로 ‘해리포터와 마법사의 돌’ 도입 부분이 있습니다. 폰트는 제가 가장 좋아하는 폰트 중 하나인 Proxima Nova를 사용했습니다.
왼쪽의 경우, 기본 글자 크기인 12px로 설정되어있습니다. 이런 작은 글자 크기는 사람들의 눈을 혹사시킬 것입니다. 폰트 사이즈를 15px으로 키우자마자 훨씬 읽기 좋아졌습니다.
15px로 글자를 키우니 훨씬 읽기 편하지 않나요?
3. 제목의 크기를 조절하세요
제목은 읽는 사람들에게 일종의 표지판입니다. 사람들은 제목을 통해 글의 전체적인 구조를 빠르게 이해할 수 있습니다. 항상 두 종류의 제목만을 사용하도록 해보세요.
가장 큰 제목은 본문의 180 ~ 200%로 글자크기를 설정하세요. 만약 부제목이 있다면 본문의 130 ~ 150%로 글자크기를 설정하세요.
4. 줄 간격을 설정하세요
가끔 줄과 줄 사이에 숨 쉴 틈이 없어서 읽는데 스트레스를 받을 때가 있습니다.
덩어리의 글을 읽기 편하기 위해, 줄 간격을 글자 크기의 120 ~ 145%로 설정하세요.
스케치의 경우, 오른쪽 패널에서 Spacing > Line 항목에서 설정하세요
5. 자간과 커닝을 통해 글을 여유롭게 만드세요
자간은 글자와 글자 사이의 간격을 담당합니다. 그렇다면 뭘 봐야 할까요? 스케치에서는, 두 가지 방법을 통해 자간에 주목했습니다.
첫째, 큰 글자들에서는 자간을 줄인다
둘째, 제목에는 자간을 넓힌다
포토샵의 경우, Scott Butterick의 “Metrics”옵션을 사용합니다.
커닝은 이웃한 두 글자 사이의 간격입니다.
스케치의 경우, Character 입력 창을 활용합니다. 여기 자간과 커닝을 조절하는 방법이 담긴 GIF가 있습니다.
6. 제목과 본문 사이에 여백을 설정하세요
여백은 당신이 어떤 식으로 내용에 집중하는지 영향을 줍니다. 제목과 본문의 여백은 넉넉하고 가벼워야 하며, 이때 요소들 간의 연관성을 지키는 선에서 유지되어야 합니다.
제목과 본문 사이에 여백은 15px, 20px, 또는 30px이 되어야 합니다.
7. 한 줄에 45 ~ 90자가 들어가도록 하세요
또 다른 효과적인 방법으로, 텍스트 박스의 사이즈를 조절할 수 있습니다.
하나의 세로 페이지에서 허용되는 최대 글자 수는 45 ~ 90자입니다. 이상적인 글자 수는 66자입니다.
만약 한 줄에 90자 이상을 두게 된다면, 사람들은 읽기 힘들어할 것입니다. 그리도 읽는 걸 포기할 겁니다.
심리학적으로, 사람들의 무의식은 글의 다음 줄로 넘어갈 때마다 흥미를 느낍니다. 새롭게 시작되는 줄마다, 사람들의 신경이 집중되어있습니다. 하지만 점차 읽어 나가면서 흥미는 줄어들게 됩니다.
결론
비록 프로 디자이너지만, 저는 항상 제 자신을 학생이라고 생각합니다. 디자인을 하면서 가장 어려운 부분은 여백을 인지하고 값을 결정하는 것입니다. 저는 우리 모두가 걱정 없이 결정할 수 있게끔 하기 위해, 웹 타이포그래피라는 이 주제를 선정하여 글을 쓰기로 결심했습니다. 이제 우리는 지금까지 설명한 7개의 원칙을 통해 아름다운 웹 타이포그래피를 디자인할 수 있습니다.
