line-height 란 무엇인가? :: 마이구미

이 글은 CSS 속성 중 하나인 line-height 를 다룬다.
공식 문서에서 볼 수 있는 용도나 사용법이 아닌 좀 더 깊은 이해에 중점을 둔다.
참고한 링크를 통해 스스로 짧게 요약한 내용이다.
https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align#fnref-1

 

line-height 속성은 line-box 의 높이를 지정한다.

주로 텍스트간의 줄 간격을 조절할 때 사용한다.

 

 

우선 간단히 언급하고 넘어가겠다.

line-height 속성에 대해 좀 더 이해하고자 했다면, 다음과 비슷한 맥락의 내용을 고민해본 경험이 있을 것이다.

 

• line-height 속성의 디폴트 값은 normal 이다, 그렇다면 이 값은 무엇을 뜻하는 것인가?
• line-height 속성의 값을 1 또는 1.2 로 지정해서 사용해도 되는가?

 

위의 2가지의 질문을 바탕으로 글의 내용을 이끌어간다.

 

먼저 우리는 font-size 와 line-height 의 값이 상대적이라는 것을 알고 있다.

그리고 여러 폰트들에게 똑같은 font-size 값을 주더라도 각각 다른 사이즈를 갖는다.

그렇다면 어떠한 이유로 각각의 폰트들은 왜 다른 사이즈를 가질까?

이것은 실제 폰트의 매트릭스(metrics) 값을 이해해야한다.

예제는 Catamaran 폰트를 사용하고, 이 폰트의 내부 매트릭스 값들을 다음과 같다.

(폰트는 https://fonts.google.com/specimen/Catamaran 에서 확인할 수 있다)

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

 

https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align#fn-1 참조

 

위와 같은 값들은 사실상 디자이너에 의해 고려되고, 그들에 의해 값이 정해진다.

이를 기반으로 만들어진 폰트는 font-size 의 값을 통해 픽셀로 변환된다.

font-size 값이 100px 이라고 하면 다음과 같다.

https://docs.microsoft.com/ko-kr/dotnet/framework/winforms/advanced/how-to-obtain-font-metrics

 

 

 

실제 내부의 폰트 매트릭스 값의 비율을 유지하고 있는 모습을 볼 수 있다.

이렇게 계산된 높이(164px)를 content-area 라고 불린다.

line-height: normal; 이라면 inline-box 의 높이는 164px 을 의미한다.

우리는 line-height: normal 이 무엇을 뜻하는지 알게 되었다.

 

그리고 "line-height 의 값이 1 또는 1.2 와 같은 수로 지정해도 되는가?" 를 살펴보자.

사용자 컴퓨터에서 어떤 폰트를 사용할 수 있는지 알 수 없기에, 우리는 여러 폰트들을 후보로 선언한다.

 

font-family: a, b, c, d, sans-serif;

 

각 폰트는 서로 다른 높이를 가질 것이다.

그로 인해, 일관된 UI 를 보여주기 위해 line-height 값에 1, 1.2 같은 값을 지정해주기도 한다.

그렇다면, line-height 값에 1을 넣으면 어떻게 될까?

line-height 값이 1 이라는 것은 font-size 의 값을 따라간다는 것이다.

line-box 높이는 100px 이 되어, <span> 태그의 높이는 100px 이 된다.

눈으로는 보이지 않지만, content-area 값은 164px 이기에 line-box 영역보다 더 커서 벗어나버리게 된다.

 

 

line-box 의 값이 content-area 의 값보다 작은 line-box 를 다루는 것은 많은 문제를 초래할 수 있다.

흔히 글자가 짤리는 현상이 나타날 수 있다.

 

다룬 케이스들은 이해를 돕기 위한 것으로써, 이러한 문제들을 경험하지 못했을 수도 있다.

더 자세한 것은 참고한 링크를 보길 바란다.

잘못된 것이 있다면, 댓글로 남겨주시길 바란다.