CSS 단위별 폰트사이즈(px,pt,em,%)

CSS 단위별 폰트사이즈(px,pt,em,%)

퍼블리싱/HTML&CSS 2012/01/12 14:18

일반적으로 많은 사람들이 em단위를 쓰면 해상도에 따라서 크기가 달라진다고 오해하는 경우가 많습니다.

하지만 em을 쓰는 이유는 IE6과 같이 zoom기능이 없는 브라우저에서 브라우저의 글꼴 크기 옵션을 조절했을 때 

동작하게 하기 위함입니다.

최근의 브라우저들이 모두 zoom 기능을 지원하고 있는 덕분에, 사실 em대신 px을 사용해도 무방합니다. 

em으로 취할 수 있는 이득이 거의 없기 때문이지요.

하지만 Responsive Web Design을 추구하는 작업을 하시거나,

화면 크기에 따라서 동적으로 body의 font-size를 조절하는 특수한 작업을 하실 경우에는

em을 활용하여 scaleable한 UI를 구성할 수도 있습니다.

또한 해외 웹사이트의 대부분이 em 을 사용하며, 유동성 부분 때문에 em이 표준으로 자리잡아가고 있습니다.

pt :  points(포인트) – 1포인트는 0.72인치

px :  pixels(픽셀) – 화면 해상도에 대한 상대크기

%, em – 지정되거나 상속받은 (또는 상위 엘리먼트)에 대한 백분율 상대 크기

pixels ems perecent 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
Posted in 개발참고

BMS새소식 받기

이메일을 남겨주시면, BMS관련 새소식을 전해드립니다!!

고객센터

문의하기 오시는길