쇼핑몰에서 상품 갯수를 올리거나 내릴 때 하단의 '총 결제 금액' 텍스트가 좌우로 덜덜 떨리며 밀리는 현상을 본 적 있으신가요?
또는 이벤트 마감 시간을 알려주는 카운트다운 타이머(00:59:12...)의 초침이 줄어들 때마다 전체 박스가 덜컹거려서 불안해 보였던 경험이 있으실 겁니다.

1. 투박한 굴림체로 바꿔야 하나요? 절대 아닙니다!

이 떨림을 막기 위해 모든 글자 너비가 똑같은 옛날 방식의 고정폭 폰트(Courier, 굴림체 등)로 바꾼다면 디자인이 엉망이 될 것입니다.
모던 CSS에서는 현재의 예쁜 폰트 디자인은 그대로 유지하면서, 오직 '숫자(Numeric)'의 폭만 표(Table)처럼 일정한 간격으로 고정시켜 주는 마법의 타이포그래피 속성을 제공합니다.

/* 실시간으로 변하는 가격, 타이머 등에 딱 한 줄만 추가하세요! */
.live-price-text, .countdown-timer {
    /* 숫자의 너비(폭)를 동일하게 고정시켜 덜컹거림 원천 차단 */
    font-variant-numeric: tabular-nums; 
}

2. 쇼핑몰 신뢰도를 높이는 1픽셀의 기적

이 속성을 적용하면 숫자가 1에서 8로 바뀌더라도 텍스트의 전체 길이가 절대 변하지 않습니다.
주식 차트의 호가창, 가상화폐 거래소의 실시간 가격, 쇼핑몰의 결제 금액, 대시보드의 통계 수치 등 숫자가 변하는 모든 곳에 이 속성을 적용해 보세요. 눈의 피로도가 획기적으로 낮아지고 사이트의 신뢰도(Trust)가 급격히 상승합니다.