font-size는 말 그대로 폰트의 크기를 지정하는 CSS 속성이다.

폰트 사이즈를 지정하는 방법은 keyword, length 값(px, em 등) 지정, 퍼센티지(%) 등이 있다. 이번 포스트에는 length 값 중 px, em 단위를 이용해 폰트 사이즈를 설정하는 방법을 정리한다.

/* length 값(px, em 등)을 이용한 폰트 사이즈 설정 */
p.a {
  font-size: 14px;
}

/* keyword를 이용한 폰트 사이즈 설정 */
p.b {
  font-size: large;
}

/* 퍼센테이지를 이용한 폰트 사이즈 설정 */
p.c {
  font-size: 150%;
}

px, em을 사용하여 폰트 사이즈 변경하기

CSS length 값을 표현하는 단위(unit)에는 여러 가지가 있지만 가장 많이 사용하는 것은 px과 em이다. px은 절대적인 크기를 표현하는 반면 em은 상대적인 크기를 표현한다.

1. px (픽셀)

• 1px은 스크린 픽셀 하나의 사이즈를 의미한다.
• 절대적 값
• 픽셀 사이즈는 스크린 해상도에 따라 다르다. 따라서 똑같은 픽셀값이어도 다른 기기에서는 폰트 사이즈가 달라질 수 있다.
• 절대적인 값이기 때문에 유저가 브라우저 기본 폰트 사이즈를 변경하더라도, px로 지정한 폰트 사이즈는 변경되지 않는다. (아래 자세히)

px 예제 1 – 사용 방법

.px-large {
  font-size: 26px;
}
.px-small {
  font-size: 14px;
}

<p class="px-large"> Large </p> 
<p class="px-small"> Small </p>

2. em

• 폰트 사이즈 자체를 의미한다. (px은 픽셀 크기를 뜻하는데, em은 내포하는 다른 뜻은 없다고 한다)
• 상대적인 값

직관적인 px와 달리 어떤 의미인지 정확히 이해가 잘 되지 않는다. 예제를 통해 사용 방법을 알아보자.

em 예제1 – 사용 방법

CSS

.em-large {
  font-size: 2em;
}
.em-small {
  font-size: 0.8em;
}

HTML

<p class="em-large"> Large </p> 
<p> Default </p>
<p class="em-small"> Small </p>

2em은 기본 폰트 사이즈의 2배를 의미한다. em-large (2em) 이 적용된 폰트 사이즈는 p 태그의 기본 폰트 사이즈의 2배가 된다. 브라우저의 기본 폰트 사이즈를 변경하지 않았다면, p 태그의 폰트 사이즈는 16px이다. 따라서 텍스트 Large의 폰트 사이즈는 16px의 2배인 32px이 된다.

같은 계산 방법으로 Small 텍스트의 사이즈는 12.8px (16의 0.8배)가 된다.

em 예제 2 – 이런 식으로 활용할 수 있다

strong{
  font-size: 1.4em;
}

h1 {
  font-size: 2em;
}

h2 {
  font-size: 1.8em;
}

블로그 포스팅을 하다 보면 태그별로 글씨 크기를 조정하고 싶을 때가 있다. 나 같은 경우는 헤더 태그 크기와 strong 태그 크기를 변경하여 헤더 및 텍스트를 강조하고 싶었다. 그럴 때는 태그별로 상대적인 크기를 지정해주면 된다.

HTML

여기까지 px와 em이 사용 방법에 대해 정리했다. 그렇다면 px와 em 중 어느 단위를 사용하는 게 더 좋을까? 다른 포스팅으로 짧게 정리했으니 참고하자.