고정폭 글자체(monospaced typeface)는 글자를 배치할 때 일정한 폭을 쓰는 [[글자체]]다. 라틴 문자 `i`와 `W`의 검은 모양이 같다는 뜻이 아니라, 각각을 놓는 칸의 폭이 같다는 뜻이다. ([MDN의 font-family 안내](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font-family))

## 같은 폭으로 놓기

- 같은 수의 라틴 문자로 된 행은 일정한 칸에 맞춰 놓을 수 있다. 코드와 숫자 목록에서 공백을 포함한 위치 관계를 드러낼 때 유용하다.
- [[CSS]]에서 `font-family: monospace`는 특정 제품 이름이 아니라 고정폭 계열을 요청하는 값이다. 실제로 쓰이는 [[폰트]]는 이용 환경에 따라 달라질 수 있다. ([MDN의 font-family 안내](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font-family))
- 한글과 라틴 문자를 섞은 표에서는 ‘문자 하나가 모두 한 칸’이라고 계산하지 않는 편이 좋다. 동아시아 문자의 너비에는 [[전각과 반각]] 구분이 있으며, 실제 너비는 폰트와 조판 조건에도 달려 있다. ([유니코드 동아시아 문자 너비](https://unicode.org/reports/tr11/))
- 예를 들어 공백으로 가격을 오른쪽에 맞춘 목록은 폰트가 바뀌면 정렬이 달라질 수 있다. 열의 관계가 중요한 웹 문서라면 공백의 수보다 표나 레이아웃 구조로 위치를 정한다.

## 기타 등등

- HTML에는 텔레타이프 모양의 고정폭 표시를 위한 `tt` 요소가 있었다. 지금은 폐기된 요소이며, 내용에 맞는 요소와 CSS를 사용하도록 안내한다. [출처](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/tt)
- 브라우저는 비례폭과 고정폭 폰트의 기본 크기를 따로 둘 수 있다. 글자체 계열만 바꿨는데 글자가 작아지는 현상에는 이 설정이 관여할 수 있다. [출처](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font-family)

#타이포그래피 #웹 #표기