타입 스케일이란?

타입 스케일은 디자인 시스템이 허용하는 글자 크기를 순서대로 배열한 집합으로, 보통 기준 크기에 일정한 비율을 곱해 만듭니다. 텍스트를 이 단계로 제한하는 것이 여러 사람이 만드는 화면의 타이포그래피를 일관되게 유지하는 방법입니다.

스케일을 만드는 법

기준 크기를 정합니다. 보통 16px입니다. 브라우저 기본값이고, 본문이 대체로 가져야 할 크기이기 때문입니다. 다음으로 비율을 정하고 위아래로 곱해 나갑니다.

16px 기준에 1.25(장3도) 비율을 쓰면 대략 이렇게 됩니다.

12px  ← 16 / 1.25 / 1.067
14px
16px  ← 기준
20px
25px
31px
39px

그다음 값을 적당한 수로 반올림합니다. 흔히 쓰는 비율은 1.125(절제된 느낌, 밀도 높은 화면에 적합)부터 1.5(극적인 느낌, 애플리케이션보다 마케팅 페이지에 적합)까지입니다.

스케일이 없으면 크기가 그때그때 개별적으로 정해지고, 애플리케이션에는 아무도 다르게 하려던 적 없는 13px·14px·15px 글자가 쌓입니다. 무엇 하나 특정해서 틀렸다고 할 수 없는데도 전체적으로 어딘가 정리되지 않은 인상을 줍니다.

스케일은 수직 리듬도 다루기 쉽게 만듭니다. 크기가 알려진 비율로 이어져 있으면 행간과 여백도 컴포넌트마다 손보는 대신 예측 가능한 방식으로 거기에 맞물릴 수 있습니다.

크기는 타이포그래피 결정의 일부일 뿐입니다. 완전한 토큰 묶음은 각 단계에 다음을 짝지어 줍니다.

크기만 토큰화한 체계는 나머지 셋을 컴포넌트마다 다시 정하게 만들고, 거기서 불일치가 돌아옵니다.

단계를 크기가 아니라 역할로 이름 붙이는 것은 색에서와 같은 이유로 가치가 있습니다.

--font-size-body: 16px;
--font-size-heading-2: 25px;

--text-lg는 크기를 서술합니다. --font-size-heading-2는 결정을 서술하고, 그것이 가리키는 대상을 바꾸는 데 제목을 하나하나 찾을 필요가 없습니다.

흔한 조합은 제목에 개성 있는 표시용 서체, 본문에 가독성 높은 실무용 서체입니다. 실패하는 방식은 비슷하지만 같지는 않은 두 서체를 고르는 것으로, 이는 결정이 아니라 실수로 읽힙니다. 대비를 주거나 맞추세요. "거의 같음"에서 멈추지 마세요.

생성되는 체계에는 서체 조합과 완전한 스케일이 포함되며, 각 단계마다 크기·굵기·행간·자간 토큰이 붙습니다. 모두 프롬프트에 설명된 제품에 맞춰 선택됩니다.