Typography 규칙 line-height 설계하기

포토샵과 같은 일부 현대 디자인 애플리케이션은 여전히 'leading'라는 용어를 사용하는 반면 HTML과 CSS에서는 이 속성을 'line-height'라고 부른다. leading, line spacing, line height는 모두 같은 것을 말합니다.

line height 또는 line spacing은 일반적으로 글꼴 크기의 백분율로 측정됩니다. 일반적인 통념으로는 130-150%의 행간격이 가독성에 이상적이지만 200%까지 허용됩니다.

완벽한 line height는 글꼴 자체의 디자인과 크기에 따라 달라집니다. 모든 텍스트에 적용되는 매직 넘버는 없습니다. 글꼴 크기의 1.5배 선 높이로 시작하는 것이 좋은 시작이며, 그에 따라 조정할 수 있습니다.

1.5 라인 높이를 사용할 때는 8 포인트 그리드 시스템을 사용하면 잘 작동합니다. 줄 높이가 8이고 기본 글꼴 크기가 16인 것이 이 원리에 딱 맞습니다.

최적의 줄 간격과 글꼴 크기를 계산하는 보다 발전된 방법은 황금 비율 타이포그래피 계산기를 참조하십시오. Justinmind.com은 line spacing에 대한 UX 모범 사례에 대한 전체 기사를 제공하며 다음 예를 사용합니다.

100% 단락에서, 여러분은 인접한 줄에 있는 글자들이 서로 위험할 정도로 가까이 오는 것을 볼 수 있습니다. 이것이 문제가 되는 이유는 약간의 시각장애가 있는 사람들은 읽기가 훨씬 더 어려워질 것이기 때문이다. 150%로 공간의 균형이 잘 잡혀 있고 텍스트를 읽을 수 있는 것처럼 느껴집니다. 반면 250% 띄어쓰기의 문단은 줄 간격이 너무 과장되어 텍스트를 읽는 것이 부자연스럽게 느껴진다. — 줄 간격 형식에 대한 UX 모범 사례 justinmind.com

Line Spacing은 글자 크기가 작을수록 실제로 증가해야 한다. 작은 글꼴은 이미 읽기가 더 어렵고, 눈이 쉽게 따라 할 수 있는 더 많은 공간이 필요하기 때문이다.

저스틴마인드의 톰 클라크는 line spacing에 대해 다음과 같은 6가지 황금 규칙을 제안합니다.

1. 최적의 가독성과 접근성을 위해 약 140-180%를 목표로 합니다.
2. 줄 길이를 70~80자로 제한합니다.
3. 글꼴 크기는 16pt 이상이어야 합니다.
4. 작은 글꼴은 띄어쓰기가 더 필요합니다.
5. 따옴표나 다른 짧은 텍스트의 간격을 좁혀 실험합니다.
6. 글꼴 또는 글꼴 크기를 변경할 때 줄 간격을 확인하십시오.