[웹 퍼블리싱 28] CSS - 타이포그래피

웹의 대부분은 글자다. 화려한 이미지와 애니메이션에 마음을 빼앗기던 시절에도, 정작 사용자가 사이트에서 가장 오래 마주하는 건 텍스트라는 걸 나는 뒤늦게 깨달았다. 글자가 읽기 편하면 사이트 전체가 편안하고, 글자가 답답하면 아무리 예뻐도 오래 머물기 어렵다. 타이포그래피는 그래서 디자인의 뼈대다.

이번 편은 글자를 다루는 타이포그래피를 살펴본다. 글꼴을 지정하고 폴백을 두는 법, 줄 높이와 자간을 조절하는 법, 정렬과 장식, 그리고 최신 표준인 줄바꿈 균형 기능과 말줄임 처리까지 다룬다. 읽기 편한 텍스트를 만드는 실전 감각을 여기서 익힌다.

1. 글꼴을 지정하고 폴백을 두기

글꼴은 글꼴 계열 속성으로 지정한다. 여기에 여러 글꼴을 순서대로 나열하면, 브라우저가 앞에서부터 사용 가능한 것을 찾아 쓴다. 첫 번째 글꼴이 없으면 다음으로 넘어가는 이 순서를 폴백 스택이라 한다. 나는 이 스택의 마지막에 항상 포괄적인 계열 이름을 둔다. 모든 글꼴이 실패해도 최소한의 대체를 보장하기 위해서다.

폴백 스택은 대개 웹폰트, 시스템 폰트, 포괄 계열의 순서로 짠다. 브랜드 웹폰트를 앞에 두고, 그것이 로딩되기 전이나 실패했을 때를 대비해 시스템 폰트를 뒤에 둔다. 나는 이 순서를 지키지 않았다가 웹폰트가 늦게 뜨는 동안 글꼴이 엉망으로 보이는 경험을 하고 나서, 폴백의 중요성을 실감했다.

시스템 폰트를 활용하는 전략도 있다. 사용자의 기기에 이미 깔린 기본 글꼴을 쓰면 로딩이 필요 없어 빠르고, 각 운영체제에서 가장 자연스러운 글꼴이 적용된다. 나는 성능이 중요한 화면에서는 웹폰트 대신 시스템 폰트 스택을 쓴다. 로딩 부담 없이 각 기기에 최적화된 글자를 얻는 실용적인 선택이다.

한글은 글꼴 선택이 더 까다롭다. 영문 글꼴만 지정하면 한글은 시스템 기본 글꼴로 떨어지므로, 한글을 잘 표현하는 글꼴을 스택에 반드시 포함해야 한다. 나는 데스크톱과 모바일에서 잘 보이는 한글 글꼴을 각각 확인해 스택을 짠다. 영문 기준으로만 글꼴을 정하면 한글이 어색해지는 함정에 빠진다.

글자 크기는 읽기 편함의 기본이다. 본문은 너무 작으면 눈이 피로하고 너무 크면 한눈에 들어오는 글이 줄어든다. 나는 본문 크기를 편안한 기준값으로 두고, 제목과 보조 텍스트를 그에 대한 비율로 정한다. 크기들 사이에 일정한 비율을 두면 화면 전체에 리듬이 생긴다.

글꼴 굵기도 위계를 만드는 도구다. 제목은 굵게, 본문은 보통으로 두어 시선의 우선순위를 만든다. 다만 굵기를 너무 여러 단계로 쓰면 오히려 산만해진다. 나는 굵기를 두세 단계로 절제하고, 강조가 필요한 곳에만 굵은 글자를 쓴다. 절제된 굵기 대비가 더 명료한 위계를 만든다.

2. 줄 높이와 자간

줄 높이는 읽기 편함에 가장 큰 영향을 주는 요소 중 하나다. 줄과 줄 사이가 너무 좁으면 답답하고, 너무 넓으면 글이 흩어져 보인다. 적당한 줄 높이는 글의 밀도와 여유를 결정한다. 나는 본문의 줄 높이를 넉넉하게 두는데, 이것만으로도 긴 글의 가독성이 눈에 띄게 좋아진다.

줄 높이를 지정할 때는 단위 없는 숫자를 쓰는 것이 좋다. 단위 없는 값은 글자 크기에 대한 배율로 계산되어, 크기가 다른 요소에 상속되어도 각자에게 맞는 줄 높이가 적용된다. 나는 이걸 모르고 고정 단위로 줄 높이를 줬다가, 큰 제목에서 줄이 겹치는 문제를 겪었다. 배율로 주면 이런 문제가 없다.

자간은 글자 사이의 간격이다. 살짝 좁히면 촘촘하고 세련된 느낌이, 넓히면 시원하고 여유로운 느낌이 난다. 특히 큰 제목에서는 자간을 살짝 좁히면 인상이 또렷해진다. 나는 제목에 미세한 음수 자간을 주어 글자들이 하나의 덩어리처럼 보이게 다듬는다. 작은 조정이지만 완성도를 높인다.

한글은 영문과 자간의 감각이 다르다. 영문에 맞춘 자간을 한글에 그대로 쓰면 어색할 수 있다. 나는 한글 본문에는 자간을 거의 건드리지 않고 기본값을 존중하되, 제목에서만 미세하게 조절한다. 언어에 따라 자간의 적정선이 다르다는 점을 염두에 두면 실수를 줄인다.

단어 사이 간격을 조절하는 속성도 있지만 실무에서는 자주 쓰지 않는다. 대개 기본 간격이 적절하기 때문이다. 나는 특별한 디자인 의도가 있을 때만 이 속성을 손대고, 평소에는 줄 높이와 자간에 집중한다. 읽기 편함의 팔 할은 이 두 가지에서 결정된다.

줄 높이와 자간은 눈에 잘 띄지 않지만 사용자의 피로도를 좌우한다. 나는 새 프로젝트에서 본문 스타일을 잡을 때 이 두 값을 가장 정성 들여 조율한다. 색이나 글꼴보다 이 미세한 간격들이 실제 읽기 경험을 결정하기 때문이다. 좋은 타이포그래피는 이런 보이지 않는 디테일에서 나온다.

3. 정렬과 장식

텍스트 정렬은 왼쪽, 오른쪽, 가운데, 양쪽 맞춤이 있다. 대부분의 본문은 왼쪽 정렬이 가장 읽기 편하다. 가운데 정렬은 짧은 제목이나 인용에는 어울리지만 긴 본문에는 부적합하다. 줄의 시작점이 들쭉날쭉해 눈이 다음 줄을 찾기 어렵기 때문이다. 나는 긴 글은 예외 없이 왼쪽 정렬로 둔다.

양쪽 맞춤은 줄의 양 끝을 가지런히 맞춘다. 인쇄물에서는 흔하지만 웹에서는 조심해야 한다. 단어 사이 간격이 강제로 벌어져 강물처럼 흰 공간이 흐르는 현상이 생길 수 있기 때문이다. 나는 웹 본문에 양쪽 맞춤을 거의 쓰지 않고, 쓰더라도 줄바꿈 처리를 함께 신경 쓴다.

글자 장식으로는 밑줄, 취소선, 윗줄이 있다. 밑줄은 전통적으로 링크를 뜻하므로, 링크가 아닌 텍스트에 밑줄을 그으면 사용자가 혼란스러워한다. 나는 밑줄을 링크에만 쓰고, 강조는 굵기나 색으로 표현한다. 취소선은 지워진 내용이나 할인 전 가격 같은 곳에 의미를 담아 쓴다.

대소문자 변환 속성으로 텍스트를 전부 대문자나 소문자로 표시할 수도 있다. 이건 원본 내용을 바꾸지 않고 표시만 바꾸는 것이라, 화면 낭독기는 원래 텍스트를 읽는다. 나는 버튼이나 라벨을 전부 대문자로 보이게 할 때 이 속성을 쓴다. 마크업의 내용은 자연스럽게 두고 표시만 조절하는 것이다.

글자 색과 대비도 타이포그래피의 일부다. 아무리 글꼴과 간격이 좋아도 배경과 대비가 약하면 읽기 힘들다. 나는 본문 색과 배경 색의 대비를 충분히 확보해, 밝은 환경에서도 흐린 눈에도 읽히게 한다. 대비는 미관과 접근성이 만나는 지점이라 소홀히 할 수 없다.

장식은 절제할수록 좋다. 밑줄, 색, 굵기, 크기를 한 텍스트에 다 쓰면 오히려 무엇이 중요한지 알 수 없게 된다. 나는 강조 수단을 하나나 둘로 제한하고, 위계가 필요한 곳에만 쓴다. 절제된 장식이 오히려 강조를 강조답게 만든다. 덜어내는 것이 타이포그래피의 미덕이다.

4. 최신 줄바꿈과 말줄임

비교적 최근에 텍스트 레이아웃을 개선하는 기능들이 표준에 들어왔다. 그중 하나는 줄바꿈을 균형 있게 맞추는 기능이다. 제목이 두 줄로 넘어갈 때, 마지막 줄에 단어 하나만 덜렁 남는 어색한 모양을 방지하고 줄들의 길이를 고르게 맞춘다. 나는 제목에 이 기능을 걸어 줄바꿈을 깔끔하게 다듬는다.

본문을 위한 줄바꿈 개선 기능도 있다. 이 기능은 문단 끝에 짧은 단어 하나만 남는 고아 단어를 방지한다. 긴 본문에서 마지막 줄이 외롭게 한 단어로 끝나는 걸 막아 인상을 정돈한다. 나는 긴 글 본문에 이 기능을 적용해 문단의 마무리를 매끄럽게 만든다. 미세하지만 완성도를 높이는 손질이다.

이 줄바꿈 기능들은 최신 표준이라 아직 모든 환경에서 완벽히 지원되지는 않을 수 있다. 하지만 지원되지 않아도 그냥 기본 줄바꿈으로 표시될 뿐 문제가 생기지는 않는다. 나는 이런 점진적 향상 성격의 기능은 부담 없이 적용한다. 지원되면 더 예쁘고, 안 되면 평범할 뿐이다.

말줄임 처리는 넘치는 텍스트를 점 세 개로 줄이는 기법이다. 한 줄 말줄임은 넘침을 숨기고 줄바꿈을 막은 뒤 말줄임 속성을 더하는 조합으로 만든다. 제목이나 목록 항목이 너무 길 때 이 처리로 깔끔하게 자른다. 나는 카드 제목이 한 줄을 넘지 않게 할 때 이 조합을 쓴다.

여러 줄 말줄임도 가능하다. 몇 줄까지 보이고 그 이후를 말줄임할지 지정하는 방식이다. 나는 글 목록의 미리보기 텍스트를 세 줄로 제한하고 그 아래를 말줄임할 때 이 방식을 쓴다. 카드마다 텍스트 길이가 달라도 보이는 줄 수가 통일되어 목록이 정돈된다. 실무에서 아주 요긴한 기법이다.

말줄임은 편리하지만 정보를 감춘다는 점을 잊지 말아야 한다. 중요한 내용이 잘려 사용자가 못 볼 수 있으므로, 잘린 전체 내용에 접근할 방법을 함께 두는 것이 좋다. 나는 말줄임된 제목에 전체 내용을 담은 보조 설명을 달거나, 클릭하면 전체를 볼 수 있게 한다. 감추되 닿을 수 있게 하는 배려다.

5. 읽기 편한 텍스트의 실전 감각

내가 본문 타이포그래피에서 가장 중시하는 것은 한 줄의 길이다. 한 줄이 너무 길면 눈이 다음 줄의 시작을 찾기 어렵고, 너무 짧으면 시선이 자주 꺾인다. 그래서 나는 본문 영역의 최대 폭을 글자 수 기준으로 제한한다. 적당한 글자 수 안에서 줄이 바뀌게 하면 읽기가 한결 편해진다.

본문 폭을 글자 기준 단위로 제한하는 방법이 있다. 이 단위는 특정 글자의 폭을 기준으로 하므로, 한 줄에 들어갈 글자 수를 직접 겨냥할 수 있다. 나는 본문 영역에 이 단위로 최대 폭을 걸고 가운데 정렬한다. 그러면 화면이 아무리 넓어도 본문은 읽기 좋은 폭을 유지한다.

제목과 본문의 위계는 크기와 굵기, 간격으로 만든다. 제목은 크고 굵게, 위아래 여백을 넉넉히 두어 구획을 나눈다. 본문은 차분한 크기와 넉넉한 줄 높이로 편안하게 둔다. 이 위계가 명확하면 사용자가 글의 구조를 한눈에 파악한다. 나는 크기 단계를 미리 정해두고 일관되게 적용한다.

글꼴 로딩도 읽기 경험의 일부다. 웹폰트가 늦게 뜨면 글자가 보이지 않거나 갑자기 바뀌어 화면이 출렁인다. 나는 폰트 로딩 동안 대체 글꼴을 보여주는 설정을 두어, 글이 최대한 빨리 읽히게 한다. 예쁜 글꼴을 기다리며 빈 화면을 보여주기보다, 먼저 읽히게 하는 편이 낫다.

모바일에서는 타이포그래피를 다시 점검해야 한다. 좁은 화면에서는 글자 크기와 줄 높이의 감각이 달라지고, 한 줄에 들어가는 글자 수도 줄어든다. 나는 모바일에서 본문이 너무 작지 않은지, 줄 높이가 답답하지 않은지 실제 기기로 확인한다. 화면 크기에 따라 읽기 경험이 크게 달라지기 때문이다.

정리하면 타이포그래피는 글꼴과 폴백, 줄 높이와 자간, 정렬과 장식, 그리고 최신 줄바꿈과 말줄임까지 아우르는 읽기 편함의 기술이다. 한 줄의 길이와 위계, 로딩까지 챙기면 텍스트가 편안해진다. 웹의 대부분이 글자인 만큼 이 감각은 값지다. 다음 편에서는 이 모든 크기의 기준이 되는 단위를 다룬다.