긴 문장, 답답한 줄 간격, 눈에 힘이 들어가는 대비… 작은 디테일이 글의 가독성을 결정합니다. 다행히 2025년의 HTML/CSS는 ‘수정 없이 더 읽히는 글’을 만드는 강력한 도구를 제공합니다.
이 글은 ‘글의 가독성을 높이는 HTML/CSS 활용법’을 실전 중심으로 정리합니다. 최신 브라우저가 지원하는 text-wrap, lh 단위, 컨테이너 쿼리, 다크 모드, 포커스 인디케이터 등 2024~2025년 업데이트를 반영했습니다.
본문에서는 왜(원리), 어떻게(구현), 무엇이 이득인지(실전 효과)를 예제 코드와 체크리스트로 보여드립니다. 마지막에는 바로 붙여 쓸 수 있는 스니펫과 자주 묻는 질문을 담았습니다.
가독성의 기본: ‘읽기 리듬’을 만드는 핵심 원리
가독성은 결국 리듬입니다. 눈이 한 줄을 읽고 다음 줄로 자연스럽게 이동할 때 피로가 쌓이지 않아야 합니다. 이를 좌우하는 요소는 줄 길이(행폭), 줄 간격(line-height), 단락 간격, 대비, 문장 구조입니다. 웹에서는 고정 화면이 아니라 다양한 뷰포트와 컨테이너 폭이 리듬을 흔들기 때문에 CSS로 ‘유연한 규칙’을 세워야 합니다.
줄 길이는 보통 45~80자 범위를 권장하며, WCAG 2.2의 시각적 표시(AAA)에서는 80자 이하(한중일은 40자)를 권고합니다. 이는 사용자가 다음 줄 시작점을 잃지 않게 하고, 과도한 하이픈과 ‘강물(river)’ 현상을 줄입니다. 실제 서비스에서는 폰트 특성에 따라 60~70ch 근방에서 가장 안정적인 리듬을 보입니다.
줄·단락 간격은 숫자 하나로 끝나지 않습니다. 본문 line-height는 1.4~1.8 범위를 출발점으로 잡고, 단락 간격은 line-height의 배수로 정하면 리듬이 유지됩니다. 2025년 현재 ‘lh’ 단위를 활용하면 이 관계를 훨씬 간단히 유지할 수 있습니다.
텍스트 배치의 최신 무기: text-wrap, hyphens, lh 단위
이제는 브라우저가 ‘문단 전체를 고려’해 더 보기 좋게 줄바꿈을 도와줍니다. text-wrap의 balance와 pretty 값, 그리고 hyphens와 lh 단위가 핵심입니다. 특히 제목에는 balance, 본문에는 pretty가 실전에서 유용합니다.
또한 hyphens: auto와 올바른 lang 속성을 함께 쓰면 긴 단어가 자연스럽게 분해되어 넘침이나 어색한 공백을 줄입니다. 단, 하이픈 사전은 언어에 의존하므로 페이지 또는 특정 블록의 언어를 정확히 선언해야 합니다.
lh 단위는 현재 줄 높이를 기준으로 여백과 간격을 설정하게 해 주어, 폰트와 크기가 달라져도 수직 리듬이 유지됩니다. 과거 em 기반보다 의도 보존이 뛰어나며, 다크모드/접근성 환경에서도 안정적으로 작동합니다.
실전 스니펫: 제목과 본문 줄바꿈, 하이픈, 수직 리듬
/* 제목은 균형, 본문은 품질 중심 줄바꿈 */
h1, h2, h3 { text-wrap: balance; }
article p { text-wrap: pretty; }
/* 브라우저 호환성 배려: 필요 시 white-space 초기화 */
article p { white-space: unset; }
/* 자동 하이픈 + 언어 지정으로 품질 향상 */
html[lang="ko"] body { hyphens: auto; }
/* 수직 리듬: 단락 간격을 '한 줄 높이'로 */
p { margin-block: 1lh; }balance vs pretty vs stable: 언제 무엇을 쓰나
| 핵심 비교 |
| 값 | 적합한 콘텐츠 | 특징 | 주의 |
|---|---|---|---|
| balance | 짧은 제목/캡션 | 각 줄 길이를 비슷하게 맞춰 시각적 균형 | 긴 문단에서는 효과 제한 |
| pretty | 본문 문단 | 문단 전체를 고려한 줄바꿈으로 ‘비뚤어진 오른쪽 가장자리(rag)’ 개선 | 매우 긴 문단은 성능 점검 권장 |
| stable | 편집 중 텍스트 | 편집 시 재래핑 최소화 | 가독성 향상 효과는 제한적 |
색과 대비, 다크 모드: 읽기 쉬운 색 체계 만들기
가독성의 전제는 충분한 대비입니다. 일반 본문 텍스트는 최소 4.5:1, 큰 텍스트(18pt 또는 14pt bold 이상)는 3:1 대비를 권장합니다. 같은 수치라도 얇은 글꼴이나 억제된 안티앨리어싱에서는 체감 대비가 낮을 수 있어 실제 화면에서 더 여유 있게 설계하는 것이 좋습니다.
사용자 선호도를 반영하는 prefers-color-scheme(다크/라이트), prefers-contrast(더 높은 대비), 그리고 최근 각 브라우저가 지원을 넓히고 있는 light-dark() 색 함수와 현대 색공간(OKLCH 등)을 활용하면 상황별 가독성 품질을 자동으로 확보할 수 있습니다.
폼 UI는 accent-color로 일관된 색과 충분한 대비를 부여하고, 포커스 인디케이터는 최소 2px 이상의 두께와 3:1 대비(AAA 기준)를 목표로 설정하면 키보드 사용자와 저시력 사용자에게 큰 도움이 됩니다.
/* 시스템 테마 반영 */
:root { color-scheme: light dark; }
@media (prefers-color-scheme: dark) {
body { background:#0b0b0b; color:#eaeaea; }
}
/* 높은 대비 선호 사용자 대응 */
@media (prefers-contrast: more) {
:root { --text:#111; --bg:#fff; }
}
/* 폼 컨트롤 가시성 */
input, select, textarea { accent-color: #3b82f6; }
/* 포커스 인디케이터: 크고 선명하게 */
:focus-visible { outline: 2px solid #ff8a00; outline-offset: 2px; }반응형 타이포그래피: clamp(), 컨테이너 쿼리, CQ 단위
가독성은 뷰포트가 아니라 콘텐츠가 놓인 컨테이너의 폭에 반응해야 일관됩니다. 컨테이너 쿼리(@container)와 CQ 단위(cqw/cqh/cqi)를 활용하면 카드, 아사이드, 본문처럼 각기 다른 폭의 블록에서 ‘적절한’ 글자 크기와 행폭을 자동으로 맞출 수 있습니다.
clamp()로 최소–선호–최대 값을 지정하고, 제목/본문에 서로 다른 성장률을 부여합니다. 본문 폭은 max-width: 65–70ch로, 카드 같은 좁은 컨테이너에서는 55–60ch로 조정하면 안정적입니다.
scrollbar가 나타날 때 레이아웃이 흔들리면 독서 흐름이 끊깁니다. scrollbar-gutter: stable로 스크롤바 공간을 예약해 올바른 줄바꿈과 레이아웃 안정성을 유지하세요.
실전 스니펫: 컨테이너 기반 본문 스케일
/* 컨테이너 선언 */
.article { container-type: inline-size; }
/* 본문 폰트 크기: 컨테이너 기반 유동 타이포그래피 */
.article p {
font-size: clamp(1rem, 0.9rem + 1cqi, 1.125rem);
max-width: 70ch;
}
/* 40ch 이상이면 여백과 행간을 키워 가독성 향상 */
@container (min-width: 40ch) {
.article p { line-height: 1.6; margin-block: 1lh; }
}
/* 스크롤바 레이아웃 흔들림 방지 */
html { scrollbar-gutter: stable; }폰트 로딩과 코어 웹 바이탈: ‘보이는 글’이 먼저다
빈 화면(FOIT)은 최악의 가독성입니다. @font-face에 font-display: swap 또는 상황에 따라 optional을 설정해 항상 텍스트가 보이도록 하세요. 교체 시 레이아웃 흔들림을 줄이기 위해 font-size-adjust와 유사 메트릭의 대체 폰트를 스택에 구성하는 것이 좋습니다.
2024년 3월 12일부터 코어 웹 바이탈의 상호작용 지표는 FID에서 INP로 바뀌었습니다. 무거운 폰트·스크립트가 입력 지연을 유발하면 가독성뿐 아니라 검색 성과에도 악영향을 줍니다. 폰트 서브셋, 선제적 프리로드, 캐시 전략을 함께 고려하세요.
가변 폰트의 font-optical-sizing: auto는 작은 크기에서 글자 디테일을 자동 보정해 가독성을 높입니다. 굵기/폭/옵티컬 사이즈 축을 조절해 다크 모드에서도 너무 얇거나 번지는 문제를 완화할 수 있습니다.
@font-face{
font-family:"YourVF";
src:url("/fonts/YourVF.woff2") format("woff2");
font-display: swap; /* 항상 보이는 텍스트 */
}
/* 대체 폰트 메트릭 보정 */
html{ font-size-adjust: 0.5; }
/* 가변 폰트 옵티컬 사이징 */
body{
font-family: "YourVF", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
font-optical-sizing: auto;
}모바일·다국어·접근성 디테일: 마지막 10%가 결정한다
노치·라운드 화면을 고려하지 않으면 텍스트나 버튼이 잘려 가독성을 해칩니다. env(safe-area-inset-*) 값으로 안전 영역을 확보하세요. 고정 하단 바는 안전 영역 최대값을 이용해 ‘밀려 올라가는’ 애니메이션에도 흔들림이 없게 합니다.
다국어 콘텐츠는 lang 속성을 정확히 지정하세요. 이는 스크린리더 발화뿐 아니라 hyphens: auto 품질에도 직접 영향을 줍니다. RTL/세로쓰기 등에는 물리 속성 대신 논리 속성(margin-inline, padding-block 등)을 쓰면 재사용성과 가독성이 높아집니다.
키보드 탐색 사용자에게 포커스는 ‘현재 위치’를 알려주는 안내선입니다. :focus-visible을 적극 사용하고, 버튼·링크의 포커스 링이 배경과 3:1 이상의 대비를 갖도록 설계하세요. 포커스 표시가 배경 이미지 위에서 사라지지 않도록 outline-offset이나 이중 링을 활용합니다.
/* 안전 영역 */
.footer {
position: sticky; bottom: 0;
padding-bottom: env(safe-area-inset-bottom, 0);
}
/* 다국어 및 논리 속성 */
html[lang="ko"] { word-break: keep-all; }
.article { padding-inline: 1.25rem; }
/* 포커스 표시 이중 링 패턴 */
a:focus-visible, button:focus-visible{
outline: 2px solid #fff; outline-offset: 2px;
box-shadow: 0 0 0 4px #2563eb; /* 배경과의 대비 확보 */
}5단계 실전 체크리스트: 바로 적용하는 가독성 개선 루틴
- 행폭 제한: 본문에 max-width: 65–70ch 적용. 카드/사이드바는 55–60ch로 조정.
- 줄바꿈 전략: 제목은 text-wrap: balance, 본문은 pretty, hyphens: auto와 lang 속성 설정.
- 수직 리듬: line-height: 1.5 전후에서 시작, 단락 간격은 margin-block: 1lh.
- 색·대비: 본문 대비 4.5:1 이상, 포커스 링 3:1 이상. 다크 모드와 높은 대비 선호를 함께 대응.
- 폰트 로딩: font-display: swap, 필요 시 프리로드·서브셋, font-optical-sizing: auto.
자주 하는 실수와 해결책
1) 폰트 바뀌면 레이아웃이 흔들려요
대체 폰트 메트릭을 고려하지 않으면 스왑 시 줄바꿈이 변해 CLS가 증가합니다. font-size-adjust와 유사 폭·x-높이의 시스템 스택을 구성해 차이를 최소화하세요.
2) 다크 모드에서 회색 본문이 흐려 보여요
다크 모드에서 회색 대비는 체감이 더 낮습니다. 본문은 #eaeaea 수준 이상, 링크·강조는 명확한 색(OKLCH 기준 채도 가산)으로 설계하고 hover/focus 대비를 분리하세요.
3) 제목이 두 줄일 때 오른쪽이 들쭉날쭉
text-wrap: balance를 제목에 적용하고, 필요하면 width: fit-content로 빈 공간을 줄입니다. 너무 긴 제목은 의미 단위로 의도적 줄바꿈을 고려하세요.
바로 붙여 쓰는 베이스 스타일(복사/붙여넣기)
/* 1) 기본 타이포 & 레이아웃 안정성 */
:root { color-scheme: light dark; }
html { scrollbar-gutter: stable; }
body {
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
line-height: 1.6;
background: #fff; color:#111;
}
/* 2) 본문 컨테이너와 행폭 */
.article {
container-type: inline-size;
max-width: 70ch; margin-inline: auto; padding-inline: 1.25rem;
}
/* 3) 줄바꿈 & 수직 리듬 */
h1, h2, h3 { text-wrap: balance; line-height: 1.25; }
p { text-wrap: pretty; margin-block: 1lh; }
/* 4) 하이픈과 언어 */
html[lang="ko"] body { hyphens: auto; word-break: keep-all; }
/* 5) 폰트 로딩·품질 */
@font-face{
font-family:"BrandVF";
src:url("/fonts/BrandVF.woff2") format("woff2");
font-display: swap;
}
body { font-optical-sizing: auto; }
/* 6) 포커스 & 폼 */
:focus-visible { outline:2px solid #ff8a00; outline-offset:2px; }
input,select,textarea { accent-color:#2563eb; }
/* 7) 다크 모드 */
@media (prefers-color-scheme: dark){
body { background:#0b0b0b; color:#eaeaea; }
}
자주 묻는 질문 (Q&A)
Q1. text-wrap: balance와 pretty는 함께 써도 되나요?
권장 패턴은 제목(h1~h3)에 balance, 본문 문단(p)에 pretty입니다. 같은 요소에 동시 적용은 의미가 없으니 역할에 따라 분리하세요. 긴 문단에서 balance는 효과가 제한적이며, pretty가 문단 전체의 줄바꿈 품질을 개선합니다.
Q2. 폰트 스왑 때문에 줄바꿈이 달라져 레이아웃이 흔들립니다. 해결법은?
font-display: swap을 유지하되, 1) 대체 폰트 스택을 원본과 메트릭이 유사한 폰트로 구성, 2) font-size-adjust로 x-높이 보정, 3) 본문 폭을 ch 단위로 제한하면 흔들림이 크게 줄어듭니다. 큰 제목은 의미 단위로 수동 줄바꿈을 고려하세요.
결론: 2025년형 가독성은 ‘자동화된 균형’ 위에 선다
요약하면, 행폭(65–70ch), 수직 리듬(lh), 똑똑한 줄바꿈(text-wrap), 충분한 대비와 포커스, 그리고 폰트 로딩 전략이 2025년 가독성의 다섯 기둥입니다. 컨테이너 쿼리와 clamp()로 ‘콘텐츠 중심’ 반응형을 구현하면 기기와 테마를 넘어 일관된 독서 경험을 제공할 수 있습니다.
지금 프로젝트의 본문 컨테이너에 container-type을 선언하고, p에 text-wrap: pretty·margin-block: 1lh, 본문 max-width를 70ch로 지정해 보세요. 단 10분의 수정으로 ‘더 오래, 덜 피곤하게’ 읽히는 페이지가 됩니다.
💌 더 읽히는 페이지를 함께 만드세요
도입해 본 설정이나 스니펫을 댓글로 공유해 주세요. 팀에 이 글을 전파하고, 뉴스레터 구독으로 다음 업데이트(예: avoid-short-last-lines 지원 상황)를 받아보세요.
출처
- https://developers.google.com/search/blog/2023/05/introducing-inp
- https://w3c.github.io/wcag/understanding/contrast-minimum.html
- https://w3c.github.io/wcag/understanding/contrast-enhanced.html
- https://webkit.org/blog/16547/better-typography-with-text-wrap-pretty/
- https://caniuse.com/css-text-wrap-balance
- https://webkit.org/blog/16831/line-height-units/
- https://w3c.github.io/wcag/understanding/visual-presentation
- https://w3c.github.io/csswg-drafts/css-env/
- https://drafts.csswg.org/css-env-1/
- https://groups.google.com/a/chromium.org/g/blink-dev/c/17peoEUyt5k/m/GgSXIZzrEQAJ
- https://github.com/mdn/content/blob/main/files/en-us/web/css/env/index.md
- https://ishadeed.com/article/container-queries-are-finally-here/
- https://github.com/mdn/content/blob/main/files/en-us/web/css/%40container/index.md
- https://w3c.github.io/wcag/understanding/focus-appearance.html
- https://hacks.mozilla.org/2019/06/indicating-focus-to-improve-accessibility/
- https://caniuse.com/prefers-color-scheme
- https://caniuse.com/prefers-reduced-motion
- https://webkit.org/blog/7551/responsive-design-for-motion/
- https://caniuse.com/mdn-css_properties_font-optical-sizing_auto
- https://groups.google.com/a/chromium.org/g/blink-dev/c/Y3lhEykjfV0
- https://baymard.com/blog/line-length-readability%20
- https://en.wikipedia.org/wiki/Line_length
- https://moderncss.dev/container-query-units-and-fluid-typography/
- https://ryangjchandler.co.uk/posts/preventing-scrollbar-layout-shifts
- https://w3c.github.io/csswg-drafts/css-overflow-4/
- https://webkit.googlesource.com/WebKit/%2B/master/Websites/webkit.org/demos/safe-area-insets/3-safe-area-constants.html
- https://webaim.org/techniques/language/
- https://www.interaction-design.org/literature/topics/readability-in-ux-design
