반응형
글자 크기와 마찬가지로 행 높이(line-height) 또한 가독성에 큰 영향을 미친다. 전통적인 행간(leading)은 아래 그림과 같이 아래 끝선과 위 끝선 사이의 거리를 말한다. 금속활자로 찍을 때 행과 행 사이에 기다란 납(lead)을 끼우는 데서 유래한 말이라고 한다. 활자에서 문자 'M'을 찍는 틀은 정사각형에 가깝다. em square는 뜻으로 글자 크기를 나타내는 단위를 em으로 정했다. 'M'의 가로 길이가 기준이 된다.
CSS에서 조절하는 행-높이(line-height)는 선-상자(line-box)의 높이를 말하는데 행간을 이등분하는 선 사이의 높이와 같다. 행-높이가 글자 크기의 1.5배가 될 때가 가독성이 좋다고 한다. 사람마다 다르겠지만 나는 조금 더 넓어야 보기 좋다. 그래서 이 블로그는 아래와 같이 정했다.
font-size: 1.0em;
line-height: 1.75em;
자세한 것은 링크를 참고하자.
구글 번역으로도 안 나오는 낱말은 내 맘대로 옮겨 본다.
ascender: 위 끝선 descender: 아래 끝선 cap height: 대문자 끝선 x-height: 소문자 x의 높이 baseline: 기준선
http://designwithfontforge.com/en-US/The_EM_Square.html
https://fonts.google.com/knowledge/glossary/line_height_leading
반응형