폰트만 바꾼다고 예뻐지지 않더라고요
웹 화면의 대부분은 결국 텍스트잖아요. 그런데 우리는 보통 font-family랑 font-size만 만지고 끝내는 경우가 많아요. 사실 CSS에는 글자를 훨씬 읽기 좋게 만들어주는 속성들이 꽤 있는데, 존재 자체를 몰라서 못 쓰는 경우가 대부분이거든요. 오늘은 그중에서 '한 줄 추가하면 바로 티가 나는' 속성들을 하나씩 풀어볼게요.
text-wrap: balance — 제목 줄바꿈의 구세주
제목이 두 줄로 넘어갈 때, 첫 줄은 꽉 차 있는데 둘째 줄에 단어 하나만 덩그러니 남는 경우 보신 적 있죠? 보기에 영 어색하잖아요. 이럴 때 제목에 text-wrap: balance를 주면 브라우저가 알아서 두 줄의 길이를 비슷하게 맞춰줘요. 예전에는 이걸 자바스크립트 라이브러리로 해결했는데, 이제 CSS 한 줄이면 끝나요. 다만 계산 비용이 있어서 제목처럼 짧은 텍스트에만 쓰라고 설계됐어요. h1, h2에 걸어두는 걸 추천해요.
text-wrap: pretty — 본문의 외톨이 단어 방지
본문용으로는 text-wrap: pretty가 있어요. 문단 마지막 줄에 짧은 단어 하나만 남는 걸 타이포그래피에서는 '외톨이(orphan)'라고 부르는데, pretty는 이런 어색한 줄바꿈을 줄이는 방향으로 문단 전체의 줄바꿈을 다듬어줘요. balance가 제목용이라면 pretty는 본문용이라고 기억하시면 돼요. 브라우저 지원이 아직 확대되는 중이지만, 지원 안 하는 브라우저에서는 그냥 무시될 뿐 아무것도 깨지지 않으니 미리 넣어둬도 손해가 없어요.
숫자가 들쭉날쭉할 때: font-variant-numeric: tabular-nums
대시보드나 표, 타이머를 만들어본 분이라면 겪어봤을 거예요. 숫자가 1초마다 바뀌는데 글자 폭이 계속 달라져서 화면이 덜덜 떨리는 현상이요. 이게 왜 그러냐면, 대부분 폰트에서 1은 폭이 좁고 8은 넓은 식으로 숫자마다 폭이 다르거든요. font-variant-numeric: tabular-nums를 주면 모든 숫자가 같은 폭으로 렌더링돼서, 표의 세로줄이 딱딱 맞고 타이머도 흔들리지 않아요. 가격, 통계, 시간 표시가 있는 곳이라면 무조건 써야 하는 속성이에요.
한국어라면 이건 꼭: word-break: keep-all
원문에는 없지만 한국 개발자에게는 이게 제일 중요해서 덧붙여요. 브라우저 기본 동작은 한국어 단어를 중간에서도 뚝 잘라 줄바꿈해요. '개발자'가 줄 끝에서 '개발'과 '자'로 갈라지는 거죠. word-break: keep-all을 주면 공백 단위로만 줄바꿈이 일어나서 단어가 안 잘려요. 다만 띄어쓰기 없는 긴 URL 같은 게 들어오면 화면을 뚫고 나갈 수 있으니, overflow-wrap: break-word를 함께 넣어서 '평소엔 단어를 지키되, 도저히 안 되면 자른다'는 안전장치를 두는 게 정석이에요. 한국어 서비스라면 body에 기본으로 깔아두세요.
그 밖에 알아두면 좋은 것들
몇 가지 더 짚어볼게요. hanging-punctuation은 따옴표 같은 문장부호를 본문 정렬선 바깥으로 살짝 내어쓰기해서 인용문을 훨씬 정돈돼 보이게 하는데, 아직 사파리 위주로 지원돼요. hyphens: auto는 영문 단어를 줄 끝에서 하이픈으로 자연스럽게 이어주는데, html 태그에 lang 속성이 제대로 지정돼 있어야 동작해요. line-height는 px 고정값보다 1.6처럼 단위 없는 배수로 주는 게 폰트 크기가 바뀌어도 비율이 유지돼서 안전하고요. 비교적 새로 나온 text-box-trim은 글자 위아래에 폰트가 기본으로 갖고 있는 투명한 여백을 잘라내주는 속성인데, 버튼 안에서 텍스트가 미묘하게 위아래로 안 맞던 고질병을 해결해줘요.
마무리
이 속성들의 공통점은 미지원 브라우저에서도 그냥 무시될 뿐 레이아웃이 깨지지 않는다는 거예요. 그러니 부담 없이 오늘 작업 중인 프로젝트에 한 줄씩 넣어보세요. 특히 keep-all과 tabular-nums는 효과가 즉각적이라 만족도가 높을 거예요. 여러분이 아끼는 타이포그래피 CSS 꿀팁이 있다면 댓글로 공유해주세요. 한국어 웹에서만 겪는 조판 고민도 환영이에요.
🔗 출처: Hacker News