같은 숫자라도 본문 속 연도와 세로로 나열한 금액은 필요한 모양이 다를 수 있다. 숫자의 높이와 너비를 따로 살피면 작품 목록과 표에서 무엇을 맞춰야 하는지 분명해진다.

- **라이닝 숫자:** 위아래 높이가 대체로 일정하다. 대문자와 함께 놓이거나 일정한 높이가 필요한 경우에 검토한다.
- **올드스타일 숫자:** 숫자마다 위아래로 오르내리는 모양이 있다. 소문자 중심의 영문 본문과 어울리는지 볼 수 있다.
- **고정폭 숫자:** 각 숫자가 같은 폭을 차지한다. 표에서 같은 자릿수를 세로로 비교하기에 유용하다.
- **가변폭 숫자:** 각 숫자 모양에 맞춰 폭이 달라진다. 높이가 라이닝인지 올드스타일인지와는 별개의 구분이다.
- **지원:** 모든 폰트가 이 조합을 제공하지 않는다. 글자체의 설명과 실제 사용하는 프로그램에서 확인한다. ([버터릭의 숫자 대체자 안내](https://practicaltypography.com/alternate-figures.html))

## 웹에서 지정하기

금액 열의 셀에 `amount` 클래스를 붙였을 때 적용할 CSS 조각이다.

```css
.amount {
  text-align: end;
  font-variant-numeric: lining-nums tabular-nums;
}
```

폰트에 해당 숫자가 있으면 라이닝 고정폭 숫자를 사용한다. 이 속성이 없는 숫자 모양을 새로 그려주지는 않는다. 자릿수, 소수점, 통화 기호가 뒤섞인 표는 정렬과 표기 단위도 함께 맞춰야 한다. ([MDN: font-variant-numeric](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font-variant-numeric))

[[마이크로 타이포그래피]]의 작은 차이가 [[작품 목록]]과 [[전시 예산표]]의 비교 방식에 영향을 준다. 제목의 숫자까지 모두 같은 설정으로 바꿀 필요는 없다.

#타이포그래피 #CSS #편집