상상공장 스킨공작소

픽셀 단위의 폰트 사이즈가 왜! (왜 나만 갖고 그래~)
저 처럼 눈이 나쁜 분들이나, 나이 많은 어르신들에게 12px나 혹은 그것보다 더 작은 폰트 사이즈는 버거울수 있습니다. px, pt를 사용함으로서 IE나 FF에서 제공되는 좋은 기능을 원천적으로 못쓰게 되는거죠.

그럼 어떤 폰트 사이즈 단위를~~~
브라우저에서 제공되는 폰트크기 메뉴를 사용할수 있게 하려면 절대크기 키워드나 상대 길이단위를 사용하면 됩니다. 12px와 비슷한 단위를 찾아 보면 절대크기 키워드의 small 이나 0.75em 이 비슷한 모양을 하고 있습니다.

모양이 모두 조금씩 틀려욧!
디자이너들이 선호하는 픽셀크기 단위를 포기 하고, 절대크기 키워드를 사용한다고 했을때 두 단위 사이의 gap이 크다면 난감한일이 아닐 수 없습니다. 이미지에서 볼수 있듯이 100%일치한다고 볼수 없습니다.
이를 비교해 보면 일단 같은 브라우저 내에서 12px와 0.75em은 완벽하게 일치하지만 small 키워드는 자간이 훨씬 넓습니다.자간은 매우 민감한 문제입니다. 텍스트가 많은 페이지에서 자간을 small로 했을때 흔히 쓰는 말로 "없어" 보입니다.
그럼 small은 포기? ... ^^ 약간의 조정이 필요하겠죠
자간이 문제였으니까.. 자간을 조정해 보겠습니다. 아.. 그런데. 문제가 하나 있습니다. 자간을 표현하는 방식이 브라우저마다 틀립니다. 뭐가 이렇게 걸리는게 많은지.. - -;;;


비교해 보겠습니다.
아래 이미지에서 처럼 ie에서는 소수점 자간을 표현하지 못하고 있습니다.
결국 letter-spacing:0; 이나 letter-spacing:-0.5px;나 같다는 말이죠.


꽁수를 이용하면 방법이 있을지는 모르겠으나 일단 소수점을 사용하지 않는걸로 하고, 결론을 내리면 다음과 같습니다.

각자의 웹페이지를 제작하시는 분들 판단에 맡기겠지만, 저는 굳이 방탄웹에서 사용했듯이 small 단위를 사용하지 않고, em 단위를 사용하려고 합니다.(아마 방탄웹이 영문활자를 기본으로 했기때문에 small을 사용해도 문제가 없을수도 있겠죠.)

그동안 폰트 단위때문에 혼돈이 많았는데 이렇게 정리해놓고 보니 속이 다 시원하네요.. ^^


위의 결론을 도출하기 위한 과정에 나온 html 문서입니다. 참고하셔요~~