같은 작품 설명도 본문의 폭과 줄 높이에 따라 다른 속도로 읽힌다. 타이포그래피에서 글자체를 고른 다음에는 한 줄에 담기는 양과 다음 줄로 넘어가는 간격을 함께 살핀다.
- 폭: 본문에 최대 너비를 두면 넓은 화면에서도 글줄이 끝없이 길어지지 않는다. 좁은 화면에서는 가용 너비에 맞게 줄어들게 한다.
- 높이:
line-height: 1.7처럼 단위 없는 숫자는 각 요소의 글자 크기에 비례한다. 큰 제목과 작은 본문이 같은 픽셀 줄 높이를 물려받는 일을 피할 수 있다. - 차이: 한글·영문·숫자의 폭은 같지 않다. 아래의
36rem과1.7은 이 예제의 출발값이며 모든 글의 정답은 아니다.
한 파일로 확인하기
아래 전체 코드를 UTF-8 형식의 example-01.html 파일로 저장해 웹 브라우저에서 연다. 예제의 전시와 행사는 가상이다.
<!doctype html>
<html lang="ko">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>글줄의 길이와 줄 높이: 제작 예제</title>
<style>
* { box-sizing: border-box; }
body { margin: 0; padding: 1rem; color: #202020;
background: #fff; font-family: sans-serif; line-height: 1.7; }
main { max-inline-size: 44rem; margin-inline: auto; }
h1 { font-size: 1.75rem; line-height: 1.3; }
a { color: #164d91; }
:focus-visible { outline: 3px solid #164d91; outline-offset: 4px; }
main { max-inline-size: 36rem; }
p { overflow-wrap: anywhere; }
</style>
<main>
<h1>낮에 읽는 전시, 밤에 읽는 전시</h1>
<p>작품 옆에 놓인 작은 설명을 집으로 가져왔다. 같은 문장이지만
전시장에서는 서서 읽었고 지금은 창가에 앉아 읽는다.</p>
<p>Room 02에는 종이와 빛을 다룬 작업이 있다. 화면의 폭을 좁히면
영문 이름과 한글 설명이 같은 위치에서 줄을 바꾸지는 않는다.</p>
</main>
</html>창을 좁히고 웹 브라우저의 글자를 키워 문단이 잘리거나 서로 겹치지 않는지 확인한다. 긴 주소가 들어간다면 긴 주소가 글 상자 밖으로 나가지 않게 하기와 함께 살핀다. 줄 길이의 예외에는 작품 제목이나 시처럼 끊는 위치 자체가 표현인 경우가 남는다.