오늘의 문제는 line-height

CSS의 속성인 line-height의 높이 계산 방식과 문제점, 해결 방법.

body(혹은 자신이 포함한 영역)에서 line-height를 지정한 경우, div나 p안에서 span을 이용하여 인라인으로 폰트 크기를 설정해주면, body에서의 line-height가 %나 em이더라도 자동으로 늘거나 줄지 않고, px이나 pt 등 절대 수치인 것 처럼 고정된 줄간격이 되어, 큰 글자가 있을 경우 아랫줄 윗줄과 겹치는 현상이 생긴다.

글꼴이 모두 동일한 문서나, H1, p등 글자 크기와 목적이 다른 것들이 섞여 있다면 문제가 될 것이 없으나, 사용자가 태그를 입력할 수 있는 에디터의 결과 화면인 경우에는 한 문장에서도 사용자가 글꼴 크기를 무작위로 설정할 수 있기 때문에, 이런 줄간격에 대한 문제가 생기면 곤란하기 때문에 잠시 테스트를 해보았다.

몇 가지 테스트를 해본 결과, 내가(회사가;) 의도한 결과는.. 브라우저 자체가 줄간격을 조절할 수 있도록 line-height를 설정하지 않은 경우에 가장 잘 나타났다.

line-height를.. %나 em으로 설정하면, 분명히 글꼴 크기에 따라 줄간격이 만들어져야 하는데 어째서 특정 수치의 줄간격이 생기는 것일까. font에 대한 상대값이 아니라 포함한 영역이 그 자신을 포함한 영역에 설정된 값에 대한 상대값이기 때문이다.

아무튼 정리.

오늘의 문제점

특정 영역에 line-height를 설정한 후 (단위에 상관없이) 한 라인에 무작위의 폰트 크기가 들어갈 경우 line끼리 겹치는 현상이 일어난다.
일반적인 웹 문서에서는 발생하기 힘든 일이나, 사용자가 직접 이것저것 입력하는 텍스트 에디터를 지원하는 곳에서는 좋지 않은 현상이다.

해결 방법

해당 부분이 속한 영역의 line-height 속성을 normal로 해주거나 단위를 적지 않은 숫자로 적어준다.
line-height를 설정하지 않아도 가독성에 문제가 없거나, 의도한 결과에 부합한다면, 큰 문제가 없겠고, 그렇지 않다면 단위를 적지 않은 숫자로 설정을 해줘야 한다.
단위를 적지 않은 숫자 (number)로 line-height를 설정할 경우 줄간의 계산은 다음과 같이 된다.

(폰트와 줄간격을 포함한 크기) = (font의 크기) x (설정한 숫자)

즉, 글꼴의 크기가 24pt이고 line-height: 1.2; 로 설정한 경우, 글꼴의 크기와 줄간의 여백을 더한 높이는 24pt x 1.2=28.8pt가 된다.

 

lineheight
똑같은 조건에서, 좌측은 line-height: 1.6em; 우측은 line-height: 1.6;

 

참고: line-height (줄간, 라인 높이) 속성

inherit
기본적으로 아무것도 설정하지 않으면 상위의 설정값을 상속한다.
normal
브라우저 기본 값의 줄간을 가짐
number
위의 해결 방법에 적었듯이 상위의 설정값이 아닌 글꼴 자체의 크기에 대해 상대값을 가진다.
length 길이
em, ex, px
percentage
% (퍼센트/백분율)

참고 링크

#

목록으로Web Tech