같은 숫자라도 본문 속 연도와 세로로 나열한 금액은 필요한 모양이 다를 수 있다. 숫자의 높이와 너비를 따로 살피면 작품 목록과 표에서 무엇을 맞춰야 하는지 분명해진다.
- 라이닝 숫자: 위아래 높이가 대체로 일정하다. 대문자와 함께 놓이거나 일정한 높이가 필요한 경우에 검토한다.
- 올드스타일 숫자: 숫자마다 위아래로 오르내리는 모양이 있다. 소문자 중심의 영문 본문과 어울리는지 볼 수 있다.
- 고정폭 숫자: 각 숫자가 같은 폭을 차지한다. 표에서 같은 자릿수를 세로로 비교하기에 유용하다.
- 가변폭 숫자: 각 숫자 모양에 맞춰 폭이 달라진다. 높이가 라이닝인지 올드스타일인지와는 별개의 구분이다.
- 지원: 모든 폰트가 이 조합을 제공하지 않는다. 글자체의 설명과 실제 사용하는 프로그램에서 확인한다. (버터릭의 숫자 대체자 안내)
웹에서 지정하기
금액 열의 셀에 amount 클래스를 붙였을 때 적용할 CSS 조각이다.
.amount {
text-align: end;
font-variant-numeric: lining-nums tabular-nums;
}폰트에 해당 숫자가 있으면 라이닝 고정폭 숫자를 사용한다. 이 속성이 없는 숫자 모양을 새로 그려주지는 않는다. 자릿수, 소수점, 통화 기호가 뒤섞인 표는 정렬과 표기 단위도 함께 맞춰야 한다. (MDN: font-variant-numeric)
마이크로 타이포그래피의 작은 차이가 작품 목록과 전시 예산표의 비교 방식에 영향을 준다. 제목의 숫자까지 모두 같은 설정으로 바꿀 필요는 없다.