자간

활자를 손으로 짜던 시절에는 글자 사이에 얇은 조각을 끼워 간격을 벌렸습니다. 화면으로 옮겨 오면서 이 값은 서체가 미리 들고 있는 기본값이 됐고, 대부분의 자리에서는 그대로 쓰면 맞습니다.

문제는 그 기본값이 본문 크기를 기준으로 만들어졌다는 데 있습니다. 같은 값이 48픽셀 제목에서는 글자 사이가 헐거워 보이고, 11픽셀 대문자 라벨에서는 글자가 서로 붙어 읽기 어려워집니다. 시안 리뷰에서 제목이 어딘가 흐트러져 보인다는 지적이 나오는데 크기도 서체도 문제가 아닌 경우가 이 자리입니다. 글자 하나하나는 제대로 그려져 있는데 여섯 글자가 한 낱말로 묶이지 않는 상태입니다.

글자 크기에 비례하는 단위로 값을 주고, 글자가 클수록 좁히고 작을수록 벌립니다.

1. 단위는 글자 크기에 비례하는 쪽을 씁니다. 0.02em처럼 적어 두면 같은 규칙이 16픽셀 본문과 32픽셀 제목에서 각각 알맞은 양으로 적용됩니다. 픽셀로 고정하면 크기를 바꿀 때마다 다시 정해야 합니다.
2. 큰 글자에는 음수를 줍니다. 32픽셀을 넘는 제목에 -0.01em에서 -0.02em쯤을 주면 글자가 한 덩어리로 묶여 읽힙니다.
3. 작은 대문자 라벨에는 양수를 줍니다. 영문 대문자는 모두 같은 높이라 좁으면 뭉쳐 보이므로 0.05em 정도를 벌립니다. 11픽셀짜리 분류 라벨이 여기 해당합니다.
4. 본문은 기본값에서 손대지 않습니다. 본문 자간을 만지고 있다면 대개 서체나 크기 쪽 선택이 잘못돼 있습니다. 좁히면 글자가 서로 간섭해 읽는 속도가 떨어지고, 벌리면 낱말의 경계가 흐려집니다.
5. 한글은 따로 확인합니다. 한글은 글자 하나가 네모 칸을 채우는 구조라 영문에서 쓰던 음수 값을 그대로 옮기면 글자끼리 닿아 보일 수 있습니다. 영문과 한글이 섞인 제목에서 특히 드러나므로 실제 문장으로 확인합니다.

값은 디자인 시스템에서 크기 단계마다 하나씩 정해 두고, 화면마다 다시 고르지 않습니다.

"제목 자간만 -2퍼센트 주죠. 지금은 글자가 흩어져 보여요."

큰 글자에서 기본값이 헐거워 조이자는 제안입니다.

"본문 자간은 건드리지 마세요. 서체를 바꾸는 게 맞습니다."

증상이 아니라 원인을 고치자는 지적입니다.

"이 라벨은 대문자라 자간을 벌려야 읽힙니다."

작은 대문자에는 반대 방향의 값이 필요하다는 뜻입니다.

페이지덱의 타입 스케일에는 크기 여섯 칸마다 자간 값이 붙어 있습니다. 민서가 이 값을 표에 넣기 전에는 제목 자간이 화면마다 달라서, 같은 크기의 제목이 문서 목록과 설정 화면에서 다르게 보였습니다.