크리에이티브밴드는 웹사이트를 디자인할 때 잘 읽히는 하나의 문단(paragraphy)을 만드는 것에서 시작합니다. 서체(Typeface)를 선택하고, 콘텐츠의 성격에 맞는 글줄 길이(Measure)를 정합니다. 그 안에서 적절한 글자 크기(Type Size)와 행간(Leading)을 찾고 자간(Tracking)을 확인합니다. 하나의 문단이 완성되면 그 기준을 바탕으로 나머지 제목과 여백, 콘텐츠 영역까지 확장합니다.

본문용 서체와 제목용 서체를 구분합니다

Pretendard, Noto Sans KR, Wanted Sans 처럼 국내 웹사이트에서 많이 사용되는 고딕 계열 한글 서체는 본문용으로 좋은 선택입니다. 작은 크기에서도 안정적이고 장문을 읽는 데 방해가 되지 않습니다. 하지만 한글만 보고 서체를 결정하지는 않습니다. 기업 웹사이트에는 회사명, 서비스명, 숫자, SEO·GEO·AEO 같은 영문이 계속 섞입니다. 한글은 만족스럽지만 영문의 인상이 아쉬운 경우에는 별도의 영문 서체를 조합하기도 합니다.

제목용 서체는 조금 다르게 접근합니다. 본문의 중립성은 장점이지만 제목까지 같은 서체를 크게 확대하는 방식은 많은 웹사이트를 비슷하게 보이게 만듭니다. 그래서 가능하면 제목용 서체(Display Typeface)를 별도로 탐색합니다. 화려한 서체가 필요한 것은 아닙니다. 웹사이트의 성격과 맞는 그러나 본문과는 조금 다른 목소리를 가진 서체를 찾는 과정이 필요합니다.

콘텐츠에 따라 글줄 길이를 결정합니다

서체를 선택한 다음에는 실제 콘텐츠를 넣어 글줄 길이를 결정합니다. 일반적인 콘텐츠에서는 약 680px을 출발점으로 삼을 수 있지만, 정보 밀도가 높은 전문 콘텐츠에서는 720~800px 정도까지 넓혀볼 수 있습니다.

중요한 것은 680px이나 800px이라는 숫자가 아닙니다. 같은 폭이라도 서체와 글자 크기에 따라 한 줄에 들어가는 글자의 수가 달라지기 때문입니다. 글줄 길이가 결정되면 글자 크기와 행간을 함께 조정합니다.

아래 Golden Ratio Typogrphy (GRT) Calculator 사이트에서는 서체 선택 후, 글자 크기와 글줄 길이를 입력하면 적절한 글줄 간격이 계산되어 나옵니다. 단, 한글 서체를 지원하지 않아서 계산된 값은 적절한 조정이 필요합니다.

하나의 문단에서 전체 타입 시스템으로 확장합니다

저는 주로 14px, 16px, 18px을 기준 크기로 삼고 1.5배의 비율로 글자 크기를 확장합니다. 1.5는 음악에서 완전5도(Perfect Fifth)에 해당하는 비율이지만 처음부터 음악적 의미를 의도한 것은 아닙니다. 여러 프로젝트에서 필요한 크기를 반복해서 선택하다 보니 자연스럽게 정착한 값입니다. 세 개의 기준 크기를 함께 사용하면 Perfect Fifth의 강한 대비를 유지하면서도 실무에 필요한 중간 크기를 충분히 확보할 수 있습니다.

아래 Modular Scale 사이트에서는 기준 글자 사이즈를 지정하고, 원하는 비율을 선택하면 증감된 글자 크기를 계산해줍니다. 적절한 비율을 찾는데 도움이 됩니다.