bluebrown

CSS에서 사용하는 절대적 길이 단위는 크게 네 가지가 있다. 그 하나는 in(inches), pc(picas), pt(points)이다. 1 inch = 6 picas = 72 points이다. 일반적으로 글자의 크기는 포인트 단위로 나타내어지기 때문에 자주 쓰인다. 또 하나는 cm, mm이다. 이 단위는 거의 사용되지 않으므로 넘어가기로 하자. 또 다른 단위는 px(pixels)가 있다. 이것은 화면 장치의 최소 표시 길이를 표시한다.

마지막 남은 단위는 em과 ex이다. em은 M의 활자 가로 길이(set width)를 뜻하고 ex는 x의 높이(x-height)를 뜻한다. 역사적으로 M의 가로 길이는 활자의 높이 - 대문자의 세로 길이가 아님에 주의하라 - 와 같았기에, em은 일반적으로 활자의 크기를 뜻하게 되었다. 현재, TrueType이나 CSS에서는 em을 활자의 크기(body size, or font-size)로 정의한다. em은 절대적인 길이가 아니다. 12pt 서체의 1em은 12pt이며, 11pt 서체의 1em은 11pt이다. 익스플로러에서는 모든 절대적인 길이 (in, pc, pt, cm, mm, px)는 글자 확대가 적용되지 않고, 오직 em 단위에만 글자 확대가 적용이 된다. 하지만 파이어폭스에서는 모든 단위에 글자 확대가 적용되므로 유의하여야 할 것이다. 그런 의미에서 CSS의 서체 크기(font-size) 정의는 em으로 하는 것이 좋다고 생각한다. 익스플로러와 파이어폭스 모두에게 글자 확대가 적용되기 때문이다. 참고로 두 브라우저 모두 다 1em은 12px로 정의하고 있다.

x-height는 활자 높이가 같더라도 서체마다 다르다. [2]에서 보면 알 수 있듯이 Verdana는 Times New Roman에 비하여 x-height가 높은 편이다. 이를 보정하기 위해 CSS2에서는 'font-size-adjust'라는 속성을 제공해주고 있지만, 브라우저에서 이것을 지원하는지는 아직 확인하지 못했다.

두 브라우저 전부 맘에 들지 않는 사실은 줄간(line-height)를 서체 크기(font-size)와 동일하게 설정하면 위아래로 어느정도 글씨 크기가 잘려나간다는 사실이다. 서체의 크기는 역사적으로 활자의 크기와 같도록 정의되어 있기에, 줄간이 100%인 경우 서체가 절대 잘려나는 일이 없어야 한다.

1. [1] CSS2의 길이 단위 정의
2. [2] CSS2의 서체 크기 속성