웹 프로젝트에서 웹 타이포그래피 폰트 계층을 만드는 4단계 설정법

목차

• 웹 타이포그래피 계층의 기본 원리
• 폰트 계층을 만드는 4단계
• 역할별 권장 설정 비교
• 반응형 화면과 접근성 점검
• 흔한 실수와 해결 방법
• 적용 결과를 어떻게 확인할까?
• 자주 묻는 질문

웹 타이포그래피 계층의 기본 원리

폰트 계층은 콘텐츠의 중요도를 시각적 차이로 전달하는 체계입니다. 일반적으로 H1은 페이지의 핵심 주제, H2는 주요 구획, H3는 세부 항목, 본문은 설명, 캡션은 부가 정보를 담당합니다. HTML의 의미 구조와 시각적 표현을 함께 맞춰야 화면을 훑어보는 사용자와 보조 기술 사용자 모두에게 일관된 흐름을 제공할 수 있습니다.

계층을 만들 때 모든 속성을 크게 벌릴 필요는 없습니다. 제목은 크기와 무게를 함께 높이고, 본문과 캡션은 크기보다 색상이나 자간으로 구별하는 식이 자연스럽습니다. 속성 차이를 지나치게 많이 주면 한 페이지에 여러 디자인 체계가 섞인 것처럼 보이므로 기본 글꼴은 1개, 많아도 제목용과 본문용을 합쳐 2개 정도로 제한하는 편이 안정적입니다.

폰트 계층을 만드는 4단계

1단계: 콘텐츠 역할 정의

먼저 화면에 필요한 텍스트를 H1, H2, H3, 본문, 버튼, 캡션으로 분류합니다. H1은 페이지당 핵심 제목 1개를 기본으로 삼고, 장식 목적만으로 제목 태그의 순서를 건너뛰지 않습니다. 이 단계의 결과를 디자인 도구와 코드에서 동일한 이름의 텍스트 스타일로 등록하면 수정 범위도 줄어듭니다.

2단계: 본문 기준값 설정

본문을 먼저 정하면 나머지 비율을 계산하기 쉽습니다. 데스크톱 본문은 16px 내외, 줄 높이는 글자 크기의 1.5배인 24px 정도에서 시작하고, 한 줄 길이는 약 45–75자로 점검합니다. 한글은 획과 글자 면적이 커서 같은 크기의 영문보다 조밀하게 느껴질 수 있으므로 실제 문장으로 읽어 봐야 합니다.

3단계: 크기와 무게 확장

본문 16px을 기준으로 H3 20px, H2 28px, H1 40px처럼 위계별 간격을 설정합니다. 무게는 본문 400, 소제목 600, 핵심 제목 700 정도로 제한하면 차이가 분명하면서도 과도하게 무겁지 않습니다. 사용하려는 웹폰트가 해당 굵기를 실제로 제공하는지 확인해야 브라우저가 임의로 합성한 굵기를 피할 수 있습니다.

4단계: 색상과 간격 보정

크기와 무게가 정해지면 색상과 여백으로 관계를 다듬습니다. 핵심 제목과 본문에는 대비가 높은 색을, 캡션이나 메타 정보에는 한 단계 약한 색을 적용하되 너무 옅게 만들지 않습니다. 제목 아래 간격보다 새 섹션 위 간격을 더 크게 설정하면 어떤 설명이 어느 제목에 속하는지도 분명해집니다.

역할별 권장 설정 비교

다음 값은 절대 규칙이 아니라 일반적인 콘텐츠 페이지의 시작점입니다. 브랜드 글꼴의 실제 크기, 한글 비율, 화면 너비에 따라 조정하되 단계 간 차이는 일관되게 유지해야 합니다.

크기 비율만 기계적으로 적용하기보다 콘텐츠 밀도도 고려해야 합니다. 긴 문서에서는 제목 크기를 조금 줄이고 위아래 여백을 넓히는 방식이 효율적이며, 짧은 랜딩 페이지에서는 H1의 비중을 높일 수 있습니다. 웹 타이포그래피 토큰을 text-body, text-heading-2처럼 역할 중심으로 정의하면 화면마다 임의의 크기가 늘어나는 문제도 막을 수 있습니다.

반응형 화면과 접근성 점검

MDN의 반응형 디자인 안내에 따르면 유연한 레이아웃과 미디어 쿼리는 다양한 화면 크기에 대응하는 기본 요소입니다. 모바일에서는 H1을 32px 정도로 낮추되 본문을 지나치게 축소하지 말고, clamp()를 활용해 최소·선호·최대 크기를 연결할 수 있습니다. 360px 화면과 1440px 화면에서 모두 줄바꿈과 제목 비중을 확인하는 것이 좋습니다.

W3C의 WCAG 기준에 따르면 일반 텍스트는 배경과 최소 4.5:1, 큰 텍스트는 최소 3:1의 명암비가 요구됩니다. 색상만으로 계층을 표현하지 말고 크기, 무게, 간격을 함께 사용해야 합니다. 브라우저를 200%로 확대했을 때 문장이 잘리거나 겹치지 않는지, 링크와 버튼이 주변 문장과 명확히 구분되는지도 확인합니다.

흔한 실수와 해결 방법

가장 흔한 실수는 H1과 H2의 크기 차이가 거의 없거나, 반대로 H1만 지나치게 큰 경우입니다. 전자는 구조를 알아보기 어렵고 후자는 모바일에서 제목이 여러 줄로 갈라져 첫 화면을 과도하게 차지합니다. 두 단계가 비슷하다면 크기뿐 아니라 굵기와 위쪽 여백을 조정해 차이를 보완합니다.

또 다른 문제는 회색 본문을 너무 옅게 쓰거나 작은 글자에 얇은 굵기를 적용하는 것입니다. 특히 한글 본문은 복잡한 획 때문에 300 이하의 굵기가 작은 화면에서 흐릿하게 보일 수 있습니다. 장식적인 자간도 본문 전체에 적용하지 말고, 짧은 영문 레이블이나 일부 제목처럼 제한된 영역에서만 시험하는 편이 좋습니다.

적용 결과를 어떻게 확인할까?

먼저 색상을 제거한 흑백 화면에서도 H1, H2, 본문 순서가 구별되는지 확인합니다. 다음으로 3초 동안 화면을 훑어본 뒤 핵심 제목과 주요 섹션을 설명할 수 있는지 점검하고, 실제 한글 문단을 2분 이상 읽으며 줄 길이와 줄 간격의 피로도를 살핍니다. 개발자 도구에서는 각 텍스트가 약속한 토큰을 사용하는지도 확인합니다.

핵심은 역할을 먼저 정의하고 본문 기준값에서 출발해 크기·무게·색상·간격을 순서대로 조정하는 것입니다. 이 4단계를 따르면 웹 타이포그래피의 일관성과 유지보수성이 함께 좋아집니다. 프로젝트 화면에서 계층이 모호하거나 한글 웹폰트 적용 기준을 정하기 어렵다면 현재 스타일 목록과 대표 페이지를 기준으로 디자이너 또는 타이포그래피 전문가에게 진단을 문의해 보세요.

자주 묻는 질문

H1은 페이지마다 하나만 사용해야 하나요?

콘텐츠의 핵심 제목을 명확하게 전달하려면 하나를 기본 원칙으로 삼는 것이 이해와 관리에 유리합니다. 다만 문서 구조는 서비스 특성에 따라 달라질 수 있으므로 HTML 의미와 접근성 흐름을 함께 검토해야 합니다.

모바일에서는 제목 크기를 얼마나 줄여야 하나요?

고정 비율보다 화면 너비와 줄바꿈 결과를 기준으로 판단해야 합니다. 데스크톱 H1이 40px이라면 모바일에서는 30–32px부터 시험하고, 핵심 단어가 어색하게 분리되지 않는지 확인하세요.

제목과 본문에 서로 다른 폰트를 써도 되나요?

가능하지만 글꼴의 인상, 획 굵기, 숫자 형태가 조화를 이루는지 살펴야 합니다. 로딩 성능과 일관성을 고려하면 2개 이내로 제한하고 필요한 굵기만 불러오는 구성이 실용적입니다.

폰트 크기는 px과 rem 중 무엇이 좋은가요?

컴포넌트의 기준과 사용자 확대 설정을 고려하면 rem이 유연합니다. 기본값이 16px일 때 1rem은 16px, 2rem은 32px에 해당하며, 팀이 이해하기 쉽도록 디자인 값과 코드 토큰의 대응표를 관리하면 됩니다.

웹 타이포그래피를 완성한 뒤 무엇을 테스트해야 하나요?

360px·768px·1440px 같은 대표 너비, 200% 확대, 명암비, 웹폰트 로딩 전후의 레이아웃 변화를 확인하세요. 실제 제목과 긴 한글 본문을 넣어 테스트해야 임시 문구에서는 드러나지 않던 줄바꿈과 밀도 문제를 발견할 수 있습니다.