반응형
필자는 아직도 퍼블리싱을 할 경우 em과 px을 놓고 어떤것을 사용할지 고민할때가 많습니다. ie6에서 제공하지 않는 zoom 기능 때문에 사용자를 위해 em을 써야할지, 디자이너와 개발자의 편리함을 위해 em을 써야 할지 자주 고민을 합니다.
일반적으로 많은 사람들이 em단위를 쓰면 해상도에 따라서 크기가 달라진다고 오해하는 경우가 많습니다. 하지만 em을 쓰는 이유는 IE6과 같이 zoom기능이 없는 브라우저에서 브라우저의 글꼴 크기 옵션을 조절했을 때 동작하게 하기 위함입니다.
최근의 브라우저들이 모두 zoom 기능을 지원하고 있는 덕분에, 사실 em대신 px을 사용해도 무방합니다. em으로 취할 수 있는 이득이 거의 없기 때문이지요.
하지만 Responsive Web Design을 추구하는 작업을 하시거나, 화면 크기에 따라서 동적으로 body의 font-size를 조절하는 특수한 작업을 하실 경우에는 em을 활용하여 scaleable한 UI를 구성할 수도 있습니다. 또한 해외 웹사이트의 대부분이 em 을 사용하며, 유동성 부분 때문에 em이 표준으로 자리잡아가고 있습니다.

편리한 작업을 위한 CSS 단위별 폰트크기(px, em, %, pt)

Pixels EMs Percent Points
6px 0.375em 37.5% 5pt
7px 0.438em 43.8% 5pt
8px 0.5em 50% 6pt
9px 0.563em 56.3% 7pt
10px 0.625em 62.5% 8pt
11px 0.688em 68.8% 8pt
12px 0.75em 75% 9pt
13px 0.813em 81.3% 10pt
14px 0.875em 87.5% 11pt
15px 0.938em 93.8% 11pt
16px 1em 100% 12pt
17px 1.063em 106.3% 13pt
18px 1.125em 112.5% 14pt
19px 1.188em 118.8% 14pt
20px 1.25em 125% 15pt
21px 1.313em 131.3% 16pt
22px 1.375em 137.5% 17pt
23px 1.438em 143.8% 17pt
24px 1.5em 150% 18pt

단위별 폰트의 특징

pt :points(포인트) - 1포인트는 0.72인치
px :pixels(픽셀) - 화면 해상도에 대한 상대크기
%, em - 지정되거나 상속받은 (또는 상위 엘리먼트)에 대한 백분율 상대 크기

반응형

+ Recent posts