본문 바로가기
SKIN & CSS

행-높이(line-height)와 행간(leading)

글: 논어일기 2023. 1. 18.
반응형

글자 크기와 마찬가지로 행 높이(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: 기준선

행간(leading)
엑스-높이(x-height)

http://designwithfontforge.com/en-US/The_EM_Square.html

 

Design With FontForge: The EM Square

The EM Square — Also called the ‘em size’ or ‘UPM’. In a font, each character is fitted into its own space container. In traditional metal type this container was the actual metal block of each character. The height of each character piece was un

designwithfontforge.com

https://fonts.google.com/knowledge/glossary/line_height_leading

 

Line height & leading – Fonts Knowledge - Google Fonts

The vertical space between two lines of type, measured from the baseline of one line of type to the baseline of the next.

fonts.google.com

 

반응형