영문 기준으로 짠 타이포를 한글에 그대로 얹으면 줄이 어색하게 끊기고 글자가 답답해 보입니다. 한글은 글자 모양도 줄바꿈 규칙도 달라서 손볼 곳이 따로 있습니다. 아래 예제는 그대로 확인할 수 있습니다.
58.1 단어 단위로 줄바꿈
한글은 띄어쓰기 단위로 줄을 넘겨야 자연스럽습니다. 기본값은 글자 사이 아무 데서나 끊어 어절이 반 토막 납니다.
/* 나쁜 예: 글자 중간에서 끊김 */
.text { word-break: break-all; }
/* 좋은 예: 어절 단위 유지 */
.text { word-break: keep-all; }
keep-all은 한 단어가 통째로 다음 줄로 넘어가게 합니다. 어절이 줄 끝에서 쪼개지지 않으니 읽기 흐름이 끊기지 않습니다.
58.2 keep-all의 부작용 막기
keep-all은 아주 긴 단어나 URL이 있으면 화면 밖으로 삐져나갈 수 있습니다. 넘칠 때만 끊도록 안전장치를 겁니다.
.text {
word-break: keep-all;
overflow-wrap: anywhere;
}
평소엔 어절을 지키다가 한 줄에 도저히 안 들어가는 긴 문자열만 끊어 줍니다. 가로 스크롤이 생기는 사고를 막는 조합입니다.
58.3 한글 폰트 스택
한글은 폰트 이름을 스택에 명시해 두는 편이 안전합니다. 시스템 기본 한글 폰트를 폴백으로 깔아 둡니다.
body {
font-family: "Pretendard", -apple-system,
"Apple SD Gothic Neo", "Malgun Gothic",
"Noto Sans KR", system-ui, sans-serif;
}
웹폰트가 안 오면 애플 기기는 산돌고딕, 윈도우는 맑은고딕으로 떨어집니다. 마지막 산세리프 폴백까지 두면 어떤 환경에서도 글자가 깨지지 않습니다.
58.4 한글은 조금 크게
같은 픽셀이라도 한글은 영문보다 작고 빽빽해 보입니다. 본문 크기를 살짝 키우고 행간을 넉넉히 줍니다.
/* 영문 본문 */
.en { font-size: 1rem; line-height: 1.5; }
/* 한글 본문 */
.ko { font-size: 1.0625rem; line-height: 1.7; }
한글은 네모 안에 획이 꽉 차 있어 줄 사이가 좁으면 답답합니다. 크기를 한 뼘 키우고 행간을 1.7 안팎으로 벌리면 한결 편하게 읽힙니다.
58.5 제목 자간은 살짝 당기기
큰 한글 제목은 글자 사이가 헐거워 보이기 쉽습니다. 자간을 아주 조금 좁히면 단단해집니다.
h1 {
font-size: 2.25rem;
letter-spacing: -0.025em;
line-height: 1.25;
}
한글은 글자 폭이 일정해 큰 제목에서 틈이 도드라집니다. em 단위로 미세하게 당기면 제목이 야무지게 모입니다. 본문에는 이 값을 쓰지 않습니다.
58.6 본문 자간은 건드리지 않기
제목과 달리 본문 한글은 자간을 넓히면 오히려 읽기 어려워집니다. 기본값을 그대로 두는 것이 안전합니다.
/* 나쁜 예: 본문 자간을 벌림 */
p { letter-spacing: 0.05em; }
/* 좋은 예: 그대로 */
p { letter-spacing: normal; }
영문에서 통하던 넉넉한 자간이 한글 본문에서는 글자를 흩뜨립니다. 어절 덩어리로 읽는 한글은 자간이 벌어지면 단어가 흩어져 보입니다.
58.7 한글과 영문 섞기
한 문장에 한글과 영문이 섞이면 영문만 크거나 작아 들쭉날쭉합니다. 폰트를 잘 고르면 두 문자의 크기가 맞습니다.
.mix {
font-family: "Pretendard", system-ui, sans-serif;
font-size: 1.0625rem;
line-height: 1.7;
}
.mix .num { font-feature-settings: "tnum"; } /* 숫자 폭 고정 */
한글과 영문을 함께 담도록 만든 폰트를 쓰면 섞인 문장에서도 높이가 맞습니다. 표 안 숫자는 tnum으로 폭을 고정해 자릿수를 정렬합니다.
58.8 줄바꿈 규칙 다듬기
한글에서 문장부호가 줄 맨 앞에 오거나 여는 괄호가 줄 끝에 홀로 남으면 어색합니다. line-break로 규칙을 조입니다.
.text {
word-break: keep-all;
line-break: strict;
}
strict는 문장부호와 괄호의 줄바꿈을 엄격하게 처리합니다. 마침표가 줄 첫머리로 떨어지는 어색한 줄바꿈이 줄어듭니다.
58.9 버튼과 라벨의 한글
짧은 버튼 글자는 자간이 헐거우면 성의 없어 보입니다. 두 글자 버튼은 특히 자간을 살짝 조입니다.
.btn {
font-size: 1rem;
letter-spacing: -0.01em;
word-break: keep-all;
}
.btn-sm {
font-size: 0.875rem;
letter-spacing: -0.005em;
}
확인이나 취소 같은 짧은 라벨은 글자가 몇 개 없어 틈이 도드라집니다. 아주 조금 당기면 버튼 안에서 글자가 야무지게 모입니다.
58.10 한글 제목 줄바꿈 다듬기
한글 제목이 두 줄로 접힐 때 한쪽 줄만 길면 균형이 깨집니다. 줄 길이를 고르게 맞추고 어절을 지킵니다.
h1, h2 {
word-break: keep-all;
text-wrap: balance;
line-height: 1.3;
}
balance가 두 줄의 길이를 비슷하게 나누고 keep-all이 어절을 지킵니다. 제목이 한 단어만 다음 줄로 떨어져 어색해지는 일이 줄어듭니다.
58.11 세로쓰기 맛보기
한글은 세로쓰기도 자연스러운 문자입니다. 필요할 때는 쓰기 방향만 바꾸면 됩니다.
.vertical {
writing-mode: vertical-rl;
line-height: 2;
letter-spacing: 0.05em;
}
vertical-rl은 위에서 아래로, 오른쪽에서 왼쪽으로 흐르게 합니다. 전통적인 인용이나 표지 장식처럼 특별한 자리에서 한글의 결을 살릴 수 있습니다.
58.12 첫 줄 들여쓰기와 정렬
한글 본문은 양쪽 정렬을 하면 어절 사이 간격이 벌어져 강물처럼 흰 틈이 생깁니다. 왼쪽 정렬을 유지하는 편이 안전합니다.
/* 나쁜 예: 양쪽 정렬로 틈 벌어짐 */
.prose p { text-align: justify; }
/* 좋은 예: 왼쪽 정렬 */
.prose p {
text-align: left;
word-break: keep-all;
}
양쪽 정렬은 줄 끝을 맞추려 어절 간격을 늘려서 한글에서 특히 지저분해집니다. 왼쪽 정렬로 두면 간격이 일정해 읽기 흐름이 고릅니다. 문단 첫 줄을 들여쓰고 싶다면 여백 대신 text-indent를 쓰는 편이 깔끔합니다.
.prose p {
text-indent: 1em;
margin-bottom: 0;
}
첫 줄만 한 글자 폭 들여 쓰면 문단 사이 여백 없이도 단락이 구분됩니다. 인쇄물에 익숙한 방식이라 긴 글에서 차분한 인상을 줍니다.
58.13 정리
한글 타이포의 핵심은 word-break를 keep-all로 두어 어절을 지키고, 넘칠 때만 overflow-wrap으로 끊고, 본문은 조금 크게 행간은 넉넉히 잡는 것입니다. 제목만 자간을 살짝 당기고 본문은 그대로 두며, 시스템 한글 폰트를 폴백에 깔아 두면 됩니다. 영문 규칙을 그대로 옮기지 않고 한글의 결에 맞추는 것, 그 작은 조정이 읽는 맛을 바꿉니다.