우리에게 폰트가 굴림체 밖에 없다면 어떻게 될까? : 디자인의 기본요소, 폰트

1. 폰트의 중요성

애플고딕 적용 된 이미지
<애플고딕이 적용된 애플 스토어 웹사이트>
굴림이 적용된 애플사이트 이미지
<굴림체가 적용된 애플 스토어 웹사이트>

우리에게 만약 폰트가 굴림 밖에 없다면? 위에 이미지 처럼 가독성이 떨어지게 되며
애플도 굴림체 앞에선 볼품 없어진다.

현대카드 폰트가 적용된 홈페이지 이미지
<현대카드 폰트가 적용된 웹사이트>
굴림체가 적용된 현대카드 홈페이지
<굴림체가 적용된 현대카드 웹사이트>

또한 기업의 개성이나 브랜드 확립도 불가능하며, 소비자에게 어떠한 영감도 주지 못한다.

2. 폰트는 왜 중요할까?

  1. 웹에서 제공되는 정보의 95% 이상은 문자로 되어 있다.
  2. 폰트를 최적화하는 것은 가독성, 접근성, 사용 편의성을 포함한 전체적인 그래픽 밸런스를 최적화하는 것이다.
  3. 폰트를 최적하는 것이 곧 사용자 인터페이스의 최적화가 된다는 말이다.
엉망진창 굴림체 이미지
<비슷한 밈으로는 보노보노 PPT가 있다.>
디자이너를 괴롭히는 방법 이미지
<굴림체와 자간, 행간이 엉망이라면 정말 보기 힘들다>

3. 폰트 디자인 잘하는 방법

  1. 사용하는 폰트의 수는 최소한으로 유지해라.
  2. 표준 서체를 사용해라.
  3. 글의 길이에 제한을 둬라.
  4. 다양한 사이즈에서도 잘 보이는 서체를 선택한다.
  5. 글자를 구분할 수 있는 폰트를 사용해라.
  6. 전부 대문자로 사용하는 경우를 피해라. (한글의 경우 예외)
  7. 줄간격을 줄이지 말아라.
  8. 충분히 대비되는 색상을 이용해라.
  9. 빨간색이나 녹색 텍스트는 피하자.
  10. 깜빡이는 효과는 피해라.

“>*출처 : http://www.fontclub.co.kr/?p=4828 / <웹디자인에서의 타이포그라피에 대한 10가지 팁>

4. 사례

1. 폰트 자체로 아이덴티티 확립

1) 고딕체 계열(Sans-Serif)

눈누 고딕체 인기순 정렬 이미지
<눈누 – 고딕체 인기순 정렬>
a) 직각형태

우리에게 익숙하고 많이 사용되는 본고딕의 변형된 형태로 보다 디자인적 요소가 가미되고 글자 너비가 넓은 것이 특징이다.

1-2. 둥근형태

2) 명조체 계열(Serif)

눈누 명조체 인기순 정렬 이미지
<눈누 – 명조체 인기순 정렬>
  • 서정적이고 따뜻하거나 우아한 느낌을 줄 수 있는 명조체는 주로 고급스러움을 강조하는 식품이나 병원, 화장품 등 다양한 분야에 사용된다.
  • 명조체는 다른 폰트보다 시각적 특징이 강해 특유의 느낌을 전달하기 쉽지만 잘못 사용하면 올드해 보일 수 있는 단점이 있다.
  • 레퍼런스 사이트

2) 역동적인 폰트로 생동감 주기

3) 폰트로만 구성하기

<디자인 관련 다른이야기 보기>

사용자를 위한 세심한 배려! 마이크로인터렉티브란 무엇인가?