타입 스케일

정의

타입 스케일은 하나의 기준 크기(base)를 정해 두고, 여기에 정해진 비율(ratio)을 반복해서 곱하거나 나눠서 H1, H2, 본문, 캡션 같은 여러 글자 크기를 한꺼번에 만들어 내는 방식입니다. 예를 들어 본문을 16px로 잡고 비율을 1.25로 정하면, 위로는 20px, 25px, 31px처럼 제목 크기가 자동으로 이어지고 아래로는 캡션 크기가 자연스럽게 나옵니다. 음악의 음계가 정해진 간격으로 이어지듯, 글자 크기도 일정한 비율로 이어질 때 서로 어울리는 소리를 냅니다. 즉 크기를 하나하나 손으로 고르는 대신, 규칙 하나로 크기 세트를 통째로 생성하는 사고방식입니다.

왜 중요한가

화면에는 제목, 소제목, 본문, 부가 설명처럼 중요도가 다른 글자가 섞여 있습니다. 이 크기들이 서로 무관한 숫자로 정해지면 위계가 흐릿해지고, 어떤 것이 더 중요한지 눈에 잘 들어오지 않습니다. 타입 스케일은 크기끼리 같은 비율로 이어지게 만들기 때문에, 제목과 본문 사이에 일정한 리듬이 생기고 화면 전체가 정돈된 인상을 줍니다. 또 크기를 감으로 정하지 않으니 페이지마다 값이 제각각으로 어긋나는 일도 줄어듭니다. 크기를 미리 계산해 두면 새 화면을 만들 때마다 매번 고민할 필요 없이 이미 있는 단계에서 골라 쓰기만 하면 됩니다. 결과적으로 사용자는 별다른 노력 없이도 글의 구조를 읽어 내고, 개발자는 몇 개의 정해진 크기만 관리하면 되므로 유지보수도 훨씬 단순해집니다.

흔한 실수

• 크기를 그때그때 감으로 정하는 것입니다. 18px, 22px, 28px처럼 규칙 없는 값이 화면마다 쌓이면 위계가 애매해지고, 페이지끼리 미묘하게 달라 보여 전체가 어수선해집니다. 나중에 크기를 바꾸려 할 때도 어디를 얼마나 손대야 할지 몰라 수정이 어려워집니다.
• 단계를 너무 잘게 나누는 것입니다. 15px, 16px, 17px처럼 차이가 거의 없는 크기를 여러 개 두면 사용자는 그 둘의 차이를 인지하지 못하고, 관리해야 할 값만 쓸데없이 늘어나 오히려 혼란스러워집니다.
• 비율을 정할 때 화면 성격을 고려하지 않는 것입니다. 정보 밀도가 높은 대시보드에 제목을 극적으로 키우는 큰 비율을 쓰면 화면이 금세 꽉 차서 오히려 공간이 부족하고 답답해집니다.

실무 팁

• 크기를 감으로 정하지 말고 비율로 생성하세요. 비율이 클수록(1.5) 제목이 극적으로 커져 강렬해지고, 작을수록(1.2) 차분하고 정보 중심의 인상이 됩니다. 만들려는 화면의 분위기에 맞춰 비율부터 고르는 것이 순서입니다.
• 실제로 쓸 단계 수는 5~7개 정도로 제한하세요. 제목 두세 단계, 본문, 캡션 정도면 대부분의 화면을 덮을 수 있고, 선택지가 적을수록 매번의 결정이 빨라지며 화면끼리의 일관성도 저절로 지켜집니다.
• 만든 스케일 값은 디자인 토큰으로 저장해 두세요. 코드 곳곳에 숫자를 직접 박아 두지 않고 토큰으로 참조하면, 나중에 기준 크기나 비율 하나만 바꿔도 화면 전체의 글자 크기가 한꺼번에 조정되어 손이 훨씬 덜 갑니다.

관련 개념