font의 단위로 em과 %를 사용할 경우 문제점 해결

부제: CSS 초보가 당황할 만한 것 #2

문제 :

Font 단위로 px·pt만 사용하다가 em이나 %를 사용할 경우, 생각했던 것 보다 글씨가 크거나 작게 나온다.

해결법 :

em·%에 대해 정확하게 이해한다.

상황 :

언제나 처럼 각 div나 table에 font 속성을 지정하고 중첩 div나 중첩 table을 사용했다.

<div id="container">1차 텍스트
    <div id="contents">2차 텍스트
        <div id="sidebar">3차 텍스트</div>
    </div>
</div>
body,
#container,
#contents,
#sidebar {
	font: 0.75em 돋움, dotum, sans-serif;
}

이렇게 보일 것임

font_em_preview

해결법

1. em·%에 대해 정확하게 이해한다.

em·%를 px·pt 사용하듯이 사용하지 않습니다.
px·pt는 어떤 상황에서도 크기가 변하지 않는 절대크기 이지만, em·%는 말 그대로 상대적인 크기 입니다.
– 위에 예시한 것 처럼 모든 엘리먼트에 font 크기 설정을 한 경우

  • px·pt를 사용한 경우에는 모든 엘리먼트에 font 크기 설정을 하고 엘리먼트들을 중복으로 쓰든 말든 상관없이 폰트는 지정한 고정 크기로 고정됩니다. (ex. 9pt)
  • em·%를 사용한 경우에는 엘리먼트가 중복될때 마다, 상위 엘리먼트의 75% 크기의 폰트 크기로 보여집니다.
    • container에서는 브라우저 기본 폰트의 75% 크기로 보여집니다. (이 상태를 굳이 절대값으로 따지면 9pt와 동일합니다)
    • contents에서는 브라우저 기본 폰트 기준이 아니라 container에서 보여진 폰트 크기의 75%로 보여집니다. (굳이 또 따지면 9pt의 75%)
    • sidebar에서는 contents에서 보여진 폰트 크기의 75%로 보여집니다. (굳이 또또 따지면 9pt의 75%의 75%)

2. 해결법+덧붙임

  • 한글의 웹글꼴 크기 비교 이런 포스트를 했었는데,
    저기 있는 em·%는 모두 브라우저의 기본 글꼴을 기준으로 em·% 처리가 된 크기입니다.
    1em은 100%와 동일하고, 1em 이라는것은 브라우저의 기본글꼴의 100%크기 라는 뜻입니다.
    브라우저의 기본글꼴 크기(1em·100%)를 기준으로 우리가 보통 사용하는 9pt·12px의 글꼴은 0.75em·75% 크기가 됩니다.
    그리고 브라우저의 기본 글꼴 크기 (1em·100%)는 절대값으로 환산할 경우는 12pt·16px 크기 입니다.

3.위의 예시에서 모든 글꼴을 같은 크기로(절대값일 경우 9pt·12px로) 보이도록 하려면 아래와 같은 방법들이 있습니다.

body에만 0.75em(75%)의 글꼴 크기를 지정해 준다.

body {
    font : 0.75em 돋움, dotum, sans-serif;
}

container에만 0.75em(75%)의 글꼴 크기를 지정해 준다.

#container { font: 0.75em 돋움, dotum, sans-serif; }

굳이 각각의 div에 글꼴을 지정해줘야 한다면

#container {
     font: 0.75em 돋움, dotum, sans-serif; 
} /* container에 기본 크기를 지정해 주고 */ 
#contents {
     font: 1em 돋움, dotum, sans-serif; 
} 
#sidebar {
     font: 1em 돋움, dotum, sans-serif; 
} /* 종속되는 두 div에는 상위의 1em(100%) 크기를 지정한다 */

위의 예시에서 sidebar만 조금 작게 (절대값일 경우 8pt·11px) 보이도록 하려면 아래와 같은 방법이 있습니다.

#container {
    font: 0.75em 돋움, dotum, sans-serif;
}
#sidebar {
    font: 0.7em 돋움, dotum, sans-serif;
}

“이제는 em·%가 대세다!” 라고 생각하고 기존의 단위들을 바꿔보려고 하는 분들이 많아 지고 있습니다.
기존에 작성된 css에서 단위만을 바꾼다면, 중첩되는 많은 엘리먼트들 때문에 글씨가 깨알만해 지는 것들이 많을 거라고 생각합니다.
고정이 아닌 상위 엘리먼트에 종속된다는 것을 기억하고, 익숙해 지도록 해야겠습니다.

관련 URL

한글의 웹글꼴 단위 및 크기 비교표