W3C의 CSS 2.1 표준권고안
(번역)에 따르면 크기단위는 절대단위와 상대단위로 구분됩니다. 상대단위로는 em, ex, px가 있는데 이는 기종 간, 플랫폼 간의 호환성을 유지하는 데 유리합니다. 절대단위로는 in, cm, mm, pt, pc가 있으며 출력장치의 물리적 속성을 아는 경우에만 효율적입니다.
em : font-size, 일반적으로 해당 폰트의 대문자 M의 너비를 기준으로 한다
ex : x-height, 해당 폰트의 소문자 x의 높이를 기준으로 한다
px : pixel, 표시장치(모니터)에 따라서 상대적인 크기를 갖는다
in : inch
cm : centimeter
mm : millimeter
pt : point, 1/72inch와 같다
pc : pica, 12point와 같다
절대단위와 상대단위 구분의 필요성이 점차 사라지고는 있지만, 아직도 단위 간 환산문제로 골치 아픈 경우가 많은데 이를 쉽게 도와주는 웹사이트가 있어서 표와 함께 소개합니다. 일반적으로 대부분의 브라우저는 폰트 사이즈의 기본값으로 16px / 1em / 12pt를 가집니다.
웹디자인을 하면서 글꼴(폰트) 크기를 표현하는 방법에는 pt, px, em, % 가 있다. 나는 이미지 사용이나 기존 테이블 레이아웃을 할 때의 습관으로 px 를 주로 사용하는 편이다. 하지만 해외 웹사이트의 대부분이 em 을 사용하며, 유동성 부분 때문에 em이 표준으로 자리잡아가고 있다.REEDdesign 사이트에 이들 수치에 대한 비교표가 있다.
| Points | Pixels | Ems | Percent |
|---|
| 6pt | 8px | 0.5em | 50% |
| 7pt | 9px | 0.55em | 55% |
| 7.5pt | 10px | 0.625em | 62.5% |
| 8pt | 11px | 0.7em | 70% |
| 9pt | 12px | 0.75em | 75% |
| 10pt | 13px | 0.8em | 80% |
| 10.5pt | 14px | 0.875em | 87.5% |
| 11pt | 15px | 0.95em | 95% |
| 12pt | 16px | 1em | 100% |
| 13pt | 17px | 1.05em | 105% |
| 13.5pt | 18px | 1.125em | 112.5% |
| 14pt | 19px | 1.2em | 120% |
| 14.5pt | 20px | 1.25em | 125% |
| 15pt | 21px | 1.3em | 130% |
| 16pt | 22px | 1.4em | 140% |
| 17pt | 23px | 1.45em | 145% |
| 18pt | 24px | 1.5em | 150% |
| 20pt | 26px | 1.6em | 160% |
| 22pt | 29px | 1.8em | 180% |
| 24pt | 32px | 2em | 200% |
| 26pt | 35px | 2.2em | 220% |
| 27pt | 36px | 2.25em | 225% |
| 28pt | 37px | 2.3em | 230% |
| 29pt | 38px | 2.35em | 235% |
| 30pt | 40px | 2.45em | 245% |
| 32pt | 42px | 2.55em | 255% |
| 34pt | 45px | 2.75em | 275% |
| 36pt | 48px | 3em | 300% |
