[ CSS ] line-height 단위 알아보기

📍 line-height 단위 알아보기

css로 line-height를 작성하다 보면 값의 단위가 각기 다른 모습을 볼 수 있다. 가령, normal을 사용하거나, number 타입을 사용하거나, em을 붙이는 경우가 있다. 나는 주로 px를 사용하지만 동료들은 다른 단위를 사용하는 경우가 있어 기초적인 내용이지만 지금 기억해 두면 추후에 공식문서를 찾는 시간을 아낄 수 있지 않을까 하는 마음에 글로 남긴다. (내용은 MDN을 참고했다.)

 

line-height는 주로 text line 사이의 거리를 조절 할 때 사용한다. line-height의 단위는 4가지가 있다.

/* 
 * 1. <number>: line-height: 2.3;
 * 2. <length>: line-height: 3em;
 * 3. <percentage>: line-height: 50%;
 * 4. normal: line-height: normal;
 */

먼저 normal은 user-agent에 의존한다. Firefox를 포함한 데스크탑 브라우저에서 default값으로 대략 1.2의 값을 사용한다. (요소의 font-family에 따라 다르다.)

 

두번째로 <number> 타입이다. unit은 붙지않고 숫자 형태만 사용하는데, 자신의 font-size * number를 하면 된다. 4가지 방법 중 선호하는 방식이고, inherit 속성으로 인해 예기치 못한 결과를 피할 수 있다.

 

세 번째로 <length>이다. box height를 계산하는 데 사용되며, em은 예기치 못한 결과를 생산한다. (em단위는 부모 요소의 글꼴 크기를 의미하는데, 부모 font-size * em로 설정된다.)

 

마지막으로 <percentage>이다. 마찬가지로 예기치 못한 결과를 생산한다.(percentage는 자신의 font-size를 기준으로 한다. (Relative to the font size of the element itself.))

728x90

💡 Prefer unitless numbers for line-height values

앞서 em과 percentage는 예기치 못한 결과를 생산한다고 했는데, 왜 그런지 알아보기 위해 예시를 가져왔다.(MDN에 있는 예시를 코드펜으로 작성했다.)

See the Pen line-height by an (@YWTechIT) on CodePen.

 

첫 번째 div의 line-height는 잘 나오는데, 두 번째 div의 line-height는 찌그러진 것을 알 수 있다. 그 이유는 첫 번째 div의 line-height를 계산하면 h1의 font-size인 30px * 1.1 = 33.3이 나오게 되지만, 두 번째 div의 line-height는 h1의 font-size가 아니라 부모(.box)의 font-size를 곱하기 때문에 15px * 1.1 = 16.5가 된다. 그렇기 때문에 line-height를 사용할 땐 단위가 없는 값을 선호하게 되는 것이다.

💡 접근성 고려(Accessibility concerns)

주요 단락 내용에 line-height는 최소 1.5를 사용하세요. 이것은 난독증처럼 인지 문제가 있는 사람들 뿐만 아니라 저시력자들에게 도움이 될 것입니다. text를 크게 보기 위해 페이지를 확대한 경우, 단위가 없는 값을 사용하면 줄 높이가 비례적으로 조정됩니다.

 

Reference

1. line-height - MDN
2. Values_and_units - MDN