폰트 하면 떠오르는 단어가 바로 12px 혹은 9pt 입니다. 그만큼 당연시 여겨지는 폰트 크기이며 맑은고딕이 퍼지기 전 까지는 그 누구도 도전할수 없는 부동의 자리이죠. 기본폰트의 문제도 그러하겠지만 디자인이 무조건 먼저 오게되는 웹계에서는 감히 그 누구도 의문을 제기할수 없었으리라 생각됩니다. 이 불문율의 영역 한번 건드려 보겠습니다.

px과 em :)

많이들 들어보셨을만한 em 단위는 간단히 말해서 브라우저에서 담고 있는 기본폰트 사이즈 입니다. M 이 글자 한칸을 나타낸다해서 M을 기준으로 표현되는 단위이죠. 웹표준을 이야기 할 때에 이 em 단위가 자주 등장할만큼 그만이 가진 장점이 있습니다. 그것은 바로 유연성 인데요, 특히 인터넷익스플로러 IE 에서 불변하는 PX 단위가 em 의 장점을 더욱 부각 시키고 있습니다.

px 의 치명적인 단점은 IE 에서는 사용자가 바꾸려 해도 글자의 크기가 변하지 않는다는 것입니다. IE 메뉴에서 보기->글자크기 중 어떠한 크기를 선택하여도 px 단위로 정해진 글꼴크기는 메뉴이름이 무색하도록 불변합니다. 1px 에 모든걸 거는 디자이너에게는 즐거운 단위일지 몰라도 유저 입장에선 커다란 단점이 될수 있다는 것이죠. 물론 타 브라우저에선 가능하지만, 한국 웹서핑은 IE 가 주도하고 있다는것을 볼때에 거의 대부분의 사용자들이 폰트크기 조정을 포기하고 지낸다는 뜻이 되겠습니다.

이에반해 em 단위는 %와 같이 모든 브라우저에서 크기변화가 가능합니다. 유저가 원하는 만큼 변화가 가능하며 사이트 레이아웃까지 %로 제작이 되었다면 유연성이 대단히 높아지겠죠. ‘최대한 방문자가 원하는데로 사이트를 조절하게 해준다’ 라는 방침을 가지고 있다면 이 em 이 큰 매력으로 다가오리라 생각이 됩니다.

왜 em 사용을 꺼릴까?

잘 알려지지 않았다라는 무책임한 이유 말고 좀더 기술적인 측면에서 보겠습니다.

  1. em 은 우리가 익숙한 12px 이나 9pt 와는 다르게 소수점을 동반합니다. 보통 브라우저의 기본폰트가 16px 이니 많이사용되는 12px 을 나타내려면 0.75em 이라고 표기하게 되는 것이죠. 물론 폰트크기는 12px 말고는 사용되는것이 거의 없으니 0.75em 이라는 것만 알고 있어도 되지만 em 을 기본단위로 선택하는데 있어서는 걸림돌이 될수 있습니다.
  2. em 이 갖는 또 다른 하나의 거부감은 사용하기 까다로움에 있습니다. 바로 기본폰트에 상대적 이다보니 기본점이 어디냐에 따라서 크기가 변화합니다. 쿠키님께서 잘 지적해서 설명하셨는데 간단히 말하면 한 컨테이너 안에 종속되어 있는 부분들을 한꺼번에 불러 폰트크기를 정하게 되면 기준점이 그 컨테이너를 중심으로 바뀌게 되어버리는 것 입니다. 예를들어 <div id=”A”> 안에 <p id=”ABC”> 가 있다고 할 때에 스타일을 이렇게 주면 
    #A, #ABC {font-size:0.75em;}

    #A 의 폰트크기는 12px 이지만, ABC 의 크기는 A 의 0.75 사이즈, 즉 9px 이 되어버리는 것입니다. 그러므로 폰트크기의 조절을 조심해서 해주어야 하는것이 또 다른 이유입니다.

  3. 마지막으로 em 이 갖는 치명적인 약점은 (ie 때문이지만) 인터넷 익스플로러에서 글꼴크기를 한단계 줄였을때에 한단계가 아니라 거의 읽지 못하는 정도로 갑자기 줄어버리는 것입니다. 지금 일모리 블로그의 폰트를 한단계 줄여보세요(보기->글꼴크기->작게) 갑자기 사이트가 확 줄어버리는 것을 확인하실수 있습니다. px 이 인터넷익스플로러에서 사이즈 불변으로 치명적인 약점인것 처럼, em 또한 IE에선 사이즈를 줄였을때에 가독성이 거의 없을정도로 작아져 버린다는 약점이 있습니다. 이 약점은 javascript 로 보충이 가능한 부분이기도 합니다.

em의 사용법

em단위가 생소하여 사용을 안하시는 분들을 위해서 잠깐 em 의 사용법을 나누겠습니다. 말씀드렸듯이 em은 기본글꼴 크기에 맞추어져 있습니다. 보통 브라우저에서는 16px 이니

12px = 0.75em
16px = 1 em

이 되겠습니다. 쿠키님께서 표로 만들어 잘 설명해 주시고 계십니다.

해서 em 을 body 에 적용을 시킬때에

body { font: 0.75em/1.6em Gulim, 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 의 사용도 접근성에 있어서 문제가 되지 않겠죠. ^^;

최근 부모님께서 인터넷 쓰신다고 열씸이신데 px 로 이루어진 한국 사이트들, 글꼴크기 조절이 안되니 가끔 읽으시는데에 불편하신거 같아 안타깝습니다. em 이 최선의 방법일까요?

아마도 그럴지도 모릅니다. 지금은 말이죠.

Updated: 2007/2/8 추가 합니다.

0.01의 묘미

위에서도 0.75em은 보통 12px과 흡사하다고 했습니다만, 브라우저에서 1보다 작은 수를 인식 못하는 경우가 있습니다. 해서 그 차이를 매꾸고자 0.76을 쓰게 되면 바르게 인식이 되죠. 0.76em 바로 0.01의 효과 입니다 ^^

덧글과 타 의견들

nmind - Em Calculator라는 편리한 EM 계산 사이트도 있습니다

hooney - 개념적으로 1em=16px가 아닙니다. 1em=브라우저에서 정한 기본 글자 크기죠.

대부분의 브라우저가 기본 글자 크기를 16px로 설정되어 있지만, 사용자는 이 설정을 얼마든지 바꿀 수 있습니다.

그리고, 이 설정을 바꿔서 줌 브라우징과 같은 사용자가 웹사이트 디자인을 조정할 수 있도록 하는 것이 em과 같은 유동형 크기 단위의 장점이죠.

마지막으로 모니터 해상도의 단위가 px인 이상, px가 유동형 단위가 될리는 없다고 봅니다. ^^

일모리 - hooney// 네 맞습니다. 하지만 브라우저에선 보통 16px=1em 이라는 것이죠. 기준점은 어느정도 잡아야 하니까요. 이제 그 설정을 바꿀수 있는것이 바로 em 의 유연성의 핵심이라고 생각합니다. px 이 일단 상대적인 단위인데다 앞으로의 트랜드를 볼때에 유동형으로 쓰이지는 않아도 유동할수 있도록 가능해질겁니다. 이미 그렇게 되고 있는 상황이죠. 사용자들이 다양한 해상도를 쓰고 있기 때문에 해상도에 의존하는 브라우저에서의 px 단위를 유동형으로 가능케 하는것은 어쩌면 이미 예견된 일일수도 있겠다는 생각을 해봅니다.

Justin - em이라는 단위도 있습니다만, 어차피 상대적인 크기라면 그저 x-small/small/medium/large/x-large 등의 단위를 쓰는건 어떨른지요?

제가 지난번에 글 하나 올려놓은 적이 있는데, 이게 영문에서는 아무 문제가 없이 작동을 합니다만 한글폰트가 뒤섞이면 문제가 되더라구요. 그렇다면 em으로 사용하면 그문제가 해결이 되려나요? ^^

리피오 - 텍스트 크기를 고정하지 않았더니, 자기 브라우저의 텍스트 크기가 ‘크게’로 되어 있는 줄은 모르고 ‘이 사이트는 글자 크기가 너무 커’라고 불평하는 사람들이 있더라는 글을 봤습니다. 그냥 우스개 소리로 넘기기엔 생각해볼 꺼리가 많더군요.

그래도 이번에 사이트 하나 만들면서 레이아웃 폰트 모두 %로 정의해 봤는데, %로 정의되는 경우에는 종속성 때문에 조금 번거롭더군요.

ps. 한번 들러봐 주세요. ^^; http://www.virss.com

턱스 - em쓰다가 모두 다시 px로 바꿧다죠…
ie를 많이 쓰고, 거기다 폰트도 고정 사이즈로 모두 정해져 있는 우리나라 웹사이트 환경탓에 사용자는 자기 브라우저의 글꼴 크기가 어떻게 설정되어있는지 개념조차 상실되어있고, 그걸 바꾼다는것조차 생각 못하는 사람이 상상하는것보다 엄청나게 많습니다.
그러다 보니 첨 접속한 사이트의 글씨가 유별나게 크다던지, 못읽을 정도로 작다던지 하게 되면 크기의 유연성이 주는 이로움보단 불편함이 더 크게 다가올것입니다. (물론 이렇게 보인다면 첫 방문자는 바로 창을 닫기 마련이지만..)

글씨가 너무 작게 나와서 못읽는 것보단 일반 12px 사이즈가 작아 안보일경우 돋보기 사용한다면, 적어도 읽을수는 있으니까요..

지금 생각해도 em에서 px로 다시 돌아간건 최선의 선택이라고 봅니다. 아직까진 말이죠 ^^

나니 - 리피오님/ 종속성 문제는 em이나 %가 상대적 수치라는 점 때문에 발생하는 어쩔 수 없는.. (주절주절)

일모리 - 리피오님과 턱스님 말씀에 공감하고 있습니다. 상대적으로 변화하는 폰트에게는 적어도 사이트를 처음으로 접속시에 universal 적으로 시작되는 그 시작점이 있는것이 큰 부분을 차지한다는 말씀이시군요.

그냥 좀만 참고 IE7 퍼질때까지 기다리는게 역시 최선인가요 ㅡㅜ;;;

kukie - 상대적 단위 개념에서의 em을 굉장히 사랑하지만, 실제 작업에서는 100% 활용할 수 없는 것이 사실입니다.

작업을 하다보면.. pt, px, em이 서로 미세한 차이를 보이는데, 그 미세함이 큰 차이로 다가오는 경우가 꽤 생겨서..

개인적인 작업이 아닌 경우엔 HML 기본 설정을 9pt로 해두고, 다른 부분에서는 pt와 em을 섞어서 사용하고 있어요.

단위를 하나로 통일하는 것이 관리하기는 더 편하겠지만, 그렇지 않을 경우도 꽤 있고..

그리고, 기본 글꼴을 %나 em으로 해두면 어른들은 크게 불편해 하더라구요. 우연히 글자크기가 “크게”로 되어 있다면, ‘이 사이트는 왜이렇게 글자가 커’ 하고 웃고 넘어가지만, 또 우연히 “가장 작게”로 되어 있을 때는 이 사이트에 오류가 있다고 생각해 버립니다 ㅎㅎ.
브라우저 자체에 글자 크기를 바꾸는 기능이 있다는 것을 가르쳐 드리는 것도 여러가지 해결책 중에 하나가 될 수 있겠지만, 따로 교육 시키지 않고 뭔가 더 멋진 방법을 찾아 낼 수 있지 않을까 하는 희망;을 가지고 있답니당

손님 - 요새 블로그들 돌아다녀보면 웹표준, 접근성 이런 얘기들이 많은데, 제발 웹표준 이전에 어지러운 디자인 좀 정리하고 기본 글쓰 크기나 좀 늘려놨으면 좋겠다는 곳이 한두곳이 아닙니다. (일모리님한테 하는 얘기 절대 아님) validator.w3.org 검사 통과해서 로고 다는게 중요한게 아니라 정말 그곳을 방문하는 사람들이 편하게 볼 수 있어야죠.
제가 가장 글 읽을 때 편하고 집중이 되는 곳중에 하나를 예를 들어보면.. 많이들 아시는 블루문님의 블로그(http://www.i-guacu.com) 입니다. 거추장스런 이미지나 눈에 거슬리는 색도 없이 평범하면서, 글씨 크기가 크고 본문의 폭이 일반책과 비슷해서 한줄 읽고 다음줄로 내려가는 리듬이 읽기에 적당합니다. 물론 제 취향적인 부분일 수도 있겠지만 어쩌다 몇번 읽었던 가독성에 관한 연구 비스무리한 글들에 비춰봐도 그리 틀린 얘긴 아니라 생갑합니다.
보기엔 안 좋아도 환한 흰색보다 배경을 은은한 무채색 톤으로 해서 보는 사람 눈 덜 피로하게 해주고, 아기자기한 모양도 좋지만 1024해상도를 넘겨 쓰는 사람들이 수두룩한 지금엔 글씨 크기를 조금 크게 해주는게 기술적인 웹표준보다 쉽고 진정한 배려가 아닐까요.

계속 의견 부탁드립니다.