Monospace, 타자기에서 시작된 등폭 폰트

한 줄로

모든 글자의 너비가 같은 폰트입니다. 'i'와 'm'이 같은 자리를 차지합니다. 타자기에서 시작해서 모든 코드 에디터의 표준이 됐습니다.

어디서 왔나

기계식 타자기(1870년대 등장)는 모든 글자가 같은 간격으로 찍힐 수밖에 없었습니다. 활자 막대가 한 번에 같은 거리만큼 움직이게 설계됐기 때문입니다. 그래서 모든 타자기 폰트는 자연스럽게 monospace였습니다.

이 제약이 한 가지 좋은 부수효과를 만들었습니다. 세로 정렬이 완벽한 것입니다. 같은 글자 수의 단어는 항상 같은 너비입니다. 표나 코드처럼 행과 열을 맞춰야 하는 텍스트에 이상적입니다.

컴퓨터 시대 초기, 1970년대 모든 터미널과 모니터는 monospace였습니다. 디스플레이 기술이 한 글자 한 글자를 같은 자리에 그리는 것만 가능했기 때문입니다.

코드 에디터의 표준

소프트웨어 개발자가 monospace를 사랑하는 이유입니다.

• 들여쓰기 시각화: 정확히 일치하는 공간.
• 세로 정렬: 변수, 값, 주석을 칼럼처럼 정렬.
• 글자 구별: l, I, 1을 명확히 구분 (코딩 전용 폰트).

대표 코딩 폰트입니다.

• Courier (1955): IBM 타자기에서 옮겨온 첫 컴퓨터 monospace.
• Consolas (Microsoft, 2007): Windows 표준.
• Menlo / Monaco (Apple): macOS 표준.
• Fira Code (Mozilla, 2014): 합자(=> ≠ <= 등) 지원.
• JetBrains Mono (2020): 합자 + 코드용 최적화.
• D2Coding (한국, NAVER, 2017): 한글 + 영문 코드 폰트.

UI에서

monospace의 비코딩 사용처입니다.

• 숫자 정렬: 가격, 시간, 통계. 자릿수가 일정하면 monospace.
• 차트의 X축 라벨: 숫자가 같은 너비.
• 터미널 UI 흉내: 해커 톤, 복고풍.
• 기술 문서의 코드 블록: 인라인 code 또는 코드 블록.

CSS입니다.

.code {
  font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
}

마지막에 monospace fallback을 두면 어떤 시스템에서도 등폭 폰트로 표시됩니다.

바이브 메이커가 챙길 한 가지

블로그 글에 코드 스니펫이 들어간다면 monospace 폰트 적용은 필수입니다. 일반 본문 폰트로 코드를 표시하면 들여쓰기가 어색하고 가독성이 떨어집니다. <pre><code class="language-xx"> + monospace = 표준입니다.

관련

Serif vs Sans-serif · Tracking · Typography