타입 스케일

글자 크기를 화면마다 눈대중으로 정하던 시절에는 값이 조금씩 어긋났습니다. 한 화면의 소제목이 17픽셀, 다른 화면의 같은 소제목이 18픽셀입니다. 따로 보면 아무도 못 알아채는 차이입니다.

문제는 이 차이가 쌓였을 때 나타납니다. 값이 스무 가지쯤 되면 어느 크기가 어느 위계인지 아무도 모르게 되고, 어떤 화면에서는 제목이 다른 화면의 본문보다 작아집니다. 사용자는 크기로 무엇이 중요한지를 읽는데, 그 신호가 화면마다 다른 뜻이 된 겁니다.

민서와 태오가 같은 제목에 다른 값을 쓴 것이 리뷰에서 드러났을 때 둘 다 틀리지 않았습니다. 고를 목록이 없었으니 각자 보기 좋은 값을 정한 것입니다. 타입 스케일은 그 목록을 먼저 만들어 두는 일입니다.

기준 크기 하나를 정하고 거기에 일정한 배수를 곱해 단계를 만듭니다. 본문을 16픽셀로 잡고 배수를 1.25로 두면 16, 20, 25, 31, 39 가 나오고, 읽기 좋은 정수로 반올림해 16, 20, 24, 32, 40 으로 씁니다.

배수를 쓰면 단계 사이의 차이가 고르게 벌어집니다. 16과 18처럼 붙어 있으면 위계가 전달되지 않고, 16과 40처럼 한 번에 뛰면 중간이 비어 쓸 단계가 없습니다. 배수는 1.2에서 1.33 사이에서 고르는 팀이 많습니다.

단계마다 역할 이름을 붙여 둬야 실제로 쓰입니다. 숫자만 있으면 24를 쓸지 32를 쓸지 다시 고민하게 되니, 본문·소제목·제목·대제목처럼 이름을 정해 그 이름으로 고르게 합니다.

크기 하나만으로는 부족해서 단계마다 행간과 웨이트를 함께 묶어 둡니다. 행간은 줄과 줄 사이의 간격이고 웨이트는 획의 굵기 단계입니다. 큰 글자는 행간을 좁게, 본문은 넉넉하게 잡는 식으로 값이 달라지기 때문에 크기만 정해 두면 같은 24픽셀 제목이 화면마다 다르게 보입니다.

"이 숫자는 타입 스케일에 없어요. 20이나 24 중에 고르셔야 합니다."

임의 값이 들어왔으니 정해 둔 단계 안에서 쓰자는 말입니다.

"모바일에서는 대제목만 한 단계 내리기로 했어요."

화면 폭에 따라 위쪽 단계를 따로 두겠다는 뜻입니다.

"단계가 아홉 개라 뭘 써야 할지 모르겠어요. 다섯으로 줄일까요?"

선택지가 많아 고르는 부담이 생겼다는 지적입니다.

페이지덱은 단계를 여섯 개로 두고 있습니다. 민서가 처음에 아홉 개를 만들었다가 반년 뒤 실제로 쓰이는 값을 세어 보니 여섯 개뿐이었고, 나머지 셋은 한 화면에서만 쓰였습니다. 그 셋을 빼고 쓰던 화면은 가까운 단계로 옮겼습니다. 자간은 스케일에 넣지 않고 대제목 단계에만 따로 값을 걸어 두었습니다. 자간은 글자와 글자 사이의 간격을 말합니다.