같은 작품 설명도 본문의 폭과 줄 높이에 따라 다른 속도로 읽힌다. [[타이포그래피]]에서는 [[글자체]]와 [[글자 크기]], 한 줄에 담기는 양과 [[행간]]을 함께 살핀다.
- **폭:** 본문에 최대 너비를 두면 넓은 화면에서도 글줄이 끝없이 길어지지 않는다. 좁은 화면에서는 가용 너비에 맞게 줄어들게 한다.
- **높이:** `line-height: 1.7`처럼 단위 없는 숫자는 각 요소의 글자 크기에 비례한다. 큰 제목과 작은 본문이 같은 픽셀 줄 높이를 물려받는 일을 피할 수 있다.
- **차이:** 한글·영문·숫자의 폭은 같지 않다. 아래의 `36rem`과 `1.7`은 이 예제의 출발값이며 모든 글의 정답은 아니다.
## 한 파일로 확인하기
아래 전체 코드를 UTF-8 형식의 `example-01.html` 파일로 저장해 웹 브라우저에서 연다. 예제의 전시와 행사는 가상이다.
```html
글줄의 길이와 줄 높이: 제작 예제
낮에 읽는 전시, 밤에 읽는 전시
작품 옆에 놓인 작은 설명을 집으로 가져왔다. 같은 문장이지만
전시장에서는 서서 읽었고 지금은 창가에 앉아 읽는다.
Room 02에는 종이와 빛을 다룬 작업이 있다. 화면의 폭을 좁히면
영문 이름과 한글 설명이 같은 위치에서 줄을 바꾸지는 않는다.
```
창을 좁히고 웹 브라우저의 글자를 키워 문단이 잘리거나 서로 겹치지 않는지 확인한다. 긴 주소가 들어간다면 [[긴 주소가 글 상자 밖으로 나가지 않게 하기]]와 함께 살핀다. [[줄 길이의 예외]]에는 작품 제목이나 시처럼 끊는 위치 자체가 표현인 경우가 남는다.
## 참고
- [셰이 하우: 타이포그래피 다루기](https://learn.shayhowe.com/html-css/working-with-typography/)
- [MDN: 줄 높이와 상속](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/line-height)
#HTML #CSS #타이포그래피