개발자 프로젝트를 위한 타이포그래피 선택의 팁

상황과 장소, 내용에 따른 폰트를 사용합시다. 같은 고백이지만 종류가 다른 고백이 될 수 있어요.

1. 문제의 발단

• 모든 프로젝트를 진행하면서 어떤 폰트를 사용할까? 에 대한 고민을 정말 오랜 시간 많이 했다.
• 느낌으로 결정하는 폰트보다, 상황에 맞는 가독성 좋은 그리고 예쁘기까지 한 폰트를 알아보자.

2. 세리프(Serif)

• 글자의 끝에 장식선과 곡선이 존제하는 체. 빽빽한 글을 읽을 때 눈의 피로를 줄여줘 가독성에 용의 하다.

세리프의 예시. 끝이 구부러진 느낌이 난다.

3. 산세리프(Sans serif)

• 세리프와 달리 끝에 장식선이 없다. 깔끔한 디자인과 크기가 작아도 가독성이 좋아서 인터페이스 등에 사용하기 용의 하다.

산세리프의 예시. 현대적이며 깔끔하다. 끝도 안 굽었다.

4. 디스플레이(Display)

• 폰트 사이즈가 클 때 유리하다. 그래서 제목이나 로고 등의 용도로 사용할 때 용의 하다.
• 하지만 가독성이 낮아 텍스트가 많거나, 사이즈가 작으면 사용해서는 안된다.

디스플레이의 예시. 확실히 가독성은 떨어진다. 하지만 클떄는 잘 보이고 깔끔함 속에 독특함이 있다.

5. 고정폭(Monospace)

• 글자의 실제 크기와 상관없이, 모든 글자가 동일한 가로길이를 보여준다.
• 주로, 텍스트를 자세하게 표현할 수 없는 경우 사용한다.

고정폭(모노스페이스)의 예시. 전부 같은 가로 크기를 가지고 있는 것을 알 수 있다.

6. 세부적인 조절에 필요한 용어

• 크기 : 일명 pt. 일반적으로는 css에서 font-size로 조절하는 부분이다. 대부분 10px이하는 가독성이 너무 떨어져서 추천하지 않고, 12px정도가 정석이다.
• 줄 간격 : css에서 line-height로 조절하는 부분이다. 글자 간의 세로 길이를 뜻하며, 어느 정도 떨어져서 자연스럽게 텍스트가 읽히도록 한다. 너무 많이 띄어놓으면 자연스럽게 읽히지가 않고 강조하는 느낌이나, 아예 다른 섹션의 글처럼 느껴질 수 있다.
• 자간(tracking)과 커닝(karning) : 자간은 css에서 letter-spacing으로 조절하는 부분이다. 글자 하나하나 간의 사이 간격을 말한다. 커닝은 css에서 font-kerning으로 조절하는 부분이다. 대부분의 브라우저는 auto로 설정되어 있고, 사용하거나(normal), 사용하지 않는(none)을 속성으로 가지고 있다. 글자 내부의 공백(자간보다 좁은 글자 하나에 해당하는 빈 공간)을 조절한다.
• 폰트 페어링(font pairing) : 한 가지 디자인에서 폰트를 여러 가지 조합한다. 너무 다른 폰트를 같이 사용하면 어색하다.
  • Tip: 같은 폰트 중에서 굵기나 볼드, 이탤릭체 등을 사용해서 다른 느낌을 주어서 같은 폰트이지만 미묘하게 다른 느낌으로 사용할 수 도 있다.
  • Tip: 형태가 비슷한 폰트는 같이 사용하는 것을 피하는 것이 좋다. 세리프와 산세리프를 사용하면 비슷하지만 다른 느낌으로 사용할 수 있다.
• 가독성 : 얼마나 잘 읽히는가에 관한 것이다. UX에서 가장 중요한 요소이다.
  • Tip: 컴퓨터 화면에서는 작은 폰트로 텍스트를 표시할 경우가 많은데 이때, 산세리프가 유리하다.
  • Tip: 이탤릭체나 필기체 등을 너무 남발하면 가독성은 최악이다. 적당히 필요한 곳에만 사용한다.
  • Tip: 가끔 구분이 힘든 글자들이 섞여있는 폰트들이 존재한다. (ex: e, c, d, o 등이 주로 헷갈리게 표현될 수 있다) 이런 부분까지 확인하고 사용하는 것이 옳다.
  • Tip: 대문자는 제목에서 정도만 사용하자. 읽기가 쉽지 않다.

사실 이부분은 디자인에 가깝다. 하지만 개발자가 알아서 나쁘지 않은 부분이다. 가독성 부분은 UX에서도 매우 중요한 부분이며, 여러 가지 폰트를 다양하게 적용시켜 보면서 최선의 선택을 하는 것은 디자이너와 협업하기 전에도 필요하기 때문이다. 아래에는 참고하거나 폰트를 얻을 수 있는 사이트를 적어 놓는다. 물론, 가장 중요한 '저작권' 문제가 있다. 대부분 폰트를 다운 받을때 확인 할 수 있도록 적혀있다.
꼭 사용이 가능한 것인지 확인하고 사용하자!

네이버 글꼴 모음

눈누

DaFont - Download fonts