타입 스케일(type scale)은 제품 속에서 균형 잡히고 조화로운 구성을 만들기 위해 다양한 텍스트 요소를 표현할 때 사용하는, 신중하게 선별된 글꼴 크기의 모음입니다. 자체 타입 스케일의 동일한 글꼴 크기를 일관되게 사용하면 디자인에 자연스럽게 통일성이 생기고, 위계와 우선순위가 뒤죽박죽인 제품을 만들 가능성을 크게 줄일 수 있습니다.
타입 스케일은 '타이포그래픽 스케일(typographic scale)'이라고도 불립니다.
제약이 일관성을 만든다
원리적으로 타입 스케일은 간격(spacing) 스케일이나 색상 팔레트와 같은 방식으로 작동합니다. 디자인 선택지가 제한적일수록 제품의 외관과 사용감 면에서 일관성을 유지하기가 훨씬 쉬워집니다. 그리고 일관성은 사용자와 신뢰 관계를 구축하는 데 핵심적인 요소입니다.
즉, 타입 스케일은 타이포그래퍼나 디자이너로서의 자신의 자유를 일부 제한하는 대신, 사용자에게 일관된 경험을 돌려주는 장치라고 할 수 있습니다.
사용자가 제품에 노출될 때 소화해야 하는 새로운 정보(모든 시각적 요소는 처리가 필요한 정보입니다)가 적을수록 혼란과 피로도 함께 줄어듭니다. 웹사이트를 방문하거나 제품을 살펴보는 사람들을 혼란스럽게 하거나 지치게 만드는 것만큼 피해야 할 일은 없습니다.
프로젝트에 맞는 타입 스케일 고르는 방법
블로그 글을 쓰든 와인 라벨을 디자인하든, 글꼴 크기는 물론 때로는 서로 다른 서체(폰트 패밀리)까지 포함해 여러 텍스트 요소를 다루게 됩니다.
설명을 단순화하기 위해 하나의 서체만 사용한다고 가정해 보겠습니다. 그렇다면 답해야 할 핵심 질문은 하나입니다. 바로 "프로젝트의 다양한 텍스트 요소를 최적으로 표현하려면 몇 가지 글꼴 크기가 필요한가?"입니다.
가장 흔히 사용되는 텍스트 요소 유형은 다음과 같습니다.
- 제목 및 헤딩(Title & Headings)
- 문단과 목록(본문 텍스트)
- 캡션(Captions)
- 부제목(Subtitles)
- 인용구/강조 인용(Blockquotes · Pull quotes)
글쓰기를 업으로 삼는다면 아마 이 모든 요소를 평소에 자주 사용하고 있을 것입니다.
일반적으로 위의 각 텍스트 요소 유형마다 하나의 글꼴 크기를 지정합니다. 단, 헤딩은 예외입니다. 전문 디자이너는 프로젝트의 성격에 따라 1단계부터 6단계까지 다양한 헤딩을 활용합니다.
대부분의 웹사이트 프로젝트에서는 최소 5가지 이상의 서로 다른 글꼴 크기를 타입 스케일에 포함하게 됩니다.
스케일 정하기
그렇다면 어떻게 스케일을 만들 수 있을까요? 각 텍스트 요소에 맞는 적절한 글꼴 크기를 찾고, 요소들이 서로 잘 어우러지도록 하려면 어떻게 해야 할까요? 타입 스케일을 만드는 방법은 크게 세 가지입니다.
- 기존 타입 스케일 템플릿 활용하기
- 눈대중 조정 + 시행착오
- 1번과 2번의 결합
두 번째 방법(눈대중 + 시행착오)을 제대로 활용하려면 상당한 경력을 가진 타이포그래퍼여야 합니다.
스스로 글꼴 크기를 정하는 것이 부담스럽다면, 이미 전문가들이 만들어 둔 타입 스케일을 활용하면 됩니다. 대표적인 예가 머티리얼 디자인(Material Design)의 타입 스케일입니다.
머티리얼 디자인의 타입 스케일은 검증된 견고한 체계입니다. 초보자에게는 감으로 결과를 추측하는 것보다 전문 디자이너가 제공한 템플릿을 적용하는 편이 항상 더 좋습니다. 다만 다른 디자이너의 타입 스케일을 가져올 때는 주의가 필요하며, 서체에 따라 요구되는 타입 스케일이 달라진다는 점을 반드시 인식해야 합니다.
타이포그래피에는 만능 해결책이 없습니다. 따라서 머티리얼 디자인이 제공하는 타입 스케일 같은 기존 스케일을 사용하기로 했다면 맹목적으로 적용해서는 안 됩니다. 머티리얼 디자인은 Roboto 서체를 사용하며, 그 서체에는 해당 타입 스케일이 실제로 매우 잘 어울립니다.
프로젝트에서 Roboto가 아닌 다른 폰트 패밀리를 사용한다면, 머티리얼 디자인의 템플릿을 출발점으로 삼는 것은 여전히 유효합니다. 다만 서체의 구조적 특성에 따라 몇 가지 값을 조정해야 의도한 대로 완벽하게 작동할 수 있습니다.
타입 스케일 생성기 활용하기
type-scale.com 같은 타입 스케일 생성기를 활용하는 방법도 있습니다. 이 훌륭한 사이트에서는 실제 음악 음계를 기반으로 한 다양한 수학적 비율(스케일) 중에서 선택할 수 있고, CSS 스타일시트를 자동으로 생성해 줍니다.
Google Fonts를 통해 수백 가지 폰트 패밀리를 미리보기로 테스트할 수 있으며, 8가지 타입 스케일 템플릿도 제공합니다. 나아가 자신만의 커스텀 스케일을 직접 만들 수도 있습니다(초보자에게는 권장하지 않습니다).
생성기의 사용 방법은 사이트에서 아래로 스크롤하면 안내 문서를 통해 확인할 수 있습니다.
100% 보장할 수는 없지만, 대부분의 경우 감으로 작업하는 것보다 type-scale.com의 검증된 타입 스케일을 적용하는 편이 훨씬 더 조화로운 결과를 만들어 냅니다.
그래서 앞서 소개한 방법 중 1번과 2번을 결합하는 것을 추천합니다. 머티리얼 디자인이나 type-scale.com의 스케일처럼 기존 템플릿을 출발점으로 삼고, 시행착오를 거치며 자신의 프로젝트에 맞게 다듬는 것입니다.
더 나은 타이포그래퍼로 성장하는 유일한 길은 실험과 경험이지만, 축적된 지식을 활용해 올바른 방향을 잡는 데 도움을 받는 것도 결코 나쁘지 않습니다.