폰트 가독성 높이는 CSS 세팅 5가지(가독성, line-height 완벽 세팅, letter-spacing 완벽 세팅,

 

IT · 웹 디자인

가독성 높이는 폰트 설정 본문 가독성을 극대화하는 line-height와 letter-spacing

폰트 가독성 높이는 CSS 세팅 5가지 – line-height와 letter-spacing, 이것만 알면 끝

 

"line-height: 1.8 이상, letter-spacing: -0.01em" — 이 두 줄이면 블로그 본문 가독성이 눈에 띄게 달라진다. 실제로 Google UX 연구에서도 줄 간격이 좁으면 독자가 10초 안에 이탈하는 비율이 크게 오른다고 밝혔다. 폰트 크기만 키운다고 해결되는 게 아니다. 이 글에서는 "CSS 가독성"을 결정하는 핵심 5가지 설정을 코드와 함께 정리한다.

📋 목차

1. 가독성이 왜 이렇게 중요한가 – 독자는 불편하면 바로 떠난다
2. line-height 완벽 세팅 – 줄 간격이 숨통을 틔운다
3. letter-spacing 완벽 세팅 – 자간은 좁혀야 한국어가 산다
4. 폰트 크기와 단위 – px 말고 rem·clamp를 써야 하는 이유
5. word-break와 줄바꿈 – 한국어 블로그의 숨겨진 지뢰
6. 실전 조합 코드 – 복사해서 바로 쓰는 CSS 세트
7. 정리

1. 가독성이 왜 이렇게 중요한가 – 독자는 불편하면 바로 떠난다

블로그를 운영하면서 가장 많이 놓치는 부분이 바로 "폰트 가독성"이다. 공들여 쓴 글인데 반응이 없다면, 글의 문제가 아니라 화면에서 읽히는 방식의 문제일 가능성이 크다.

화면에서 글을 읽는 건 종이와 다르다. 모니터는 빛을 내뿜고, 눈은 계속 초점을 조정한다. 줄 간격이 좁으면 눈이 다음 줄을 찾는 데 에너지를 쓴다. 자간이 너무 넓으면 단어가 분절되어 뇌가 의미를 이어붙이는 데 힘든다. 쉽게 말하면, 글자가 독자를 피곤하게 만드는 셈이다.

SEO 관점에서도 마찬가지다. Google은 사용자가 페이지에 머무는 시간과 스크롤 깊이를 주요 신호로 본다. 읽기 어려운 글은 이탈률이 높아지고, 검색 순위는 자연스럽게 떨어진다. "CSS 가독성" 세팅은 그냥 취향이 아니라 검색 노출과 직결된 실질적인 기술이다.

 

💡 실제 데이터

Nielsen Norman Group 연구에 따르면, 웹 사용자는 글의 20~28%만 읽는다. 줄 간격과 자간을 최적화하면 읽는 비율이 유의미하게 높아진다.

2. line-height 완벽 세팅 – 줄 간격이 숨통을 틔운다

"line-height"는 줄 높이, 즉 줄과 줄 사이의 공간을 결정한다. 단위 없이 숫자로만 쓰는 게 정석이다. line-height: 1.8이라면 글자 크기의 1.8배 높이를 한 줄이 차지한다는 뜻이다.

🔹 한국어 본문에 맞는 값은?

영어는 1.5~1.6이면 충분하지만, 한국어는 자음·모음이 위아래로 겹치는 구조라 1.7~1.9가 적절하다. 개인적으로는 1.8 이상을 기본으로 쓴다. 본문이 답답하지 않고 숨이 트인다는 느낌이 명확하게 차이 난다.

 

❌ Bad — line-height: 1.2

이 문장은 줄 간격이 너무 좁습니다. 읽다 보면 다음 줄이 어딘지 헷갈리고 눈이 쉽게 피로해집니다. 긴 글이라면 더 심하게 느껴집니다.

✅ Good — line-height: 1.9

이 문장은 줄 간격이 적절합니다. 읽는 흐름이 자연스럽고 눈이 다음 줄을 찾는 데 힘이 들지 않습니다. 긴 글에서도 피로감이 덜합니다.

 

CSS — line-height 권장 세팅

/* 본문 기본 */
body {
  line-height: 1.85;        /* 한국어 본문 최적값 */
}

/* 제목 계열 – 너무 넓으면 어색 */
h1, h2, h3 {
  line-height: 1.3;
}

/* 코드블록은 좀 더 여유 있게 */
pre, code {
  line-height: 1.7;
}

 

⚠️ 주의

line-height: 2.0 이상은 오히려 단락이 지나치게 분리되어 보인다. 1.85~1.95 사이에서 테스트해 보고 자신의 폰트에 맞는 값을 찾는 게 좋다.

3. letter-spacing 완벽 세팅 – 자간은 좁혀야 한국어가 산다

"letter-spacing"은 글자 사이 간격이다. 영어 디자인 레퍼런스를 보면 0이나 약간 넓히는 걸 추천하는 경우가 많다. 그런데 한국어는 정반대다. 오히려 살짝 좁히는 게 더 자연스럽고 깔끔하다.

 

🔹 왜 한국어는 자간을 좁혀야 할까?

한글은 자음·모음·받침이 하나의 글자 셀 안에 빡빡하게 들어있는 구조다. 그래서 기본 자간이 이미 영어보다 시각적으로 넓어 보인다. 여기에 letter-spacing을 양수로 주면 단어들이 뚝뚝 끊겨 보이고 어색해진다.

 

letter-spacing 값	느낌	한국어 적합성
0.1em 이상	글자가 띄엄띄엄, 읽기 불편	❌ 비추천
0 (기본)	무난하지만 약간 뭉쳐 보임	△ 보통
-0.01em	자연스럽고 깔끔함	✅ 추천
-0.03em	세련된 느낌, 제목에 적합	✅ 제목 전용
-0.05em 이하	글자가 뭉개져 판독성 저하	❌ 비추천

 

CSS — letter-spacing 권장 세팅

body {
  letter-spacing: -0.01em;   /* 본문: 살짝 좁게 */
}

h1, h2 {
  letter-spacing: -0.03em;   /* 제목: 좀 더 타이트하게 */
}

h3, h4 {
  letter-spacing: -0.02em;
}

 

4. 폰트 크기와 단위 – px 말고 rem·clamp를 써야 하는 이유

많은 블로그가 아직도 font-size: 14px를 쓴다. 이건 2010년대 얘기다. 요즘 고해상도 디스플레이에서 14px 본문은 너무 작고, 모바일에서는 더 심각하다.

 

🔹 rem을 써야 하는 이유

rem은 루트 요소(html)의 폰트 크기를 기준으로 한다. 사용자가 브라우저에서 글자 크기를 크게 설정해도 비율이 유지된다. 접근성과 반응형 모두 잡는 단위다.

🔹 clamp()로 반응형까지 한 방에

clamp(최솟값, 유동값, 최댓값) 형태로 쓰면 화면 너비에 따라 글자 크기가 자동으로 조정된다. 미디어 쿼리 없이도 모바일·태블릿·데스크탑 모두 대응된다.

 

CSS — 폰트 크기 권장 세팅

html {
  font-size: 16px;              /* rem 기준값 */
}

body {
  font-size: 1.0625rem;       /* 약 17px — 본문 최적 */
}

h1 {
  font-size: clamp(24px, 4vw, 38px);
}

h2 {
  font-size: clamp(20px, 3vw, 28px);
}

💡 실용 팁

모바일에서 본문이 잘 읽히는 최소 크기는 16px (1rem)이다. 14px 이하는 노안 있는 사용자뿐 아니라 일반 사용자도 불편하게 느낀다. 과감하게 키워라.

5. word-break와 줄바꿈 – 한국어 블로그의 숨겨진 지뢰

CSS를 제대로 설정해도 word-break 하나 빠지면 모바일에서 단어가 이상하게 잘린다. 한국어 블로그라면 반드시 챙겨야 하는 속성이다.

🔹 word-break: keep-all 이란?

word-break: keep-all은 한국어 단어(어절)를 가운데에서 자르지 않고, 띄어쓰기 단위로만 줄을 바꾼다. 이게 없으면 "가독성이" 같은 단어가 "가독" / "성이"로 쪼개져 버린다. 보기에도 나쁘고 읽기도 어렵다.

CSS — 한국어 줄바꿈 세팅

body, p, h1, h2, h3, li {
  word-break: keep-all;     /* 한국어 필수 */
  overflow-wrap: break-word;  /* URL 등 긴 영어 처리 */
}

overflow-wrap: break-word는 URL처럼 공백 없이 긴 영어 문자열이 있을 때 컨테이너를 벗어나지 않게 잡아준다. 두 속성을 함께 쓰면 한국어·영어 혼용 블로그에서도 줄바꿈이 깔끔하게 처리된다.

 

6. 실전 조합 코드 – 복사해서 바로 쓰는 CSS 세트

위에서 설명한 내용을 하나로 묶었다. 티스토리, 워드프레스, 개인 블로그 어디든 body에 붙이면 바로 적용된다.

 

CSS — 한국어 블로그 가독성 완성 세트

/* ── 기준값 ── */
html {
  font-size: 16px;
}

/* ── 본문 전체 ── */
body {
  font-family: 'Noto Sans KR', 'Apple SD Gothic Neo',
               'Malgun Gothic', sans-serif;
  font-size: 1.0625rem;          /* ~17px */
  line-height: 1.85;
  letter-spacing: -0.01em;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── 제목 ── */
h1 {
  font-size: clamp(24px, 4vw, 38px);
  line-height: 1.25;
  letter-spacing: -0.03em;
}
h2 {
  font-size: clamp(20px, 3vw, 28px);
  line-height: 1.3;
  letter-spacing: -0.03em;
}
h3 {
  font-size: clamp(17px, 2.5vw, 22px);
  line-height: 1.4;
  letter-spacing: -0.02em;
}

/* ── 단락 간격 ── */
p {
  margin-bottom: 1.3em;
}

/* ── 최대 너비 (가독성 한계선) ── */
.post-content {
  max-width: 720px;
  margin: 0 auto;
}

💡 max-width 팁

한 줄에 글자가 너무 많으면 읽기 힘들다. 본문 컨테이너 너비는 680~760px이 이상적이다. 한 줄에 35~40자 내외가 되도록 설정하는 게 포인트다.

---

✅ 핵심 정리 – 이것만 기억해라

• line-height 1.8 이상 — 한국어 본문은 1.85 전후가 황금값
• letter-spacing -0.01em — 본문은 살짝 좁게, 제목은 -0.03em까지
• font-size 최소 16px (1rem) — 14px는 이제 버려라
• word-break: keep-all — 한국어 블로그라면 필수
• max-width 720px 내외 — 한 줄이 너무 길면 가독성이 오히려 떨어진다

결국 "CSS 가독성"이라는 건 독자에 대한 배려다. 좋은 글도 읽기 불편하면 읽히지 않는다. 반대로 세팅 하나 바꿨을 뿐인데 체류 시간이 늘고, SEO 지표가 개선되는 경험을 하게 된다. 오늘 바로 본인 블로그에 위 CSS를 적용해보길 권한다.

 

📎 출처 및 참고 링크

• MDN Web Docs — line-height
• MDN Web Docs — letter-spacing
• Nielsen Norman Group — Legibility, Readability, and Comprehension
• web.dev — Font best practices (Google)
• Google Fonts — Noto Sans KR