웨이트

화면에서는 무엇을 먼저 읽어야 하는지 알려 줘야 합니다. 가장 쉬운 수단은 크기인데, 크기만으로 가르려 하면 곧 막힙니다. 제목을 키우고 그 위에 더 중요한 것이 생겨 또 키우다 보면 화면이 온통 큰 글자가 되고, 큰 글자가 많아지면 어느 것도 눈에 먼저 들어오지 않습니다.

크기를 바꿀 수 없는 자리도 많습니다. 문서 목록 카드 안에 제목과 작성자와 날짜를 넣어야 하는데 카드 높이가 정해져 있어서 셋 다 14픽셀로 놓을 수밖에 없는 경우입니다. 그런데도 셋의 무게는 달라야 합니다. 제목이 먼저 읽히고 날짜가 마지막에 읽혀야 합니다.

웨이트, 곧 획의 굵기가 이 일을 맡습니다. 같은 크기에서 굵기만 달라도 먼저 읽히는 순서가 정해집니다.

100부터 900까지 아홉 단계로 나누는 것이 보통이고, 한 제품에서 실제로 쓰는 것은 서넛입니다. 본문 400, 소제목 600, 강조 700처럼 정해 두고 그 밖은 쓰지 않습니다. 쓸 단계를 미리 못 박아 두면 새 화면에서 굵기를 고민할 일이 없어집니다.

고를 때 지키는 선이 둘 있습니다.

첫째는 단계를 두 칸 이상 벌리는 것입니다. 400과 500을 나란히 놓으면 차이가 읽히지 않아서 굵게 쓴 의미가 사라집니다. 400과 600이면 한눈에 갈립니다. 둘째는 300 이하로 내려가지 않는 것입니다. 얇은 획은 시안에서 정갈해 보이지만 밝은 야외에서 휴대폰을 볼 때 배경에 묻힙니다.

서체가 그 단계를 실제로 가지고 있는지도 확인합니다. 300이 없는 서체에 300을 지정하면 브라우저가 400을 억지로 늘려 그리고, 그렇게 만들어진 굵기는 획이 고르지 않습니다. 굵기 단계는 대개 단계마다 파일이 하나씩이라, 네 단계를 쓰면 파일 네 개를 내려받습니다. 한글 서체는 파일이 커서 단계를 늘릴 때마다 첫 화면이 늦어집니다. 하나의 파일로 굵기를 연속 조절하는 가변 폰트가 이 부담을 줄이는 쪽입니다.

"제목은 크기 대신 굵기로 갈라 봅시다."

자리가 좁아 크기를 못 키우니 굵기로 위계를 만들자는 제안입니다.

"400과 500은 나란히 놓으면 차이가 안 보여요."

두 단계를 더 벌려야 구분이 읽힌다는 지적입니다.

"이 서체에 300이 없어서 브라우저가 만들어 낸 굵기예요."

지정한 단계가 파일에 없어 획이 뭉개졌다는 뜻입니다.

페이지덱에서 민서는 쓰는 굵기를 셋으로 줄였습니다. 본문 400, 카드 제목과 소제목 600, 금액과 경고 문구 700입니다. 그 전에는 500과 800이 섞여 있었는데 화면마다 어느 것이 강조인지 달랐습니다.

태오는 여기서 파일 수를 셋으로 맞췄습니다. 굵기 단계를 하나 줄인 것만으로 첫 화면에서 내려받는 글꼴 파일이 하나 줄었고, 한글 서체라 그 하나가 작지 않았습니다.