웹에서 잘 읽히는 타이포그래피 설계하기 – 웹디자인 강좌 2-3

웹에서 사용자는 이미지나 버튼을 누르기 전에 먼저 텍스트를 읽고 정보를 판단합니다. 따라서 좋은 타이포그래피는 예쁜 폰트를 고르는 것보다 무엇을 먼저 읽어야 하는지 위계를 만드는 것이 중요합니다.

이번 강의에서는 이를 다섯 가지로 정리합니다.

• 폰트 크기
• 행간과 자간
• 폰트 종류
• 폰트 두께
• 텍스트와 배경의 대비

타이포그래피의 시작은 위계 구조

페이지의 모든 정보가 같은 중요도를 가지는 것은 아닙니다.

제목과 본문, 카테고리, 설명, 숫자, 버튼 레이블에는 각각 다른 역할이 있습니다.

그런데 모든 텍스트의 크기와 두께, 색상을 비슷하게 만들면 사용자는 어디서부터 읽어야 할지 판단하기 어렵습니다.

이미지와 색상을 제거해도 제목 → 설명 → 보조 정보의 순서가 어느 정도 보이는 것이 좋은 타이포그래피입니다.

요소	역할
크기	정보의 중요도 구분
행간	긴 글의 읽기 흐름 조절
자간	글자 사이 밀도 조절
폰트	서비스의 분위기와 가독성 결정
두께·대비	강조와 보조 정보 구분

폰트 크기는 역할별로 규칙을 만든다

초보자가 자주 하는 실수는 페이지마다 15px, 16px, 17px처럼 조금씩 다른 크기를 감으로 사용하는 것입니다.

대신 역할을 먼저 정하는 편이 좋습니다.

예를 들어:

Headline → Title → Body → Label → Caption

처럼 텍스트의 역할을 나누고 각 단계에 사용할 크기를 정합니다.

웹에서는 H1~H6 같은 HTML 헤딩 구조도 있지만, 디자인 단계에서는 먼저 시각적인 위계가 자연스럽게 보이도록 만드는 것이 중요합니다.

폰트 스케일로 크기 체계 만들기

폰트 크기를 체계적으로 만들고 싶다면 Typography Scale을 사용할 수 있습니다.

강의에서는 본문을 16px = 1rem으로 두고, 약 1.25배씩 크기를 키우는 예시를 보여줍니다.

비율이 크면 제목 사이의 차이도 커집니다.

이런 방식은 큰 타이틀이 중요한 랜딩 페이지나 소개 페이지에서 활용하기 좋습니다.

반대로 웹 애플리케이션처럼 한 화면에 많은 정보가 들어간다면 스케일 차이를 조금 줄여 더 촘촘하게 구성할 수 있습니다.

중요한 것은 단계를 많이 만드는 것이 아니라 실제로 필요한 만큼만 만드는 것입니다.

모바일에서는 폰트도 함께 조정한다

데스크톱에서 보기 좋은 타이틀을 모바일에서도 그대로 사용하면 너무 많은 공간을 차지할 수 있습니다.

따라서 화면 크기에 따라 폰트 토큰을 다르게 설정할 수 있습니다.

강의에서는 예시로 기본값을 다음처럼 변경합니다.

• 데스크톱: 16px
• 태블릿: 15px
• 모바일: 14px

반드시 이 값을 사용해야 하는 것은 아닙니다.

rem 스케일을 사용하거나 디바이스마다 별도의 px 값을 사용해도 됩니다. 핵심은 화면이 달라져도 전체적인 위계가 유지되도록 규칙을 만드는 것입니다.

행간은 텍스트의 역할에 따라 다르게

행간은 줄과 줄 사이의 간격으로, 글을 읽는 호흡에 큰 영향을 줍니다.

모든 텍스트에 같은 행간을 사용할 필요는 없습니다.

강의에서는 크게 세 가지로 구분합니다.

제목

제목은 한두 줄인 경우가 많기 때문에 행간을 지나치게 넓게 만들 필요가 없습니다.

강의에서는 대략 120~150% 정도를 예시로 사용합니다.

긴 본문

블로그나 뉴스, 상세 설명처럼 여러 줄을 계속 읽어야 한다면 조금 더 넉넉한 행간이 필요합니다.

강의에서는 긴 본문에 180~200% 정도의 행간을 예시로 설명합니다.

행간이 너무 좁으면 한 줄을 읽은 뒤 다음 줄의 시작점을 찾기 어려워집니다.

버튼과 입력창

버튼이나 Input, Dropdown처럼 정확한 높이가 중요한 UI는 조금 다릅니다.

이런 요소는 행간 때문에 높이가 계속 달라지지 않도록 100%에 가깝게 사용하거나, 20px, 24px처럼 고정된 Line Height 규칙을 정할 수 있습니다.

자간은 꼭 조절할 필요는 없다

자간은 글자와 글자 사이의 간격입니다.

강의에서는 Pretendard처럼 웹에서 많이 사용하는 현대적인 폰트는 기본 자간 자체가 비교적 잘 조정되어 있기 때문에 굳이 자간을 손대지 않는 편이라고 설명합니다.

다른 폰트를 사용했을 때 글자가 지나치게 벌어져 보인다면 0 ~ -0.5px 사이에서 미세하게 조정하는 정도로 접근할 수 있습니다.

자간 역시 숫자보다 실제로 읽었을 때 자연스러운지가 중요합니다.

웹에서 사용할 수 있는 폰트인지 확인하기

폰트를 고를 때는 단순히 예쁜지만 보면 안 됩니다.

먼저 실제 웹사이트에서 사용할 수 있는 폰트인지 확인해야 합니다.

웹에서는 크게 시스템 폰트와 웹폰트를 생각할 수 있습니다.

시스템 폰트는 사용자의 기기에 이미 설치되어 있어 빠르고 안정적입니다.

웹폰트는 서버에서 폰트 파일을 불러오기 때문에 기기에 관계없이 비교적 일관된 디자인을 보여줄 수 있습니다.

웹폰트를 사용할 때는 특히 다음을 확인해야 합니다.

• 상업적 이용이 가능한가?
• 웹 임베딩 라이선스가 있는가?
• 한글·영문·숫자가 자연스럽게 어울리는가?

폰트 종류와 Weight를 너무 많이 불러오면 로딩에도 영향을 줄 수 있습니다.

강의에서는 하나의 폰트를 중심으로 사용하고, 필요한 경우 제목용과 본문용을 구분하는 정도를 추천합니다.

폰트 두께도 위계를 만든다

같은 크기의 글자라도 두께에 따라 강조 정도가 달라집니다.

제목은 Bold, 본문은 Regular, 보조 정보는 Regular 또는 조금 연한 색상처럼 구분할 수 있습니다.

다만 사용할 수 있는 Weight를 모두 불러올 필요는 없습니다.

강의에서는 보통 2~3개의 두께 정도를 사용하는 것을 권장합니다.

폰트 크기와 두께를 함께 조절하면 크기 하나만으로 구분할 때보다 더 자연스러운 위계를 만들 수 있습니다.

마지막은 텍스트와 배경의 대비

보조 정보를 연한 회색으로 표현하면 화면이 깔끔해 보일 수 있습니다.

하지만 너무 연하게 만들면 실제 사용자는 글을 읽기 어려울 수 있습니다.

이때 확인해야 하는 기준이 WCAG(Web Content Accessibility Guidelines)​의 명도 대비입니다.

강의에서 설명하는 AA 기준은 다음과 같습니다.

• 일반 텍스트: 4.5:1 이상
• 큰 텍스트: 3:1 이상

강의에서는 큰 텍스트를 약 24px 이상, 굵은 글씨는 약 18px 이상으로 설명합니다.

디자이너 화면에서는 잘 보이더라도 시력이 약한 사용자나 고령 사용자, 밝은 야외에서 화면을 보는 사용자에게는 읽기 어려울 수 있다는 점을 고려해야 합니다.

Figma에서 명도 대비 확인하기

강의에서는 Figma의 Stark 플러그인을 사용해 텍스트와 배경의 Contrast를 확인합니다.

텍스트와 배경색을 선택하면 대비 비율과 접근성 기준 통과 여부를 바로 확인할 수 있습니다.

따라서 보조 텍스트의 색상을 감으로 정하기보다 실제 대비 값을 확인하는 습관을 들이는 것이 좋습니다.

웹 타이포그래피에서 기억할 다섯 가지

잘 읽히는 타이포그래피를 만들 때는 복잡하게 생각할 필요가 없습니다.

크기로 중요도를 나누고,
행간과 자간으로 읽기 편하게 만들고,
실제로 웹에서 사용할 수 있는 폰트를 선택하고,
두께로 위계를 보완하고,
마지막으로 충분한 명도 대비가 있는지 확인합니다.

이 다섯 가지가 안정적으로 잡혀 있으면 색상이나 그래픽을 덜어내더라도 정보 구조가 자연스럽게 보이는 화면을 만들 수 있습니다.

자주 묻는 질문

웹 본문 폰트는 몇 px가 좋은가요?

강의에서는 16px을 기본값으로 사용하는 예시를 보여줍니다. 중요한 것은 하나의 값을 절대 기준으로 삼기보다 서비스에 맞는 기본값과 스케일을 정하는 것입니다.

본문의 행간은 어느 정도가 좋나요?

강의에서는 긴 본문의 경우 약 180~200% 정도를 예시로 설명합니다. 텍스트 폭과 글자 크기에 따라 실제 읽기 편한 값을 조절해야 합니다.

웹에서는 폰트를 몇 개 정도 사용하는 것이 좋나요?

강의에서는 주로 하나의 폰트를 사용하고, 필요한 경우 제목과 본문용을 구분하는 정도를 제안합니다. 폰트와 Weight가 많아질수록 로딩에도 영향을 줄 수 있습니다.

텍스트 명도 대비는 어느 정도가 필요한가요?

강의에서 다루는 WCAG AA 기준으로 일반 텍스트는 4.5:1 이상, 큰 텍스트는 3:1 이상의 대비를 기준으로 확인합니다.