[CSS] font-size 단위 px, em, rem

---

font-size 단위

---

1. px

2. em

3. rem

 

---

 

 

px은 고정된 크기이고,

 

em은 해당 element에서 바로 상위 element의 font-size 기준,

 

rem은 최상위 요소 font-size 기준이다.

 

(px, em, rem의 차이를 확인하기 위해 다음의 CSS 코드를 사용했다)

 

CSS

.px {
  font-size: 16px;
}

.em {
  font-size: 1em;
}

.rem {
  font-size: 1rem;
}

 

(참고로, 브라우저 대부분의 font-size 기본값은 16px이다)

 

---

 

대부분의 브라우저에는 사용자가 텍스트를 편하게 읽을 수 있도록 글자크기를 설정할 수 있는 기능을 제공한다.

 

하지만 font-size를 px 단위로 설정하면 사용자가 브라우저에서 글꼴 크기를 바꾸더라도 변하지 않는다.

 

다음 사진은 글꼴 크기를 '중간(권장)'으로 설정했을 때다.

 

font-size regular

 

브라우저 기본 글꼴 크기가 16px이고 em과 rem 모두 1로 설정되어 있으므로 모두 크기가 같은 것을 확인할 수 있다.

 

---

 

하지만 글꼴 크기를 '아주 크게'로 설정했을 때는 어떻게 변하는지 보자.

 

font-size very huge

 

em과 rem은 모두 글꼴 크기가 증가했는데 반해 px은 크기가 그대로 유지되는 것을 확인할 수 있다.

 

---

 

사용자에게 보다 훌륭한 UX를 제공하기 위해선 font-size를 설정할 때

 

em이나 rem을 이용하여 설정하면 좋을 것 같다 !