오늘의 문제는 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를 설정할 경우 줄간의 계산은 다음과 같이 된다.
[su_note](폰트와 줄간격을 포함한 크기) = (font의 크기) x (설정한 숫자)[/su_note]
즉, 글꼴의 크기가 24pt이고 line-height: 1.2; 로 설정한 경우, 글꼴의 크기와 줄간의 여백을 더한 높이는 24pt x 1.2=28.8pt가 된다.

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

참고 링크

• W3C : CSS2 – 라인 높이 계산: ‘line-height’와 ‘vertical-align’ 속성