폰트 하면 떠오르는 단어가 바로 12px 혹은 9pt 입니다. 그만큼 당연시 여겨지는 폰트 크기이며 맑은고딕이 퍼지기 전 까지는 그 누구도 도전할수 없는 부동의 자리이죠. 기본폰트의 문제도 그러하겠지만 디자인이 무조건 먼저 오게되는 웹계에서는 감히 그 누구도 의문을 제기할수 없었으리라 생각됩니다. 이 불문율의 영역 한번 건드려 보겠습니다.
px과 em :)
많이들 들어보셨을만한 em 단위는 간단히 말해서 브라우저에서 담고 있는 기본폰트 사이즈 입니다. M 이 글자 한칸을 나타낸다해서 M을 기준으로 표현되는 단위이죠. 웹표준을 이야기 할 때에 이 em 단위가 자주 등장할만큼 그만이 가진 장점이 있습니다. 그것은 바로 유연성 인데요, 특히 인터넷익스플로러 IE 에서 불변하는 PX 단위가 em 의 장점을 더욱 부각 시키고 있습니다.
px 의 치명적인 단점은 IE 에서는 사용자가 바꾸려 해도 글자의 크기가 변하지 않는다는 것입니다. IE 메뉴에서 보기->글자크기 중 어떠한 크기를 선택하여도 px 단위로 정해진 글꼴크기는 메뉴이름이 무색하도록 불변합니다. 1px 에 모든걸 거는 디자이너에게는 즐거운 단위일지 몰라도 유저 입장에선 커다란 단점이 될수 있다는 것이죠. 물론 타 브라우저에선 가능하지만, 한국 웹서핑은 IE 가 주도하고 있다는것을 볼때에 거의 대부분의 사용자들이 폰트크기 조정을 포기하고 지낸다는 뜻이 되겠습니다.
em 은 우리가 익숙한 12px 이나 9pt 와는 다르게 소수점을 동반합니다. 보통 브라우저의 기본폰트가 16px 이니 많이사용되는 12px 을 나타내려면 0.75em 이라고 표기하게 되는 것이죠. 물론 폰트크기는 12px 말고는 사용되는것이 거의 없으니 0.75em 이라는 것만 알고 있어도 되지만 em 을 기본단위로 선택하는데 있어서는 걸림돌이 될수 있습니다.
em 이 갖는 또 다른 하나의 거부감은 사용하기 까다로움에 있습니다. 바로 기본폰트에 상대적 이다보니 기본점이 어디냐에 따라서 크기가 변화합니다. 쿠키님께서 잘 지적해서 설명하셨는데 간단히 말하면 한 컨테이너 안에 종속되어 있는 부분들을 한꺼번에 불러 폰트크기를 정하게 되면 기준점이 그 컨테이너를 중심으로 바뀌게 되어버리는 것 입니다. 예를들어 <div id="A"> 안에 <p id="ABC"> 가 있다고 할 때에 스타일을 이렇게 주면
#A,#ABC{font-size:0.75em;}
#A 의 폰트크기는 12px 이지만, ABC 의 크기는 A 의 0.75 사이즈, 즉 9px 이 되어버리는 것입니다. 그러므로 폰트크기의 조절을 조심해서 해주어야 하는것이 또 다른 이유입니다.
마지막으로 em 이 갖는 치명적인 약점은 (ie 때문이지만) 인터넷 익스플로러에서 글꼴크기를 한단계 줄였을때에 한단계가 아니라 거의 읽지 못하는 정도로 갑자기 줄어버리는 것입니다. 지금 일모리 블로그의 폰트를 한단계 줄여보세요(보기->글꼴크기->작게) 갑자기 사이트가 확 줄어버리는 것을 확인하실수 있습니다. px 이 인터넷익스플로러에서 사이즈 불변으로 치명적인 약점인것 처럼, em 또한 IE에선 사이즈를 줄였을때에 가독성이 거의 없을정도로 작아져 버린다는 약점이 있습니다. 이 약점은 javascript 로 보충이 가능한 부분이기도 합니다.
em의 사용법
em단위가 생소하여 사용을 안하시는 분들을 위해서 잠깐 em 의 사용법을 나누겠습니다. 말씀드렸듯이 em은 기본글꼴 크기에 맞추어져 있습니다. 보통 브라우저에서는 16px 이니
body{font:0.75em/1.6emGulim,sans-serif;}/* 0.75em 폰트, 그리고 1.6em 의 글자
위아래 간격 즉 line-height 을 표현했습니다
font: 0.75em/160%;
이렇게 쓸수도 있습니다.
*/
이런 식으로 사용이 가능합니다. 머리속으로 계산하기 힘들다 라고 느끼시면 %로 생각하시기 바랍니다. %이지만 100단위가 아니고 1단위라고 보시면 되겠네요. 1.6em 은 160%, 0.8em 은 80% 로 말입니다.
과연 em 사용이 접근성에 최선의 방법인가
현재 이러한 폰트 사이즈 조절이 필요하다고 생각되는 여러 노인협회 홈페이지나 각종 복지 시설 웹사이트들이 px 단위로 제작이 되어 전혀 폰트 사이즈를 조절할수 없게 되어있으며 홈페이지 크기도 1024 해상도를 기준으로 제작되어 폰트크기를 가장크게 할수 있는 800px 의 해상도로 바꾸었을때엔 한번에 사이트를 볼수 없습니다. 이러한 사이트들이 가독성을 높이며 방문자들에게 접근성을 높이려면 화려한 이미지 보다는 네비게이션이나 여러 글들의 크기조절이 가능해야 합니다. 이러한 부분에 있어서 em 단위 사용은 확실히 클라이언트가 제작자에게 문의해볼수 있는 옵션이 될수 있습니다.
위의 사이트뿐만 아니라 컨텐츠를 나눔에 있어서 최고의 자리에 올라서고 있는 블로그의 경우에도 글을 읽고 나누는 부분이 많기때문에 가독성을 높임에 있어서 em 의 사용또한 좋은 선택이 될수 있습니다. 적어도 방문자에게 자유를 준다는것, 사용자가 중심이 된다는것 자체가 웹표준의 의미있는 일이겠죠.
BUT! 하지만 최선이라고 하기엔 문제들도 많으며 디자인이 중시되는 웹세계에서 글꼴의 변화로 인해 레이아웃이 깨질수 있는 부분이나 백터폰트가 아니기에 깔끔하지 못한 변화등은 무시할수 없는 부분일 겁니다. 이 뿐만 아니라 현재 베타로 나와있는 IE7 에서는 폰트크기가 아닌 화면 전체를 확대할수 있는 기능을 담고 있어서 IE 에서 문제가 되던 px 단위의 사용이 괜찮아 지게 됩니다. 오른쪽 밑의 돋보기 아이콘을 누르면 10%에서부터 1000% 까지 확대가 가능하며 오히려 사이트 자체가 확대되기 때문에 더욱 큰 효과를 불러올수 있는 좋은 기능입니다. 몇년안에 px 의 사용도 접근성에 있어서 문제가 되지 않겠죠.