pretendard에 숫자 고정폭 적용하기

IAMBIT 거래소는 pretendard font를 메인으로 사용한다.

pretendard는 숫자의 가로길이가 가변적인 폰트이다.

때문에 아래 그림과 같은 문제가 발생한다.

매우 불-편…

 

이를 보고 디자이너님과 해결방안에 대해 이야기 나누어 보았다.

1. 가변폭 pretendard를 유기하고 고정폭 폰트로 수정한다. => 디자이너 리소스 많이 소모
2. 숫자만 고정폭 폰트로 수정 =>약간 짜친다, 디자이너 리소스 조금 소모

때문에 다른 대안이 있나 싶어 찾아보니 pretendard 뿐만 아닌 OpenType을 지원하는 모든 폰트에 고정폭을 적용할 수 있는 방법이 있었다.

nextjs, tailwindcss 환경에서 font OpenType 수정 방법이다.

1. 먼저 tailwind.config.ts 파일에 새로운 클래스를 추가한다.

extend: {
  fontVariantNumeric: {
    'tabular-nums': 'tabular-nums',
  },
},

1. 그다음 nextjs의 localFont 선언부를 수정한다.

export const pretendard = localFont({
  src: [
    {
      path: "../assets/fonts/Pretendard-Regular.woff",
      weight: "400",
      style: "normal",
    },
    {
      path: "../assets/fonts/Pretendard-Medium.woff",
      weight: "500",
      style: "normal",
    },
    {
      path: "../assets/fonts/Pretendard-Bold.woff",
      weight: "700",
      style: "normal",
    },
  ],
  variable: "--font-pretendard",
  display: "swap",
  fallback: ["sans-serif"],
  preload: true,
  declarations: [ // 이 부분 추가
    {
      prop: "font-feature-settings",
      value: '"tnum" on, "lnum" on',
    },
  ],
});

1. 마지막으로, tabular-nums 스타일을 필요한 곳에 적용한다.

이렇게 하면 Pretendard 폰트에 font-variant-numeric: tabular-nums가 적용되어, 숫자들이 고정 폭으로 정렬된다.

 

편-안