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 |
