반응형 타이포그래피: 이해하고 사용하기

반응형 웹 디자인(Responsive Web Design, 이하 RWD)은 현재 인터넷상에 잘 알려져 있는 컨셉입니다. 

대략 6-7년 전쯤에 처음 소개되었고, 지금은 가장 대중화되어 모두 RWD를 빼놓고는 웹 디자인에 관해 말할 수 없을 지경입니다. RWD는 요즘 인터넷이 태블렛과 스마트폰에 의해 모바일화되고 동적으로 변화하면서 아주 중요해졌습니다. 

RWD에는 두 가지 요소가 있는데, 하나는 이미 오래 전에 소개가 된 '반응형 이미지' 입니다. 그리고 다른 하나는 바로 '반응형 타이포그래피' 입니다.

 

반응형 타이포그래피?

컨텐츠는 웹사이트에서 가장 중요한 요소임은 모두 다 알고 있는 사실입니다. 그리고 컨텐츠가 웹사이트의 중심요소일 때에는 타이포그래피의 중요성이 더욱 대두됩니다. 하지만 대다수 디자이너들은 반응형 그리드나 이미지에 몰두하기만 할 뿐, 타이포그래피의 중요성은 종종 잊곤 합니다. RWD에서 이미 타이포그래피에 관한 기본 요소들이 소개되긴 했습니다만(너비, 타입 크기, 라인 높이), 그것을 넘어선 반응형 타이포그래피로의 소개는 지금부터 입니다.

 

반응형 타이포그래피의 중요점은 무엇인가?

반응형 타이포그래피에는 중요한 세 가지 점이 있습니다. 첫 번째로 '사이즈 변화가 가능한 타입' 입니다. 이 말은 텍스트가 스크린 사이즈에 따라 변화해야 한다는 것 뿐만 아니라, 사용자에 의해서도 변화가 가능해야 한다는 것입니다. 두 번째로 작은 폰트 사이즈에도 가독성을 잃지 않기 위한 '최적화된 문장 길이', 마지막은 '대비' 입니다.

하지만 위의 세 가지는 세리프(serif)와 산 세리프(sans serif)에 의해 선택이 좌우됩니다. 보통 데스크탑의 모니터에서 세리프는 헤딩에, 산 세리프는 컨텐츠에 사용되는 것으로 볼 때 작은 스크린에는 산 세리프가 적합할지 모릅니다. 그 이유는 간단합니다: 세리프의 돌출된 반구조적 마무리 형태가 다른 문자와 서로 붙어버리기 때문에 주로 큰 사이즈에서 사용되어야 하는 것입니다. 만약 어느 한 폰트를 큰 스크린에 사용했다면, 작은 스크린에도 통일성을 위해 같은 폰트를 사용할 것입니다. 그렇기 때문에 두 스크린 모두를 충족시키기 위해 서(특히 폰트 사이즈가 12px 이하일 경우엔 더욱) 세리프 보단 산 세리프로 시도해 보는 것이 좋습니다.

폰트 사이즈는 다른 스크린 사이즈에 따라 CSS 스타일을 각각 주어야 합니다. 이 때 생각해봐야 할 점은 Pixel을 사용할지 Em을 사용할지 입니다. Em이 더 나을 것 같지만 Em은 기본값에서 상대적으로 계산되기 때문에 반응형 웹에서는 Pixel보다 더 복잡할 수 있습니다. Pixel을 사용할 경우에는 각각의 다른 스크린 사이즈에 맞춰서 폰트 사이즈의 값을 맞춰줘야 합니다.

폰트 사이즈의 변화에 관한 컨셉은 이해하고 받아들이기 쉬운 반면에, 최적의 문장 길이를 알아내는 것은 좀처럼 쉽지 않습니다. 왜냐하면 최적의 문장 길이란 없기 때문입니다. 몇몇 연구에 의하면 '최적의 문장 길이는 대략 50에서 75개 사이의 글자수로 되어있다'고 하지만 이건 오로지 통계적인 수치일 뿐입니다. 누군가에게 좋게 보이는 것도 다른 누군가에게는 그렇지 않을 수 있으니까요.

이제 웹 디자인을 시작할 때 각각의 다른 스크린 사이즈를 확인한 후 그에 맞는 폰트 사이즈를 설정하고 문장 길이를 대략 50개의 글자 수로(작은 스크린에서는 50개 미만이 될 수 있겠죠) 지정해 놓는 것입니다. 또한 텍스트로 채워질 컨텐츠 공간의 최대 가로 길이를 설정해 놓는 것도 중요합니다. 사용할 폰트 사이즈를 고려하여 문장 당 대략 최고 75개의 글자 수가 채워지겠끔 컨텐츠 공간인 컨테이너의 가로 길이를 설정하는 것입니다. 여기서도 마찬가지로 작은 스크린에서는 컨테이너의 가로 길이를 없애고 텍스트를 전체 스크린의 가로 길이에 맞게 풀어놓을 수 있습니다.

아이패드를 가로로 길게 눕혀 놓은 사이즈의 경우라면 조금은 다릅니다. 이런 경우에는 여러 개의 단으로 나눠 컨텐츠를 관리하는 것이 좋습니다. 보통 2-3개의 단으로 나눌 수 있으며 폰트 사이즈에 따라 단의 갯수를 맞춥니다. 하지만 절대 1단으로만 텍스트를 채우지 않도록 합니다. 1단 와이드 형식은 텍스트가 가로로 너무 길게 늘어지게 되어 읽는데에 금방 지치게 됩니다.

대비에 관해서는 아마존의 e북 리더기가 좋은 예라 할 수 있습니다. e북 리더기에는 사용자가 폰트타입을 바꿀 수 있을뿐 아니라 폰트 사이즈와 라인 높이, 배경색도 바꿀 수 있습니다. 이러한 특징을 웹사이트에 적용해보는 것이 쉽지는 않겠지만 대조를 통해 스크린 사이즈에 따른 가독성의 변화를 줄일 수 있습니다.

스크린 사이즈별 맞춤 폰트 설정하기

미디어 쿼리와 반응형 웹 디자인에서는 각각의 다른 스크린 사이즈에 맞게 폰트를 바꿀 수 있습니다. 만약 사용하려는 폰트가 모든 스크린 사이즈에는 적합하지 않다면, 구지 그 폰트를 모든 곳에 사용할 필요는 없습니다. 예를 들어 다수의 장식용 폰트는 큰 사이즈에서는 보기 좋지만, 작은 사이즈로 갈수록 읽기 힘들어 집니다. 바로 이런 경우에 장식용 폰트를 큰 스크린에서만 사용하고 작은 스크린에서는 다른 폰트로 대체할 수 있습니다.

여기 CSS에서 스크린 간에 폰트를 대체하는 간단한 예가 있습니다:

1| @media (min-width: 960px) {h1 {font-family: "Georgia",}}
2| @media (max-width: 960px) {h1 {font-family: "Droid Sans",}}

 

사용자와 모바일 기기 사이의 거리 문제

타이포그래피와 관련된 작업을 할 때 중요하게 생각해야 할 점은 사용자가 어느 정도 떨어져서 모바일 기기를 보는가 입니다. 이 점이 반응형 타이포그래피의 까다로운 점 입니다. 사람마다 모바일 기기를 쥐고 보는 거리의 차이는 다양합니다. 스마트폰을 쥐고 볼 때와 태블렛을 가지고 볼 때의 거리 또한 다릅니다. 이러한 점을 두고 디자이너들은 폰트 사이즈와 라인 높이, 너비의 크기를 정할 때 각각의 스크린 사이즈를 고려하여 선택해야 합니다. 그러하기에 반응형 타이포그래피는 하나의 도전적인 컨셉이며 복잡할 수 밖에 없습니다.

Refresh Studio

해외 최신 웹/UX 디자인 글과 동향을 소개해 드립니다.