11. 웹 타이포그래피

이 강좌는 Dev.Opera의 ' 11: Typography on the web'을 번역한 문서입니다. 번역과 관련된 안내는 여기에서 확인해 주세요.

• 역자들 : 아쿠아테라

이번 강좌는 웹 타이포에 대한 주제를 다루고 있고, 출처가 영어권이기 때문에 한글 폰트에 대한 논의는 다루어지고 있지 않습니다.

타이포그래피란 무엇인가? 간단히 말해서, 전통적인 프린트 디자인으로부터 빌려온 컨셉으로 글씨의 예술, 디자인이며 정렬이다. 이 글은 당신이 타이포를 가지고 무엇인가를 할 수 있는가에 관한 문제라기 보다는 할 수 없는 것이 무엇인가에 대한 문제이다. 웹 상에서 타이포그래피는 작은 관심을 얻어왔고, 웹 타이포가 일반 프린트 타이포와 비교되어 어렵다고 여겨지는 특정 기술적 한계점도 있다. 하지만 사용이 가능한 툴이 있다면 웹 상에서 다양하고 아름다운 형태로 타이포를 표현하지 못할 이유도 없다.

이번 장에서, 프린트 디자인과 비교하여 왜 웹 상에서 타이포그래피가 제약을 가지는지에 대해서 정확히 살펴보고 이와 같은 팁을 적용한 좋은 웹 페이지의 사례를 기반으로 한 좋은 웹 타이포그래피를 할 수 있는 몇 가지 팁을 알려 주고자 한다.

이번 장에서 당신이 CSS나 HTML코드에 대해서 잘 모른다고 하더라고 걱정할 필요가 없다. 이번 장에서의 주요한 내용은 디자인에 대해서 생각해 보는 것이기 때문이다.

이번 장을 살펴보는 동안, 펜과 종이를 옆에 두어 텍스트 레이아웃에 관한 아이디어를 직접 그려보는 것은 참 좋은 아이디어 일 것이다. 이번 장에서 다루어야 할 내용은 다음과 같다.

• 웹 타이포그래피의 한계점
  • 줄어든 폰트의 선택의 폭
  • 하이픈 연결
  • Kerning 커닝
  • 조작의 부재
• 웹 상에서 타이포그래피는 어떻게 적용되는가?
• 빠른 팁
  • 폰트의 범위 선택
  • 줄 길이
  • 줄 간격
  • Drop caps
  • 작은 대문자
  • 내어쓰기
  • 서체적으로 올바른 구두법과 다른 속성들
  • Pull-quotes
• 요약
• 연습문제
• 작가에 관하여

기존의 프린트 디자이너들은 서체를 사용할 때 텍스트의 위치를 잡아주기 위한 옵션과 무척 많은 폰트 선택의 폭을 가지고 있었다.

웹 상의 타이포는 우리가 폰트를 사용해야 하며 그것들을 위치 시켜야 하는 등등의 이유로 많은 제약을 가지고 있으며 단순히 당신이 웹사이트를 디자인 하는 것이 중요한 것이 아니라 그렇게 만들어진 웹사이트가 사용자의 컴퓨터 상에서 올바르게 보여질 수 있는 것인가가 중요하다는 것을 알아야 한다.

웹 타이포그래피는 다음과 같은 두 가지 한계점을 가지고 있다.

• 줄어든 폰트 선택의 폭
• 하이픈을 이용한 단어의 연결을 할 수 없어서 하나의 줄 안에서 양쪽 정렬을 하게 되면 텍스트 간의 간격이 넓어져 이상해 지는 것을 막을 수 없다.
• 커닝_Kerning에 관련된 열악한 콘트롤 (예를 들어 철자 간의 간격)
• 사용자의 스크린의 크기가 몇인지 해상도는 어떤지 환경이 어떤지 다양한 경우를 고려하여 디자이너가 디자인하는 화면이 결국 사용자에게 어떻게 보여지게 만들 것인지를 결정하기 어렵다.

이와 같은 다양한 점들을 좀더 깊게 살펴보자.

줄어든 폰트의 선택의 폭은 종종 문자를 스타일 지정할 때 가장 먼저 마주하게 되는 일이다.

비록 당신이 CSS를 통해 당신이 좋아하는 폰트를 선택할 수 있고 당신의 사이트에 방문하는 사람들이 그들의 컴퓨터에 해당 폰트가 설치되어있어서 텍스트를 올바르게 볼 수도 있지만, 컴퓨터 안에 설치가 되어있지 않은 경우에는 브라우저 기본으로 설치되어있는 폰트로 보여지게 될 것이다. (일반적으로는 Times New Roman체이다.)

그러므로 당신은 당신의 바디 텍스트를 Trump Medieval 혹은 Avant Garde와 같은 특별한 서체로 하는 것을 좋아할 테지만, 당신의 사이트를 방문하는 사람들은 이미 디자이너에게 심하게 편향되어있기 때문에 이러한 시도는 득이 될 것이 없다.

이와 같은 이유로 인하여 대다수의 웹 디자이너들은 아래 나열되어 있는 바와 같이 시스템상에서 호환이 되는 몇 가지 일반적으로 사용 가능한 폰트만을 사용하는 제약을 겪게 된다.

• Andale Mono
• Times New Roman
• Georgia
• Verdana
• Arial/Arial Black
• Courier/Courier New
• Trebuchet MS
• Comic Sans (이 폰트는 전문적인 폰트가 아니다. 해당 사이트가 아이들을 대상으로 하여 부족한 경우가 아니라면 많은 사람들은 이 폰트를 못생겼다고 생각하여 잘 사용하지 않는다.)
• Impact

이 폰트들의 생김새는 아래 나와 있는 그림1과 같다.

위에 나와 있는 폰트 가운데 하나를 선택한 다는 것은 대부분의 웹 사이트 방문자들이 가지고 있을 폰트를 고른다는 의미이다.

마이크로소프트 역시 윈도우 비스타, XP 상에서 스크린을 위해 디자인된 6가지 서체를 소개하며 기이하게도 이 모든 서체들은 알파벳 C로 시작하는 이름을 가지고 있다.

만약에 이 서체를 사용하기를 원한다면 그것은 Cambria, Calibri, Candara, Consolas, Constantia, Corbel이다. 그러나 나는 이런 서체를 사용하는 것을 추천하지 않는데 이와 같은 서체들은 맥이나 리눅스 상에서 사용하는 것이 불가능하기 때문이다.

기존의 인쇄 디자이너가 수 천 가지의 활자면을 사용할 수 있었던 것과는 달리 웹 디자이너는 단지 약 12가지의 서체만이 사용이 가능하다.

그렇다면 이것은 심각한 제약일까?

타이포그래피는 단순히 매력적인 서체를 고르는 것 이상의 일로, 줄 길이, 커닝, 공백에 관한 일이며 컴퓨터 상의 폰트 이전에 타이포그래퍼가 먼저 이와 같은 한계들에 직면하게 된다는 것을 기억하고 있어야 한다.

문단 안에서 텍스트를 정렬할 때, 좌측정렬, 우측정렬, 가운데 정렬과 양쪽정렬을 사용할 수 있다.

양쪽정렬은 전체 문단의 좌, 우측의 수직선을 기준으로 정렬하는 것으로 정렬이 끝이 깔끔하지 정렬되지 못한 문단 형태에 비하여 깔끔해 보이며 잡지나 책을 편집할 때 많이 사용하는 방법이다.

그러나 웹 상에서는 긴 단어를 잘라서 하이픈으로 연결한 후 각 줄에 배치하여 더욱 자연스럽게 만드는 기술이 부족하다.

한 줄 안에 텍스트를 가득 차게 하기 위하여 모든 브라우저는 단어간의 공간을 넓히는 방법을 사용하며 이러한 방법은 단어간의 공란이 지나치게 넓어지는 “rivers of white space”라는 문제를 발생시키며 이와 같은 현상은 줄의 길이가 너무 짧고 그림2와 같이 이를 적절하게 수정하기 위한 공간이 부족한 경우에 생겨난다.

스크린 샷에서 볼 수 있는 바와 같이 자연스러운 지점에서 긴 단어를 나누어주는 하이픈이 없는 경우에는 일반적이지 않은 단어의 길이로 인하여 문단의 공백이 생겨난다.

이와 같은 문제점을 피하기 위하여 웹 상에서 대부분의 경우 좌측 정렬을 한다.

커닝은 사용되고 있는 서체가 정해진 철자 간격을 가진 것이 아닌 (Courier의 경우 각 철자간의 간격이 항상 동일하다.) 비례하는 서체인 경우 특정한 철자의 쌍 사이에서 발생하는 간격을 올바르게 잡아주는 역할을 한다. (Times New Roman는 철자와 철자 사이의 간격들이 각각 다르다.) 커닝은 철자간의 간격을 타이트하게 보여주어 자연스럽게 정렬되도록 하며 W다음에 A가 따라오는 것처럼 텍스트를 좀 더 프로페셔널해 보이도록 한다. 가장 프로페셔널한 폰트는 타입 렌더러에 철자간의 공란에 대한 정보를 제공하기 위한 커닝 지시를 포함하고 있는 폰트이다. 그림 3은 커닝이 다르게 적용된 것을 보여준다.

위의 스크린 샷 에서 볼 수 있는 것과 같이 첫 번째 단어의 경우에는 커닝을 적용시키지 않았다. 두 번째 단어는 W와 A사이의 간격이 조금 줄어 들었고, 반면에 A와 S의 간격은 약간 떨어졌다. 웹 상에서 이정도 정확도의 커닝은 불가능하다.

이와 최대한 비슷한 방법으로는 실제 프린트에서 문자가 무엇이던지 간에 카피 상에서 문자 간의 공간을 적용시키는 것과 같은 트래킹 방법을 사용할 수 있으며 이런 방법으로 당신은 W와 A간의 간격을 줄일 수 있지만 이는 다른 모든 철자에게 영향을 주기도 하게 될 것이다. 웹 상에서 트래킹은 철자 간격을 위한 더 나은 방법이며 CSS를 통해 제어할 수 있고 그림 4는 이런 내용을 보여 준다.

위의 스크린샷 상에서 각 스펠 간의 간격이 동일하게 넓어졌다. 이로 인하여 A와 S의 간격은 적절해진 반면에 W와 A는 너무 멀어졌다.

CSS를 이용한 철자간의 간격조절을 효과적으로 사용하는 것은 전체에 간격을 주거나 혹은 전체 다 주지 말아야 하기 때문에 어려우며 그렇기 때문에 세심하게 사용되는 것이 좋다.

실제 프린트 디자인에 관한 이야기들은 마음속에 깊이 담아 두어야 할 것이 많으며 웹 상의 디자인은 프린트 디자인과는 다르다는 것을 꼭 기억해야 한다.

실제로 프린트 디자이너는 웹 디자이너가 그러는 것처럼 글을 보는 사람이 리사이징을 하거나 원하는 폰트가 없다고 투덜거리거나 알리아싱이 되지 않을 경우에 대하서 고민하지 않아도 되며 변경하기 어려운 텍스트의 사이즈를 고정하거나 정해진 폭이나 높이의 공간에 텍스트를 넣거나 이미지를 동반한 텍스트 덩어리를 대체하는 등 사용자의 관점에서 필요한 특정 디자인이 요구되거나 시도해야 하는 경우도 있다.

그러나 조작의 부재가 문제가 될 필요는 없으며 당신은 당신의 사이트의 컨텐츠가 다양한 환경에서 다양한 단말기를 이용한 사용자들로부터 읽어질 것이라는 점에 대한 아이디어를 얻어야 한다. 당신은 이와 같은 다양한 사용자들이 사이트에 접근하지 못하거나 접근하기 어려워하게 만들어서는 안되며 가능한 사람들이 쉽게 접근하여 콘텐츠를 볼 수 있도록 해야 한다. 사람들은 집밖의 원격의 상태에서 모바일 기기를 이용하여 사이트에 접근하고 싶어할 수도 있으며 컴퓨터 화면 대신 출력을 해서 들고 다니며 읽고 싶어할 수도 있으며 시각장애가 있거나 폰트사이트를 크게 해서 보고 싶을 수도 있다.

이것이 당신이 웹 상에서 텍스트 스타일을 만들 때 어떻게 브라우징이 되는 기기의 종류를 불문하고 당신이 만든 내용들이 더욱 적절하게 보여질 수 있도록 가이드를 제공하는 것이 중요한 이유이다.

단말기는 단순히 기기이기 때문에 당신이 보여주려는 모든 것을 무시하기 쉽상이며, 여기까지는 좋지만 문제는 결과적으로 이러한 점들이 당신의 모든 청중들에게 디자인을 보여주려고 노력하지 않는다는 것과 동일하다는 것이다.

웹 상의 타이포그래피는 CSS에 의하여 전체적으로 콘트롤 되며, CSS를 이용하여 당신은 단지 사이즈, 색상, 서체 뿐만 아니라 줄 간격이나 자간, 대문자의 레벨(모든 철자의 대문자, 첫 자만 대문자, 대문자 사용 안 함) 그리고 어떻게 당신이 쓰는 텍스트의 첫 철자 또는 첫 줄이 정해지는 지 까지 컨트롤 할 수 있다.

텍스트가 담긴 문단을 스타일링함에 따라 당신은 텍스트와 줄의 길이를 올바르게 조정할 수 있다. 이 뿐만 아니라 한 문단 위치의 스타일 규칙을 만들 수 있으며 이런 당신의 스타일 시트의 규칙을 당신이 작성하는 다른 텍스트에 적용하는 것이 가능하며 다른 웹사이트에 적용하는 것 또한 가능하다. (또는 특정 페이지상의 영역이나 문단에 특화된 스타일시트를 만들 수도 있다.)

더욱이, 만약 스타일 시트 상에서 웹 사이트의 텍스트 크기를 크게 해야 거나 바디 폰트를 바꾸어야 할 필요를 느낀 적이 있다면, 단지 스타일 시트 상에서 값만을 바꾸면 된다.

여기 웹 상의 타이포그래피를 위한 빠른 팁이 몇 가지 있다.

선호하는 폰트를 고를 때 대체할 수 있는 선택을 포함하는 연습을 하면 좋다.

즉 “Georgia”라는 폰트를 하나만 선택하기 보다는 “Georgia, Cambria, “Times New Roman”, Times, serif”와 같이 대안을 설정해 주는 것이다.

이렇게 설정을 하게 되면 브라우저는 처음 Georgia로 명명된 폰트를 찾게 되며 만약에 해당 폰트가 해당 컴퓨터에 설치되어있지 않은 경우에는 Cambria로 이를 대신하게 되며 그것도 없으면 Times New Roman으로 그리고 그것도 없으면 Time으로 변경 적용하다 결국 마지막 서체인 serif로 할당되게 된다.

또한 어떤 서체는 헤딩에 적합하고, 어떤 서체는 본문에 적합하다. 이와 같은 서체의 적합성은 직접 한 번 적용해보고 어떻게 나타나는지 직접 보는 것이 좋으나 일반적으로 Arial, Impact나 Helvetica와 같은 sans-serif 서체들이 헤딩에 더 잘 맞으며, 반면 Georgia나 Times New Roman과 같은 serif 서체들의 경우에는 본문에 더 적합하다.

하지만 이와 같은 규칙은 많은 분야에서 맞지 않는 경우가 있었다. 특별한 폰트 즉 코드나 타이프라이터 텍스트를 위한 Courier New서체나 초크보드나 어린이 글씨체를 보여주기 위한 Comic Sans의 경우 세심하게 적용되어야 한다.

가독성을 고려하여 한 줄에 들어가는 길이는 공란을 포함하여 평균적으로 40~60개 정도의 철자여야 하며 이와 같은 기준은 해당 글을 읽는 사람이 누구인가에 따라서 유동적이다. (아이들은 줄의 길이가 상대적으로 짧은 것을 선호하며, 성인의 경우에는 긴 것을 선호한다.)

이상적인 라인의 길이는 그림5와 같다.

스크린 샷의 경우 한 줄에 60개의 철자가 들어있다.

이보다 많은 철자를 넣는 경우에는 사용자가 텍스트를 따라 가기 위하여 눈을 돌리거나 심지어는 머리를 돌려야 할 경우도 있으며 이는 글을 읽기 위한 안구의 운동을 증가 시킨다.

줄 간격은 각 줄 사이의 수직적 공간에 대한 것으로, 줄 간격을 브라우저의 기본값 이상으로 약간 높여줌으로 인해 가독성을 높일 수 있다.(아래 첨자나 윗 첨자를 위해 더 많은 공간을 확보하는 경우도 있다.) 그림6에 나온 두 개의 문단의 차이를 볼 수 있다.

스크린 샷의 첫 번째 문단은 기본 줄 간격을 보여주며 다소 갑갑해 보인다.

두번째 단락은 줄 간격을 넓힌 경우이며 문단이 조금 더 넉넉해 보이며 읽기도 조금 더 편하다.

너무 넓은 줄 간격은 글자를 다시 읽기 어렵게 만들 수도 있기 때문에 조심해야 한다.

그림 7에서 약 3~4줄에 걸쳐 문단의 첫 번째 단어가 위치하는 것 같은 drop cap은 p:first-letter { }와 같은 문단내의 다른 여타의 스타일 요소와는 별도로 하나의 철자의 스타일을 첫 철자의 가상요소를 타게팅하여 다른 요소의 스타일과는 달리 하나의 철자에 스타일을 줄 수 있는 방법이다.

종종 명백히 큰 형태의 서체이기는 하지만 큰 서체 가운데서 다소 작은 크기인 대문자 단어인 작은 대문자를 이용한 폰트가 나타나기도 한다. 예를 들어, 대문자가 약자를 위해 사용되지만 많은 주의를 끌 필요가 없는 경우에 대문자를 써야 한다면 이 방법은 유용하다.

비록 사용자가 사용하는 컴퓨터 시스템이 특정 서체에 대한 작은 대문자를 가지고 있지 않는 경우가 있지만 브라우저가 기존의 일반적인 대문자의 버전으로 이를 정상적으로 보여주거나, 일반적인 대문자의 형태에서 70% 정도의 크기로 줄인 서체로 보여주기 때문에 문제 될 것은 없다.

그림 8은 작은 대문자가 실제로 사용되는 것을 보여준다.

-10em, -10pt, 10px이나 -10%와 같은 음의 값을 포함하는 text-indent CSS 속성을 사용하는 것은 문장이 시작하는 가장 첫 줄의 좌측에 따옴표와 같은 부호를 넣는 것을 허용할 수 있으며 동시에 그림 9와 같이 텍스트의 좌측정렬을 유지시켜줄 수 있다.

따옴표가 있는 인용문 그리고 en dash, em dashes와 같은 가능한 서체에 관한 HTML 속성의 다양한 방식을 통하여 더욱 훌륭하고 멋진 텍스트를 만들어 낼 수 있다.

많은 블로깅과 워드 소프트웨어들은 일반적인 직접 인용을 따옴표를 이용한 서체적으로 올바른 형태로 바꾸어주거나 Dash의 스트링 값을 en dash와 em dashes로 바꾸어준다.

그림 10은 서체적으로 올바른 구두법의 예를 보여준다.

현명한 구두법을 이용하여 당신의 카피를 꾸미기 시작하면 당신의 텍스트는 더욱 고급스럽고 프로페셔널해 보이며 온라인상의 문서라기 보다는 책 혹은 잡지에 나오는 문구처럼 보이게 된다. 이와 같은 구두법의 활용은 알리아싱이 안되거나 오래된 스크린에서 화소를 나누어 줄 수 있으므로 이에 대한 주의사항과 함께 사용해야 한다.

특별한 HTML 부분으로 키보드를 이용해 입력하기 어려운 특수문자를 문서 안에 넣는 속성도 있다.

그림 11은 이런 몇 가지 속성을 보여준다:

이러한 것은 손으로 타이핑될 수 있지만 많은 컨텐츠 관리 소프트웨어가 쉽게 이것을 변환하거나 삽입하는 것이 가능하다.

Pull quote는 읽는 사람의 주의를 불러일으키기 위하여 크기가 큰 폰트나 다른 형태의 폰트를 이용하여 페이지 상의 다른 요소들과 조금 달라 보이게 하는 방법이다.

이와 같은 방식은 당신이 지금까지 읽어온 거의 모든 잡지에서 사용하는 방식이며 핵심이 되는 글자나 문단을 돋보이게 만들고 드러내는 무척 효과적인 방법으로 웹 상에서 간단한 마크업이나 스타일링을 이용하여 쉽게 적용할 수 있다.

단순히 특정 텍스트를 크게 하거나 다른 폰트를 쓰거나 다른 곳에 위치시키는 것만으로도 주변의 다른 텍스트로부터 돋보이게 만들 수 있다. 이외에도 선택된 텍스트를 드러내고 문장 안에서 전체 인용문을 자동으로 덧붙이는 자바스크립트를 포함한 훌륭한 솔루션이 있으며 이런 솔루션은 당신의 마크 업 상에서 같은 텍스트를 두 번 작성하는 수고를 덜어 준다.

이것이 타이포그래피이며, 웹 상의 타이포그래피이다. 아마도 Verdana, small, #333333 와 같은 타이포 때문에 제약 없이 글을 읽을 수 있을 것이며, 다른 많은 요소들로부터 텍스트를 눈에 띄게 부각시킬 수 있는 많은 팁과 트릭들도 존재한다.

대부분의 웹사이트에서 방문자들이 웹사이트를 방문하는 이유는 당신이 혹은 당신의 필자가 써 놓은 글을 읽기 위함이며, 그렇기 때문에 웹 사이트 상에서 사람들이 가능한 즐겁게 읽을 수 있도록 만들어 주어야 한다.

• 커닝과 트래킹의 차이는 무엇이며 웹 디자이너가 사용할 수 있는 방법은 무엇인가?
• “공란의 간격”을 어떻게 없앨 수 있는가?
• CSS를 통해 사용할 수 있는 대문자의 4가지 방식의 이름을 말하여라.
• 본문에 적합한 줄의 길이는 얼마이며 어떠한 요소가 영향을 미칠 수 있는가?
• serif font 서체와 sans-serif 서체의 차이는 무엇이며 그 각각의 예를 들어라.
• 내어쓰기와 일반 쓰기의 차이는 무엇인가?
• 당신의 문서에 카피라이트 심볼을 넣기를 원한다면, 당신은 HTML 속성을 사용한다. 인터넷을 둘러 보고 다른 HTML속성을 찾아보아라. 약 250개의 HTML속성을 찾을 수 있을 것이다.

무척이나 어둡고 깊은 Somerset 에서 Paul Haine가 살던 시절, 그는 아이러니하게도 이런 가장 어두운 지역의 정반대의 지역인 Kent에서 약 6년이 넘게 자신이 묶여있었다는 것을 알아 냈고 역사 강의가 있던 사이의 여분의 시간 동안 웹 표준에 대하여 공부하였다.

이후 옥스포드에서 보낸 2년의 시간 후에 그는 HTML Mastery이라는 책을 썼고, 런던으로 이사하여 The Guardian의 고객사의 개발자로 일하고 있다.

그의 개인 웹사이트인 http://joeblade.com는 없어졌고 폐쇄된 것으로 추정된다.