오늘의 문제는 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
% (퍼센트/백분율)

참고 링크

  • 너무나 좋은 정리!

  • Jerome’s Keywords 플러긴을 사용하면서 글씨가 겹쳐지게 출력되었으면 했는데 line-height를 이용하면 되는군요. 한번 시도해봐야 겠네요.

  • jay

    어제 말씀하신게 이런 얘기였군요 🙂

  • 저런걸해봐야겠다생각하면서도 잘안하게 되는데;(사실아는것도별로없;; )
    아무튼 너무나도 좋은걸요;

  • 아웅 잠깐 안온 사이에 글이 많이 늘었네요.
    리더를 안쓰다보니 이럴 땐 무슨 글이 있을까 두근두근 거립니다. ^^

    현재 브라우저에 따라 미묘하게 차이나는 부분 중 하나ㄱ 저 줄간격인 것 같습니다. 가급적 건드리지 않는 게 좋다고 하던데 사실 조절하는 정책을 잘 세우면 가독성이 꽤 높아지더라구요. 그런데 어떤 규칙을 세워야할지 몰라서 헤맸는데.. 덕분에 잘 배워갑니다.

    여기 올 때마다 생각하는 거지만 알리는 내용을 적을 때 부담 없이 간략하게 예제와 함께 핵심만 전달하는 것도 좋은 방법이라는 느낌이 듭니다. 저도 좀 더 글 내용의 핵심만을 전달할 수 있도록 노력해야겠군요. orz

  • 나 신기한데 발견했어…
    http://nonull.com/screenshotsafari/

    사파리에서 어떻게 보이는지 스크린샷 잡아주는 사이트래… 가끔 윈도우에서 작업할때 매킨토시에선 제대로 보이려나 테스트해볼 때 좋을 듯 ㅋㅋ

  • http://nonull.com/dont-stop-me-now/

    저것도 맘에 든다… 워드프레스 mp3 확장기능이래!! 내 이 기쁜 소식을 전하려! msn 에서 찾았는데 없구만 -_-!!

  • smilelady

    오~~찾고 찾던 정보 감사합니다..^^