폰트 크기 단위 - px, em, rem, vw, vh

• 폰트 크기 단위에 무엇을 사용해야 적절한가?

• 더 나은 단위가 있는 게 아니라 경우에 따라 선택해 사용해야 한다.

• 상대적인 폰트 단위는 Layout 계산 과정에서 자동으로 픽셀 단위로 변환되어 렌더링 된다.

px (pixel)

• 물리적이고 절대적인 단위로, 세밀한 조정이 가능하다.

• 사용자가 브라우저에서 폰트 설정을 바꿔도 적용되지 않는다.

em

• 부모 엘리먼트의 폰트의 크기에 상대적으로 크기가 지정됨. 여기서 폰트의 크기는 단순한 폰트 사이즈가 아닌 실제로 적용된 폰트의 크기란 뜻인 것에 주의

• 1em이 16px이란 말은 디폴트 폰트 사이즈가 16px이라서 나온 말. 사실 %로 지정하는 것과 동일함.

• 나중에 폰트 변경에 대비해 텍스트 컨테이너 폰트의 경우 em, rem을 단위로 셋팅 하는게 바람직함.

rem

• em인데 부모가 아닌 Root Element에 상대적인 폰트 사이즈 단위이다.

vw, vh

• view port에 상대적인 값을 폰트 크기 사이즈로 지정할 수 있다.

%

• em과 마찬가지로 부모 엘리먼트 폰트 크기에 상대적인 단위.

• Previous
  Debounce vs Throttle
• Next
  Critical rendering path (CRP) 및 관련 최적화