[번역] rem으로 글자 크기 지정하기

, ,

워드프레스의 새로운 테마인 Twenty Twelve의 style.css를 살펴 보면 rem이란 단위가 사용된 것을 알 수 있다.

테마 맨 앞부분의 설명을 보면 아래와 같은 설명을 접할 수 있다.

아마 CSS 전처리기를 사용한 모양인데, $rembase라는 변수에 14를 할당하고 $line-height에 24를 할당해 rem값 계산에 사용했다는 것을 설명하고 있다.

글자 크기와 줄간격 스타일, 마진, 패딩 등을 픽셀 단위로 먼저 선언한 뒤 rem 단위로 덮어쓰고 있는데, rem 단위를 지원하지 않는 브라우저가 아직 있을 때의 일로 요즘은 이럴 필요가 없다.

/* =Notes
--------------------------------------------------------------
This stylesheet uses rem values with a pixel fallback. The rem
values (and line heights) are calculated using two variables:

$rembase:     14;
$line-height: 24;

---------- Examples

* Use a pixel value with a rem fallback for font-size, padding, margins, etc.
	padding: 5px 0;
	padding: 0.357142857rem 0; (5 / $rembase)

* Set a font-size and then set a line-height based on the font-size
	font-size: 16px
	font-size: 1.142857143rem; (16 / $rembase)
	line-height: 1.5; ($line-height / 16)

---------- Vertical spacing

Vertical spacing between most elements should use 24px or 48px
to maintain vertical rhythm:

.my-new-div {
	margin: 24px 0;
	margin: 1.714285714rem 0; ( 24 / $rembase )
}

---------- Further reading

http://snook.ca/archives/html_and_css/font-size-with-rem
http://blog.typekit.com/2011/11/09/type-study-sizing-the-legible-letter/

친절하게도 워드프레스 테마 팀이 ‘더 읽을 거리’의 링크를 제공해 줬으니 그걸 번역해 보기로 했다.

두 링크 중 위에 있는 링크를 번역한 거다. 원문은 FONT SIZING WITH REM 이다. 지금부터 번역 시작.


요즘까지도, 글자 크기 측정 단위를 뭘로 결정할지는 뜨거운 주제가 될 수 있다. 불행히도, 다양한 장단점이 있고, 그래서 약간 결함이 있는 다양한 방법들이 있는 것이다. 약간 결함이 있는 것 중에 무엇을 사용하는 것이 가장 바람직한지가 문제일 뿐이다.

사람들은 주로 다음 두 가지 방법을 사용한다.

  1. px로 사이즈 지정
  2. em으로 사이즈 지정

내가 마법 같은 세 번째 방법을 소개할 텐데, 그 전에 위의 두 가지 접근법을 살펴 보자.

px로 사이즈 지정하기

웹 초기에는 글자 크기를 지정하기 위해 픽셀을 사용했다. 픽셀은 견고하고 한결같다. 불행히도, [픽셀을 사용해 디자인할 경우] 인터넷 익스플로러(IE) 사용자는 —심지어 IE9 에서도 — 브라우저 기능을 이용해서 글자 크기를 조절할 수 없다. 이건 사이트 사용성을 꽤 희생하는 거다. IE의 최근 버전은 다른 주요 브라우저들처럼 페이지 전체의 크기를 확대 축소할 수 있는 기능이 있다. 그래서 어느 정도 문제는 완화됐다.

나는, 개인적으로, 픽셀 기반 레이아웃을 더 선호했다. 픽셀 기반 레이아웃은 일관성을 제공하기 때문이다. 접근성 문제를 극복할 수 있는 툴도 충분하고 말이다. 하지만 난 입장을 바꿨다. 나머지를 알아 보자.

em으로 사이즈 지정하기

IE에서 글자 크기를 제대로 조절할 수 없는 점은 계속 불만이었다. 그걸 위해서, 우리는 em 단위를 사용할 수 있다. 리차드 루터의 글, em을 사용해서 글자 크기를 지정하는 방법은 아마 이 접근법에 관해 처음 읽은 글일 것이다. 꽤 오래 전인 2004년에 말이다. (와우, 7년이나 지났다.)

이 방법에서는 퍼센트를 이용해 body의 기본 글자 크기를 고친다. 이렇게 하면 원래는 16px인 1em이 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 기반으로 글자 크기를 지정할 때 이런 복잡성은 불만일 수 있다. 그럼 또 뭘 할 수 있을까?

rem으로 사이즈 지정하기

CSS3는 몇 가지 새로운 단위를 소개했다. 그 중에는 “root em”을 의미하는 rem이라는 단위도 있다. 아직 졸리지 않다면, rem이 어떻게 작동하는지 살펴 보자.

em 단위는 부모 요소의 글자 크기에 상대적인 크기다. 그래서 복잡한 문제가 생기는 것이다. rem 단위는 최상위 요소 혹은 html 요소 대비 상대적인 크기다. 이것이 의미하는 건, html 요소에 글자 크기를 한 번 지정하고, 나머지에서는 그 비율에 따라 글자 크기를 지정하면 된다는 것이다.

html { font-size: 62.5%; } 
body { font-size: 1.4rem; } /* =14px */
h1   { font-size: 2.4rem; } /* =24px */

나는 기반이 되는 글자 크기를 62.5%로 지정했다. 이렇게 하면 px과 비슷하게 단위를 사용할 수 있기 때문이다.

하지만 참담한 수준의 브라우저 지원을 걱정해야 하지 않나?

브라우저 지원이 꽤 괜찮다는 걸 알면 놀랄 거다. 사파리5, 크롬, 파이어폭스 3.6 이상, 그리고 심지어 인터넷 익스플로러 9도 이걸 지원한다. rem을 사용하면 IE9이 글자 크기 조절을 지원한다는 것도 좋은 소식이다. (아아, 불쌍한 오페라는 (최소한 11.10까지는) rem 단위를 아직 구현하지 않았다.)

rem 단위를 지원하지 않는 브라우저를 위해 뭘 해야 할까? 우리는 대체제로 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 */

와우! 이제 우리는 모든 브라우저에서 일관되고 예측가능한 크기 지정을 할 수 있다. 그리고 모든 주요 브라우저의 최신 버전에서 글자 크기 조정을 할 수 있다.

카테고리 글 목록 👉

, ,

대표글

“[번역] rem으로 글자 크기 지정하기”에 대한 5개의 응답

  1. 본문에 오타?가 있네요. rem은 room em이 아니라 root em을 의미합니다. (원문에도 그렇게 되어 있어요!)
    확인하시고 댓글은 지워주세요 ;)

    1. 헉 이럴 수가! 감사합니다 ^^

  2. 우와…너무 감사해요…rem을 너무 알고 싶었는데 최상위요소를 기준으로 상대적인 크기라니…좋은 속성이네요 > <

    1. 넵. 요새 많이 사용하더라고요. 근데 저는 아직 실용성이 얼마나 되는지 잘 모르겠어요. 여튼 댓글 감사! ^^

녹풍(綠風) 에 응답 남기기응답 취소