[css] 고정폭 폰트(Fixed width font) 사용하기 (ex. 카운트다운)

웹 디자인을 하다 보면 숫자를 사용할 일이 반드시 있습니다. 값의 변화 없이 고정된 위치에서만 사용되는 숫자라면 폭 변화에 신경 쓰지 않아도 되지만 카운트 다운(Count down)이나 진행상태(Progress bar)를 표현할 때는 실시간으로 숫자가 바뀌게 됩니다. 이때 고정폭 폰트를 사용하지 않으면 빠르게 변화가 일어날 때는 텍스트의 길이가 좌우로 계속 왔다 갔다 하는 모습을 보게 됩니다.

계속 일정한 상태를 보여주기 위해서는 두 가지 방법을 사용해 볼 수 있습니다.

 

1. 고정폭 글꼴(Monospaced font) 폰트를 사용한다.
2. OpenType 기능을 지원하는 폰트를 사용하고 스타일(css)에서 고정폭에 대한 값을 세팅해준다.

1. Monospace 폰트 사용

구글 폰트(https://fonts.google.com/)에서 Monospace로 필터를 하면 Monospace 폰트만 보여줍니다. 마음에 드는 폰트를 골라 필요한 곳에 사용하면 됩니다.

2. OpenType 기능을 지원하는 폰트를 사용하고 고정폭 값 세팅

OpenType 기능을 지원하는 폰트(예를 들면 프리텐다드 폰트 https://cactus.tistory.com/306 ) 를 사용하고 스타일을 주면 고정폭 숫자를 사용할 수 있습니다.

font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;

 

 

OpenType 폰트 기능에 대한 설명은 adobe에서 정리해둔 문서를 보면 더 자세하게 알 수 있습니다.
https://helpx.adobe.com/kr/fonts/using/open-type-syntax.html

CSS의 OpenType 기능에 대한 구문