화면에서 가장 많은 자리를 차지하는 것은 글자입니다. 잘 읽히는 글자는 자기 생김새를 지우고 내용만 비추는데, 그 편안함을 만드는 CSS를 크기와 간격부터 하나씩 코드로 다뤄 보겠습니다.
09.1 본문 크기를 넉넉히 잡기
작은 글자는 멋져 보일지 몰라도 읽는 사람을 피로하게 합니다. 본문은 눈이 편한 크기로 시작합니다.
body {
font-size: 14px;
}
14px는 손에 든 화면에서 사용자가 얼굴을 끌어당기게 만듭니다. 본문은 조금 더 키우는 편이 안전합니다.
body {
font-size: 16px;
line-height: 1.6;
}
16px에 줄 간격을 얹으면 문단이 숨을 쉽니다. 읽힘은 언제나 멋보다 앞에 놓습니다.
09.2 줄 간격으로 문단에 숨 틔우기
줄과 줄이 너무 붙으면 눈이 다음 줄을 놓치고, 너무 벌어지면 한 문단으로 이어지지 않습니다. 글자 크기의 한 배 반 남짓이 편안합니다.
p {
line-height: 1.6;
margin-bottom: 16px;
}
h2 {
line-height: 1.3;
}
본문은 1.6으로 여유 있게, 제목은 1.3으로 단단하게 둡니다. 큰 글자는 줄 간격이 넓으면 오히려 흩어져 보이기 때문입니다.
09.3 한 줄 길이에 울타리 두기
한 줄이 화면 끝까지 늘어지면 왼쪽으로 돌아올 때 몇 번째 줄인지 놓칩니다. 본문 폭을 제한해 눈의 리듬을 지킵니다.
.prose {
max-width: 65ch;
margin-inline: auto;
}
ch 단위는 글자 폭을 기준으로 삼아, 한 줄에 대략 65자 안팎이 담기게 합니다. 화면이 넓어도 본문은 읽기 편한 폭을 유지합니다.
09.4 글자 대비를 지키되 눈은 편하게
옅은 배경 위 옅은 글씨는 세련돼 보여도 흐릿하게만 읽힙니다. 대비는 넉넉히 두되 완전한 검정은 살짝 눅여 씁니다.
body {
color: #1f2937;
background: #ffffff;
}
.muted {
color: #6b7280;
}
본문은 순검정 대신 아주 짙은 회색이라 대비를 지키면서도 눈이 덜 피로합니다. 보조 설명은 한 단계 옅게 두어 위계를 함께 표현합니다.
09.5 크기와 굵기로 위계 세우기
같은 글꼴이라도 크기와 굵기만 달리하면 제목과 본문이 갈립니다. 다른 글꼴을 불러오지 않아도 충분합니다.
.title {
font-size: 24px;
font-weight: 700;
}
.subtitle {
font-size: 18px;
font-weight: 600;
}
.body {
font-size: 16px;
font-weight: 400;
}
크기와 굵기가 함께 계단을 이루니 무엇을 먼저 읽어야 할지 눈이 저절로 압니다. 굵기 단계는 서넛으로 좁혀 차이를 확실히 벌립니다.
09.6 자간은 큰 글자에만 손대기
큰 제목은 글자가 헐거워 보이기 쉽고, 아주 작은 글씨는 엉겨 붙기 쉽습니다. 크기에 따라 자간을 다르게 대합니다.
.hero {
font-size: 40px;
letter-spacing: -0.02em;
}
.caption {
font-size: 12px;
letter-spacing: 0.02em;
}
큰 글자는 살짝 좁혀 단단하게, 작은 글자는 살짝 벌려 또렷하게 합니다. 본문은 글꼴이 정한 자간이 대개 가장 편하니 건드리지 않습니다.
09.7 정렬은 왼쪽을 기본으로
긴 글을 양쪽 끝까지 맞추면 낱말 사이가 들쭉날쭉 벌어져 오히려 읽기 불편합니다. 왼쪽만 맞추고 오른쪽은 자연스럽게 둡니다.
.prose {
text-align: left;
}
.prose p {
word-break: keep-all;
overflow-wrap: break-word;
}
왼쪽 정렬이라 눈이 매번 같은 출발선으로 돌아옵니다. keep-all은 한글 낱말이 어색하게 잘리는 것을 막아 줍니다.
09.8 화면 크기에 따라 제목 조절하기
넓은 화면에서 알맞던 큰 제목이 작은 화면에서는 몇 줄을 잡아먹습니다. 제목처럼 큰 글자는 화면에 맞춰 유연하게 조절합니다.
.hero {
font-size: clamp(28px, 6vw, 48px);
}
clamp는 최소 28px과 최대 48px 사이에서 화면 폭에 따라 크기를 바꿉니다. 본문은 이렇게 줄이지 않고 어느 화면에서나 충분히 크게 지킵니다.
09.9 타입 토큰으로 계단 고정하기
크기를 그때그때 감으로 넣으면 22px, 19px처럼 제각각인 값이 섞입니다. 정해진 계단만 쓰도록 변수로 묶습니다.
:root {
--text-sm: 14px;
--text-base: 16px;
--text-lg: 20px;
--text-xl: 28px;
}
.card-title {
font-size: var(--text-lg);
}
.card-desc {
font-size: var(--text-base);
}
새 글자를 놓을 때 몇 번째 계단인가만 정하면 되니 판단이 빨라집니다. 같은 무게가 같은 중요도를 뜻하게 되어 화면이 흔들리지 않습니다.
09.10 한글에 맞는 글꼴 지정하기
한글은 획이 복잡해 작은 크기에서 뭉개지기 쉽습니다. 화면용으로 다듬어진 글꼴을 앞세우고 대체 글꼴을 뒤에 둡니다.
body {
font-family: "Pretendard", "Apple SD Gothic Neo",
"Malgun Gothic", sans-serif;
-webkit-font-smoothing: antialiased;
}
앞의 글꼴이 없으면 뒤의 것으로 차례로 물러나니 어느 기기에서도 한글이 또렷합니다. 본문에는 개성 강한 글꼴 대신 담백한 것을 씁니다.
09.11 강조는 굵기 하나로 절제하기
낱말을 도드라지게 할 때 색과 기울임과 밑줄을 겹치면 링크나 다른 목소리로 오해받습니다. 강조는 굵기 하나로 그칩니다.
.prose strong {
font-weight: 600;
color: inherit;
}
.prose em {
font-style: normal;
background: #fef9c3;
}
강조는 색을 바꾸지 않고 굵기만 살짝 더해, 눌리는 링크의 파란 글자와 헷갈리지 않게 합니다. 한 문장에 강조가 서넛씩 박히면 강조가 아니라 얼룩이 됩니다.
09.12 제목과 본문의 간격 다듬기
제목이 위 본문과 아래 본문 사이에 똑같이 떠 있으면 어느 쪽에 딸린 제목인지 흐려집니다. 제목은 자기 아래 내용에 붙입니다.
h2 {
margin-top: 40px;
margin-bottom: 12px;
}
h2 + p {
margin-top: 0;
}
제목 위는 40px로 크게 벌리고 아래는 12px로 좁혀, 제목이 뒤따르는 문단과 한 묶음으로 읽힙니다. 간격의 차이가 곧 소속을 말해 줍니다.
09.13 정리
타이포그래피는 개성 있는 글꼴을 고르는 일이 아니라, 사용자가 글자의 생김새를 잊고 내용에만 집중하게 만드는 일입니다. 넉넉한 크기, 알맞은 줄 간격, 제한된 줄 길이, 충분한 대비가 바탕을 이루고, 크기와 굵기의 계단을 변수로 고정하면 화면 전체가 한 박자로 정돈됩니다. 글자가 편안해야 화면이 편안합니다.