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

웹사이트의 95%는 텍스트로 이루어져 있다고 합니다. 여러분이 읽고있는 이 글 또한 웹에 적용된 타이포그래피라고 할 수 있을텐데요, 사이트 방문자가 콘텐츠를 잘 읽고 목적지를 쉽게 찾아갈 수 있도록 하는 웹에서의 타이포그래피는 인쇄물에서의 그것보다 더 중요하다고 해도 과언이 아닐 것입니다. 웹 디자이너가 적용할 수 있는 웹 타이포그래피 요소와 디자인 팁을 소개합니다.

다양한 폰트의 선택, 미세한 활자의 조정이 가능해 디자이너의 창의성을 발휘할 수 있는 인쇄 작업과는 달리 웹에서 완벽한 타이포그래피를 구현하기에는 한계가 있습니다. 그럼에도 불구하고, 다양한 스타일의 웹폰트와 CSS의 출연으로 그래픽툴을 이용하지 않고도 웹상에서 훌륭한 타이포그래피를 구현할 수 있게 되었습니다. 웹에서 좋은 타이포그래피를 구현하는 방법을 디자인의 원리와 요소를 통해 알아보겠습니다.

타이포그래피의 요소, 웹에 적용하기 

Hierarchy(계층)

신문이나 잡지 등의 인쇄 매체에서 텍스트를 보여줄 때는 일련의 계층 구조가 필요합니다. 웹도 마찬가지입니다. 가독성이 좋은 웹페이지는 중요도에 따라 헤더와 서브타이틀, 본문, 링크 등이 시각적으로 구조화되어 시각적으로 안정감을 줍니다. 웹에서의 텍스트 계층은 글꼴의 크기 차이를 두는 것 외에도 굵기, 컬러, 기울임, 폰트 선택 등으로 적용할 수 있습니다. 타이틀과 본문을 구분지어주는 기본적인 역할부터 중요도에 따라 콘텐츠를 나누어 사용자들이 잘 읽을 수 있도록 도와줍니다. 

계층이 명확한 컨텐츠 구조는 사용자가 어디에서부터 어떠한 방식으로 글을 읽어가야 하는지 안내해 줍니다.

 

Contrast(대비)

흰 배경에는 블랙 계열의 컬러를 사용하고 헤드라인과 본문의 텍스트 크기의 차이를 두는 것 모두 대비라는 요소를 적용한 것입니다. 일반적으로 배경과 텍스트 색상의 강한 대비는 가독성을 높여줍니다. 

크기와 컬러의 '대비'는 컨텐츠의 가독성을 높여줍니다.

하지만 지나친 대비는 오히려 사이트의 분위기를 해치고 텍스트 요소간의 결합을 흩뜨리며 가독성을 떨어뜨립니다. 흔히 블랙과 화이트의 강렬한 대비가 가독성을 높여준다고 생각하기 쉽지만, 빛을 내는 스크린에서의 이러한 강한 대비는 오히려 눈에 피로감을 줄 수 있습니다. 때문에 본문의 컬러는 완전한 블랙이 아닌 진한 회색 계열의 컬러를 사용하는 것이 좋습니다. 

컬러 

웹에서의 컬러는 시선을 유도하고 사용자들이 콘텐츠를 그룹화 해 읽을 수 있도록 도와주는 중요한 요소입니다. 전체 사이트의 분위기와 사용자의 행동까지 유도하는 웹에서의 컬러 선택은 그만큼 중요하다고 할 수 있을텐데요, 그렇다면 웹에서의 글꼴 컬러 선택은 어떻게 하는 것이 좋을까요?

1. 텍스트의 가독성을 위해 배경과 글꼴 요소간의 충분한 컬러의 대비를 부여합니다.

2. Less is more - 제한된 컬러의 사용은 콘텐츠를 더욱 돋보이게 해 줍니다.

3. 온,오프라인 컬러 시스템 통일 - 브랜드 로고 및 아이덴티티 컬러를 적용하면 사용자들에게 일관된 시각적 메시지와 통일감을 줄 수 있습니다. 때문에 브랜드에 사용된 컬러 시스템을 토대로 Main, Sub, Point컬러를 텍스트에 조화롭게 적용하는 것이 좋습니다. 

브랜드의 컬러 시스템을 적용한 웹사이트 (http://www.heungkuklife.co.kr/)

크기

텍스트의 역할과 중요도에 따라 달라지는 크기는 어떠한 요소를 강조하거나 그 반대의 경우를 위해 사용됩니다. 강조를 위한 너무 큰 크기의 사이즈도, 너무 작은 사이즈도 시각적인 균형을 깨트립니다. 때문에 보기 좋은 헤드라인과 본문 글꼴의 적당한 크기 차이를 두어 구성하면 시각적 안정감을 돕습니다. 일반적으로 타이틀에 사용되는 글꼴의 크기는18px ~ 32px, 본문에 사용되는 사이즈는 12px~16px 정도이며, 웹에서 잘 읽을 수 있는 최소 폰트의 사이즈는 13px, 0.813em라고 합니다. 

비율(Scale)

우리가 보는 웹페이지에는 다양한 크기의 텍스트가 적용되어 있습니다. 타이틀과 본문 등을 적당한 비율의 크기로 배치한다면 콘텐츠를 더욱 짜임새 있게 구성할 수 있습니다. typescale은 1.618이라는 황금비율을 포함한 다양한 비율을 적용해 폰트 크기를 비교해 볼 수 있는 사이트입니다.

 

http://type-scale.com/

행간(line-height), 자간(letter-spacing)

인쇄물과 마찬가지로 웹에서의 행간과 자간은 본문의 가독성에 중요한 역할을 합니다. 어느 정도의 줄간격은 가독성을 더욱 높여줍니다. 특히 폰트의 크기가 작을수록 자간을, 내용이 많은 문단일수록 행간을 늘여주는 것이 좋습니다. 너무 좁은 줄간격도, 넓은 줄간격도 좋지 않으며 폰트 사이즈의 150%이상의 행간은 읽기 좋은 본문을 만들어줍니다. 

참고글 - 웹디자인에서의 자간과 행간에 관한 고찰 

어떠한 폰트를 선택할까?

Less is More

모든 종류의 시스템폰트를 웹에 적용할 수는 없지만 '돋움체, 굴림체' 등 웹상에서의 폰트 선택이 제한적이었던 과거에 비해 다양한 웹폰트를 사용할 수 있게 되었는데요, 과연 웹페이지에서 많은 웹폰트를 적용한 화려한 디자인이 과연 좋은 디자인일까요? 좋은 웹사이트는 한 가지 폰트로도 위에 언급한 '대비'요소를 통해 크기와 두께, 색상의 변화만으로 사이트 전체에는 시각적 통일성과 안정감을 주고, 사이트의 무게는 더욱 가볍게 만듭니다.

이미 검증받은 폰트 선택, 절반은 성공!

오랜 역사와 대중성 있는 폰트는 그 자체로 가독성과 조형성을 갖추고 있습니다. 명조, 고딕이 들어간 웹폰트가 널리 사용되는 이유 또한 가독성이 높기 때문입니다. 다양한 굵기의 서체를 지원하는 Adobe의 본고딕 또한 깔끔하고 뛰어난 가독성 때문에 많은 사이트에서 이용되고 있습니다.

타이틀과 본문에 어울리는 폰트 선택.

같은 크기에서 가독성이 더 우수한 폰트가 있을까요? 헤더와 본문 등 각 영역에 어울리는 폰트는 따로 있습니다. 일반적으로 세리프(Serif)글꼴은 본문에 작은 크기로 적용되었을 때 뭉개지는 현상이 있는데요,(예외로, Georgia같은 폰트는 크기가 작을 때 더 좋은 가독성을 보입니다.) 때문에 폰트가 어떤 영역에 적용되는지에 따라 적합한 폰트를 선택해야 합니다.

'명조(Serif)는 본문이 아닌 타이틀에 크게 적용되었을 때 웹에서 더 우수한 가독성을 보입니다.

영문과 한글의 조화 

한글 웹폰트에 비해 영문 웹폰트는 선택 폭이 넓습니다. 한글과 영문을 함께 사용할 때, 한글 웹폰트로도 영문을 쓸 수는 있지만, 사이트의 심미적인 부분을 좀 더 고려한다면 영문 웹폰트를 독립적으로 사용하기도 합니다. 적용 명조체에는 세리프 서체, 고딕체에는 산세리프 서체가 잘 어울립니다. 사이트의 성격과 분위기에 맞는 한글과 영문의 조합은 시각적 통일성을 높입니다.

나눔고딕 + Lato 

나눔명조 + PT Serif 

좋은 타이포그래피는 웹사이트가 전달하는 메시지를 돋보이게 해 주며 명확하게 내용을 전달 해 줍니다. 웹에서의 타이포그래피 활용를 통해 방문자들이 더 머물고 싶은, 즐겨찾는 사이트를 디자인 하는 데 도움이 되길 바랍니다.

출처 : Smashing Magazine, tutsplus, typecast

by 소금쟁이 발자국