타이포그래피

같은 내용도 서체와 크기, 간격에 따라 읽히는 느낌이 달라집니다. 타이포그래피는 글자를 꾸미는 일과 함께, 내용을 정확하고 편하게 전달하는 일입니다.

숫자 몇 개를 외운다고 좋은 타이포그래피가 완성되는 것은 아닙니다. 서체의 특징과 매체, 읽는 사람을 함께 보면서 조절해야겠죠.

01. 서체의 종류와 사용 조건

본문용 서체

본문에서는 가독성과 판독성이 중요합니다. 고딕 계열과 명조 계열 모두 본문에 사용할 수 있으며, 특정 계열이 항상 더 잘 읽힌다고 단정하기는 어렵습니다. 실제 크기와 문장으로 비교해 보세요.

고딕 계열 예시

• Noto Sans KR
• 나눔스퀘어·나눔바른고딕
• Pretendard
• Spoqa Han Sans
• Apple SD Gothic Neo · Mac 기본 서체

명조 계열 예시

• Noto Serif KR
• 나눔명조
• 마루부리
• 제주명조·바른명조

표현용 서체

제목, 광고, 포스터처럼 주목성이 중요한 곳에서는 개성이 강한 서체를 사용할 수 있습니다. 다만, 제목에서 잘 보이는 서체가 긴 본문에서도 잘 읽히는 것은 아닙니다.

무료·유료보다 라이선스를 먼저 확인하세요.

무료라는 말만 보고 사용 범위를 판단하면 안 됩니다. 인쇄물 제작, 웹폰트 사용, 앱에 포함하는 것, 폰트 파일을 전달하는 것은 서로 다른 조건일 수 있습니다.

• 눈누: 한글 서체를 찾고 각 서체의 배포처·사용 조건을 확인할 수 있습니다.
• Fontshare·Google Fonts: 서체별 라이선스와 제공 범위를 확인하세요.
• DaFont: 개인용 무료와 상업용 사용 조건이 다를 수 있으므로 원저작자의 라이선스를 확인해야 합니다.

유료 서체 역시 구매했다는 이유만으로 모든 용도가 허용되는 것은 아닙니다. 프로젝트의 사용 매체와 편집·전달 방식에 맞는 조건을 확인하는 것이 좋습니다.

02. 매체별 글자 크기 단위

인쇄 · pt

인쇄용 pt는 1/72인치입니다. 이미지 해상도가 300PPI라면 1pt 길이에 약 4.17개의 이미지 픽셀이 대응하지만, 이것이 웹의 1pt와 같은 픽셀 값이라는 뜻은 아닙니다.

웹 · CSS px, em, rem

• CSS px: 웹 레이아웃의 기준 단위입니다. 실제 화면 픽셀 1개와 항상 같지는 않습니다. CSS에서는 1in=96px=72pt로 정의합니다.
• em: 사용하는 속성에 따라 기준이 달라집니다. font-size에 쓰면 부모의 글자 크기를, padding 같은 속성에 쓰면 해당 요소의 글자 크기를 기준으로 계산합니다.
• rem: 루트 요소인 html의 글자 크기를 기준으로 합니다. html이 16px이면 1rem은 16px이지만, 사용자 설정이나 CSS에 따라 기준은 달라질 수 있습니다.
• %: font-size와 line-height 등에 사용할 수 있습니다. 무엇을 기준으로 계산하는지는 속성마다 확인해야 합니다. 자간은 em이나 px로 시작하고 대상 브라우저의 지원 범위를 확인하면 좋습니다.

웹의 행간은 line-height: 1.5처럼 단위 없는 값으로 지정하면 해당 요소의 글자 크기에 맞춰 계산할 수 있습니다.

모바일 앱 · pt, dp, sp

iOS의 pt는 화면 구성용 논리 단위이며 CSS pt나 인쇄용 pt와 다릅니다. Android는 레이아웃에 dp, 글자 크기에 sp를 사용합니다. sp는 사용자의 글자 크기 설정도 반영합니다.

03. 크기와 두께

같은 크기 값이라도 서체에 따라 실제 글자가 보이는 크기는 다릅니다. 본문을 16px로 시작해 비교하는 것은 가능하지만, 이를 모든 웹·앱의 정답으로 보면 안 됩니다.

인쇄물은 실제 크기로 출력해 확인하고, 웹·앱은 기기에서 읽어보세요. 글자 수, 줄 길이, 배경과의 대비, 독자의 사용 환경을 함께 봐야 합니다.

짝수 크기만 써야 한다는 규칙은 없습니다. 홀수나 소수점 크기도 사용할 수 있습니다. 값 자체보다 해당 서체가 실제 환경에서 선명하고 편하게 읽히는지 확인하는 것이 중요합니다.

글자의 두께 · Font Weight

정적 서체에서는 400을 Regular, 700을 Bold로 사용하는 경우가 많습니다. CSS의 font-weight는 1~1000 범위를 표현할 수 있지만, 실제 사용할 수 있는 두께는 서체가 제공하는 파일이나 가변 폰트의 범위에 따라 달라집니다.

• 본문: Regular를 출발점으로 보고 실제 가독성에 따라 조절합니다.
• 제목·강조: Medium이나 Bold로 정보의 순서를 구분합니다.
• Thin: 작은 크기나 대비가 약한 화면에서는 읽기 어려울 수 있어 신중하게 사용합니다.

처음에는 본문·제목·강조처럼 두께의 역할을 몇 가지로 정리해 보세요. 저는 다양한 두께를 무작정 섞기보다 필요한 차이를 명확히 만드는 것이 좋다고 생각합니다.

04. 자간과 행간

자간 · Letter-spacing

자간은 서체와 언어에 따라 다르게 조절해야 합니다. 모든 본문에 0~5%를 적용하거나, 인쇄 도구의 -25와 CSS의 -0.5px를 같은 기준으로 비교하면 안 됩니다.

인쇄 도구의 트래킹 값은 도구의 단위를 확인하고, 웹에서는 normal 또는 0을 출발점으로 실제 문장을 보며 조절하세요. 예를 들어 -0.02em 같은 값은 조정 예시이지 모든 서체에 맞는 정답은 아닙니다.

행간 · Line-height

16px 글자에 line-height: 1.5를 주면 줄 높이는 24px입니다. 글줄이 길거나 본문이 많으면 조금 더 여유를 줄 수 있고, 짧은 제목은 다른 간격이 필요할 수 있습니다.

행간을 반드시 2배 이하로 제한하거나, 자간과 같은 비율로 늘려야 하는 규칙은 없습니다. 각각 조절한 뒤 문단 전체의 흐름을 확인하는 것이 좋습니다.

웹에서는 사용자가 글자와 간격을 확대해도 내용이 잘리거나 기능을 쓰지 못하는 일이 없어야 합니다. 고정 높이에 글을 억지로 넣는 방식은 피하는 것이 좋습니다.

05. 장평과 정렬

본문은 서체가 설계된 비율을 먼저 사용하는 것이 좋습니다. 공간이 부족하다고 글자를 임의로 눌러 넣으면 읽기 어려워질 수 있습니다.

폭이 좁은 서체나 폭 조절을 지원하는 가변 폰트를 검토하는 방법도 있습니다. 장평 95~97%만 허용된다거나 항상 90~105% 안에 있어야 한다는 공통 규칙은 없습니다.

식품 같은 제품의 표시사항은 제품 유형과 표시 항목에 맞는 최신 기준을 확인해야 합니다. 모든 정보를 ‘12pt 이상’으로 설명하거나, 규정을 맞추기 위해 장평을 줄이면 된다고 이해하면 안 됩니다.

• 왼쪽 정렬: 한글·영문 본문의 출발점으로 사용하기 좋습니다.
• 양쪽 정렬: 줄 길이와 언어, 줄바꿈 방식에 따라 단어 사이가 과하게 벌어질 수 있습니다. 영문이라고 항상 적합한 것은 아닙니다.
• 가운데 정렬: 짧은 제목이나 안내에 사용할 수 있지만 긴 본문은 신중하게 적용하세요.
• 오른쪽 정렬: 숫자·가격 등 정보의 성격에 따라 사용할 수 있습니다.

06. 글자 색상과 대비

인쇄의 검정

작은 검정 글자는 K 단독 사용을 출발점으로 삼으면 다색판의 어긋남 위험을 줄일 수 있습니다. 넓은 검정 면에 쓰는 리치 블랙과 구분하고, 종이·인쇄 방식에 맞는 값과 오버프린트 조건은 출력소와 확인하세요.

웹의 검정

#000000을 사용하면 안 된다는 규칙은 없습니다. 다크그레이를 선택할 수도 있지만, 중요한 것은 글자와 배경의 대비와 실제 읽기 편한 정도입니다.

WCAG 2.2의 AA 기준에서 일반 텍스트는 최소 4.5:1, 큰 텍스트는 최소 3:1의 대비가 필요합니다. 큰 텍스트는 18pt 이상이거나 14pt 이상인 굵은 글자에 해당합니다. 로고나 비활성 요소 등은 별도 예외가 있습니다.

보기 좋은 글자는 크기·두께·간격·색상을 따로 맞추는 것으로 끝나지 않습니다. 실제 내용으로 읽어보고, 사용 환경에서 확인하는 과정까지 필요합니다.

내용 확인에 참고한 자료

검토일: 2026-10-09

• MDN · CSS 길이 단위
• MDN · font-weight와 가변 폰트
• W3C · WCAG 2.2
• Adobe · 폰트 사용 조건
• 식약처 · 식품 등의 표시기준 고시