한 줄 요약
줄 간격(line-height), 글자 간격(letter-spacing), 한 줄 길이(max-width) 세 가지만 조절해도 같은 글이 훨씬 읽기 편해집니다.
비유로 이해하기
줄 간격은 공책의 줄 간격입니다. 너무 좁으면 윗줄과 아랫줄이 엉겨 붙고, 너무 넓으면 문장이 흩어져 보여요. 본문은 글자 크기의 1.6~1.8배 정도가 편안합니다.
한 줄 길이는 눈이 한 번에 따라가는 산책로 길이입니다. 너무 길면 다음 줄 시작점을 찾다 길을 잃어요. 한글은 한 줄에 대략 35~45자 정도가 읽기 편합니다.
글자 간격은 사람 사이의 거리입니다. 큰 제목은 살짝 좁혀야(음수 값) 단단해 보이고, 작은 글자는 그대로 두는 편이 읽기 좋아요.
비교해 보기
line-height: 1.2→ 빽빽함 /1.75→ 편안함 (이 사이트 본문 값)max-width: none→ 끝없이 긴 줄 /max-width: 34em→ 적당한 산책로word-break: keep-all→ 한글이 “홈페이/지”처럼 단어 중간에서 끊기지 않게 지켜 줍니다.
직접 실행해 보기
지금 글은 일부러 읽기 불편하게 해 두었습니다. .text의 값을 하나씩 바꿔 보세요. line-height를 1.75로, max-width를 34em으로, word-break를 keep-all로 바꾸면 같은 글이 확 편해집니다.
GenerateBlocks에서는
이 사이트는 GeneratePress에서 본문 줄 간격 1.75, 글자 간격 -0.01em, 그리고 추가 CSS로 word-break: keep-all을 정해 두었습니다. GenerateBlocks로 긴 설명 문단을 만들 때는 컨테이너에 Max Width(예: 640px)를 주어 한 줄 길이를 제한해 보세요.
참고: MDN: line-height · MDN: word-break · Every Layout: Axioms (measure)