font-size 속성의 이해

font-size 속성은 글자(폰트)의 크기를 지정합니다.

이 속성의 값은
절댓값를 사용해 고정된 크기로 지정하거나,
상댓값을 사용해 부모 요소나 문서의 글자 크기를 기준으로 상대적인 비율 크기를 설정할 수 있습니다.

데모

다음의 CSS 데모는 절대 단위를 사용해서 고정된 크기를 지정한 것입니다.

CSS 데모: 절댓값을 사용해 고정된 크기를 지정 데모 버튼을 클릭해 보세요!

다음의 CSS 데모는 상댓값을 사용해 부모 요소나 문서의 글자 크기를 기준으로 상대적인 비율 크기를 지정한 것입니다.

CSS 데모: 상댓값을 사용해 상대적인 비율 크기를 지정 데모 버튼을 클릭해 보세요!

참고하세요!
font-size 속성은 크기를 지정한다고 하지만,
좀 더 정확히 말하면 글자를 둘러싸는 가상의 상자인 em square 높이를 지정합니다.

형식 구문

CSS 
selector {
    font-size: /* value */
}

구문

CSS 
/* 절댓값 키워드로 고정된 크기 지정 */
font-size: xx-small; /* 매우 작은 크기 */
font-size: x-small;
font-size: small;
font-size: medium; /* 초깃값 */
font-size: large;
font-size: x-large;
font-size: xx-large; /* 매우 큰 크기 */

/* 부모 요소 크기 기준 상댓값 키워드로 상대적인 비율 크기로 지정 */
font-size: larger;
font-size: smaller;

/* 길이 단위 지정 */
font-size: 15px;
font-size: 1.5em; /* 부모 요소 글자 크기 1.5배 */
font-size: 1.5rem; /* 루트 요소인 html 요소 글자 크기 1.5배 */
/* 기타 길이 단위 사용 가능(예, vw, vh 등) */

/* 퍼센트(%) 단위 지정 */
font-size: 150%; /* 부모 요소 글자 크기 1.5배(150%) */

/* 전역 값 */
font-size: inherit;
font-size: initial;
font-size: unset;

값

font-size 속성의 값
절댓값 키워드로 고정된 크기 브라우저나 디바이스의 설정에 상관없이 고정된 크기를 의미합니다.
브라우저의 사용자 기본 크기인 medium 크기에 따라 정해집니다.
  • xx-small - 가장 작은 글자 크기
  • x-small - xx-small보다 약간 큰 글자 크기
  • small - x-small보다 큰 글자 크기
  • medium - 브라우저의 기본 글자 크기
  • large - medium보다 큰 글자 크기
  • x-large - large보다 큰 글자 크기
  • xx-large - 가장 큰 글자 크기
larger 부모 요소의 글자 크기보다 약간 더 큰 글자 크기
smaller 부모 요소의 글자 크기보다 약간 더 작은 글자 크기
길이 단위 길이 단위의 값은 항상 양수입니다. (음수 값은 유효하지 않습니다.)
# 다음은 상대적 길이 단위입니다. # 다음은 절대적 길이 단위입니다.
  • px
  • vh
  • vw
  • CSS에서 사용 가능한 길이 단위
% 부모 요소의 font-size를 100%의 기준으로 합니다.

절댓값 키워드로 고정된 크기

브라우저나 디바이스의 설정에 상관없이 고정된 크기를 의미합니다. 브라우저의 사용자 기본 크기인 medium 크기에 따라 정해집니다

만약에 사용자가 브라우저의 사용자 기본 크기를 16px로 설정했다면 medium의 크기는 16px이 됩니다.
나머지 키워드들은 이 값을 기준으로 상대 크기를 지정하는 키워드입니다.

HTML 
<p style="font-size: xx-small;">xx-small의 크기입니다.</p>
<p style="font-size: x-small;">x-small의 크기입니다.</p>
<p style="font-size: small;">small의 크기입니다.</p>
<p style="font-size: medium;">medium의 크기입니다.</p>
<p style="font-size: large;">large의 크기입니다.</p>
<p style="font-size: x-large;">x-large의 크기입니다.</p>
<p style="font-size: xx-large;">xx-large의 크기입니다.</p>
실제 적용된 모습

가독성을 유지하기 위해 브라우저는 너무 작은 글자 크기에 임의로 미세 조정할 수 있습니다.

larger

부모 요소의 글자 크기보다 약간 더 큰 글자 크기의 상댓값입니다.

HTML 
<div style="font-size: 16px;">
    부모 요소의 글자 크기입니다.
    <p style="font-size: larger;">larger의 크기입니다.</p>
</div>
실제 적용된 모습

smaller

부모 요소의 글자 크기보다 약간 더 작은 글자 크기의 상댓값입니다.

HTML 
<div style="font-size: 16px;">
    부모 요소의 글자 크기입니다.
    <p style="font-size: smaller;">smaller의 크기입니다.</p>
</div>
실제 적용된 모습

길이 단위

길이 단위의 값은 항상 양수입니다. (음수 값은 유효하지 않습니다.)

px

픽셀(pixels) 기준의 정확도가 필요할 때 유용합니다. 픽셀 기준의 절댓값입니다.
브라우저나 운영 체제 등의 영향을 받지 않고, 부모 요소 등의 영향을 받지 않는 절대적 길이 단위입니다.

rem

rem 단위는 루트 요소인 <html> 요소의 font-size를 의미합니다. rem은 root em(element)을 나타냅니다.

예제를 통해 살펴보겠습니다.

CSS 
html {
    font-size: 20px;
}
h1 {
    font-size: 2rem;
    /* 2rem = 2 * 20ox = 40px
       html 요소의 font-size인 20px이 1rem */
}

이 예제에서 h1 요소의 font-size를 루트 요소인 <html> 요소의 font-size의 2배로 설정합니다. 이 경우, <html> 요소의 font-size가 20px이므로, h1 요소의 실제 font-size는 2 * 20px = 40px이 됩니다.

만약에 루트 요소인 <html> 요소의 font-size를 지정하지 않았을 경우 1rem은 어떻게 결정될까요?

이 경우에 루트 요소인 <html> 요소의 font-size를 지정하지 않았을 경우, 이는 사용자가 설정한 브라우저의 기본 글자 크기에 따라 결정됩니다. 대부분의 사용자들은 브라우저의 기본 글자 크기를 설정하지 않는 경우가 많습니다. 브라우저 제조사에 따라 설정된 기본 글자 크기는 주로 16px이며, 이 경우 1rem은 16px이 됩니다.

em

부모 요소의 font-size를 1em의 기준의 상댓값입니다.
em 단위는 주로 부모 요소의 글자 크기와 비례한 상대적인 길이를 지정할 때 사용됩니다.

이럴 경우 부모 요소의 글꼴 크기의 비율로 font-size를 설정하기 때문에(부모 요소의 글꼴 크기를 정확히 모른다고 하더라도) 상대적인 크기 비율을 조정하는데 매우 편리합니다.

CSS 
h1 {
    font-size: 30px;
}
h1 > span {
    font-size: 0.7em;
    /* 0.7em = 0.7 * 30px = 21px;
       부모 요소(h1)의 font-size인 30px이 1em */
}
%

부모 요소의 font-size를 100%의 기준의 상댓값입니다.

CSS 
h1 {
    font-size: 30px;
}
h1 > span {
    font-size: 70%;
    /* 70% = 0.7 * 30px = 21px;
       부모 요소(h1)의 font-size인 30px이 100% */
}

형식 정의

font-size 속성의 형식 정의
초깃값 medium
적용 요소 모든 요소
상속 예
애니메이션 예

참고사항

대부분의 브라우저에서 font-size의 초깃값은 medium이지만, 제목 태그를 정의하는 <h1>~<h6>의 경우에는 다릅니다.
예를 들어, <h1>, <h2>와 같은 제목 요소는 의미론적인 측면과 가독성을 위해 medium보다 더 큰 크기로 초깃값을 설정하고 있습니다.

또한, <small> 태그의 경우에는 smaller를 초깃값으로 설정하고 있습니다.

브라우저 호환성

font-size 속성과 값의 브라우저 호환성
속성과 값
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
font-size 1 12 1 1
rem 31 12 31 7
xxx-large 79 79 70 16.4

caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

font-size 속성의 명세서 사양
명세서 사양
font-size CSS Fonts Module Level 4
#font-size-prop

참고문헌

같이 보기