일반적으로 텍스트 크기를 측정하는 단위를 구분하는 두 가지 주요 단위가 있다.
- px 크기
- em 크기
px로 크기 조정
웹 초창기에는 픽셀을 사용하여 텍스트 크기를 조정했기에 꽤나 안정적이고 일관적이었지만 안타깝게도 Internet Explorer 사용자는 심지어 IE9에서도 글꼴 크기를 늘리거나 줄이는 브라우저 기능을 사용하여 텍스트 크기를 변경할 수 없었다. 사이트의 유용성에 대해 우려하는 사람들에게 이것은 큰 문제였다. 최신 버전의 IE에는 페이지에 있는 모든 항목의 크기를 늘리는 확대 / 축소 기능이 포함되어 있었지만 이 기능은 대부분의 다른 주류 브라우저에서도 사용할 수 있다. 이것은 문제를 어느 정도 완화하는 데 도움이 되었고 px 기반 레이아웃이 선호하는 일관성을 제공하여 사용자는 접근성이 문제가 되지 않는다는 관점을 조정하기에 충분하다.
em으로 크기 조정
IE에서 텍스트 크기를 조정할 수 없다는 점은 왜 망한 브라우저인지 알게 해주는 단적인 예로 볼 수 있었다. 하지만 이것을 해결하기 위해 em 단위를 사용할 수 있다. 2004년에 도입된 이 기술은 백분율을 사용하여 본문의 기본 글꼴 크기를 수정한다. 이것은 1em이 기본 16px 대신 10px와 같도록 조정한다. 글꼴 크기를 14px에 해당하도록 설정하려면 1.4em으로 설정한다.
body { font-size:62.5%; }
h1 { font-size: 2.4em; } /* =24px */
p { font-size: 1.4em; } /* =14px */
li { font-size: 1.4em; } /* =14px? */em 기반 글꼴 크기 조정의 문제점은 글꼴 크기가 복합된다는 것이다. 목록 내의 목록은 14px가 아니라 20px이다. 한 단계 더 깊이 들어가면 27px이다. 이러한 문제는 복합 효과를 피하고 1em을 사용하도록 자식 요소를 선언하여 해결할 수 있다.
body { font-size:62.5%; }
h1 { font-size: 2.4em; } /* =24px */
p { font-size: 1.4em; } /* =14px */
li { font-size: 1.4em; } /* =14px? */
li li, li p /* etc */ { font-size: 1em; }웹브라우저 경쟁에서 패배한 인터넷 익스플로러의 서비스 종료로 더 이상 기준이 되지 않으므로 인터넷 익스플로러의 구동 여부는 전혀 신경 쓰지 않아도 된다.
반응형 사이트에서는 em 기반 글꼴 크기 조정의 복합적인 특성은 매우 불편하다. 그래서 고안된 CSS3 새로운 형태의 반응형 글꼴 크기 변환 기준이 바로 「rem」단위
rem으로 크기 조정
CSS3는 "root em"을 의미하는 rem 단위를 포함하여 몇 가지 새로운 단위를 도입한다. rem이 어떻게 작동하는지 살펴보자. em 단위는 부모의 글꼴 크기에 상대적이므로 복합 문제가 발생하였다. rem 단위는 루트 또는 html요소에 상대적이다. 즉, html요소에 단일 글꼴 크기를 정의하고 모든 rem 단위를 그 비율로 정의할 수 있다.
html { font-size: 62.5%; }
body { font-size: 1.4rem; } /* =14px */
h1 { font-size: 2.4rem; } /* =24px */px를 사용하는 것과 유사한 방식으로 rems의 크기를 편리하게 조정할 수 있도록 기본 글꼴 크기를 62.5 %로 정의하고 있다. 그러나 브라우저 지원이 매우 뛰어나고 훌륭하다는 사실에 더욱 놀랄 것이다. Safari 5, Chrome, Firefox 3.6 이상, 심지어 Internet Explorer 9에서도 이를 지원한다. (가난한 Opera (최소한 11.10까지)는 아직 rem 단위를 구현하지 않는다.)
rem 단위를 지원하지 않는 브라우저는 어떻게 할까? 이전 버전의 Internet Explorer 사용자가 여전히 텍스트 크기를 조정할 수 없다는 점에 신경 쓰지 않는다면 px를 사용하여 대체를 지정할 수 있다 (IE7 및 IE8에서는 여전히 페이지 확대 / 축소가 있음). 이를 위해 먼저 px 단위를 사용하여 글꼴 크기를 지정한 다음 rem 단위를 사용하여 다시 정의한다.
html { font-size: 62.5%; }
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1 { font-size: 24px; font-size: 2.4rem; } /* =24px */px → rem 단위 계산
| px | rem | px | rem |
| 8 px | .5 rem | 25 px | 1.563 rem |
| 9 px | .5625 rem | 26 px | 1.625 rem |
| 10 px | .625 rem | 27 px | 1.688 rem |
| 11 px | .6875 rem | 28 px | 1.75 rem |
| 12 px | .75 rem | 29 px | 1.813 rem |
| 13 px | .8125 rem | 30 px | 1.875 rem |
| 14 px | .875 rem | 31 px | 1.938 rem |
| 15 px | .9375 rem | 32 px | 2 rem |
| 16 px | 1 rem | 33 px | 2.063 rem |
| 17 px | 1.063 rem | 34 px | 2.125 rem |
| 18 px | 1.125 rem | 35 px | 2.188 rem |
| 19 px | 1.188 rem | 36 px | 2.25 rem |
| 20 px | 1.25 rem | 37 px | 2.313 rem |
| 21 px | 1.313 rem | 38 px | 2.375 rem |
| 22 px | 1.375 rem | 39 px | 2.438 rem |
| 23 px | 1.438 rem | 40 px | 2.5 rem |
| 24 px | 1.5 rem |
※ 소수점 「. 」 앞자리가 “0” 단위일 경우, 제거 사용이 가능하며 세계 표준 CSS 사용법에서 권장하는 단위 사용 표기법이다.