CSS 폰트 사이즈 상대 단위 완벽 가이드: px, vw, em, rem 차이와 활용법

CSS 폰트 사이즈 상대 단위 완벽 가이드: px, vw, em, rem 차이와 활용법

폰트 크기 단위는 웹 디자인의 핵심 요소입니다. 

특히 em, rem, vw 같은 상대 단위는 디바이스 크기와 사용자 설정에 따라 글자가 유연하게 반응할 수 있어 반응형 웹 제작에서 필수적으로 사용됩니다.

➰➰➰

✅ px

✔ 절대 단위로, 디자이너가 의도한 크기를 그대로 표현 가능

✔ 하지만 화면 크기나 사용자의 환경설정에 관계없이 고정된 값이라 반응형 디자인과 접근성에 불리

✨ 고정된 디자인이나 아이콘, 버튼 같은 작은 UI 요소에 적합!

✅ vw, vh

✔ 브라우저 화면(viewport) 크기를 기준으로 변하는 단위

✔ 화면이 줄어들면 글자도 함께 작아져서 다이나믹한 효과를 줄 수 있음

✔ 다만 모바일에서는 글자가 너무 작아질 수 있으므로 최소 크기 보정 필요

✨ 큰 타이포그래피나 풀스크린 효과에 적합!

✅ em

✔ 부모 요소의 글자 크기를 기준으로 상대적으로 변함

✔ 컨테이너 내부에서 글자 크기를 조절할 때 유용하지만, 중첩 구조가 깊어지면 계산이 복잡해지고 예측하기 어려운 크기가 될 수 있음

✨ 특정 영역 안에서만 상대적인 크기를 주고 싶을 때 적합!

✅ rem

✔ 루트(html) 요소의 글자 크기를 기준으로 하는 상대 단위

✔ 어디에서 사용하든 기준이 일정하기 때문에 일관성 유지가 쉬워, 반응형 웹에서 가장 많이 사용되는 단위 중 하나!

✨ em과 rem의 역할

✔ em과 rem은 단순히 반응형 웹을 위한 단위가 아니라, 웹 접근성을 위해서도 꼭 필요한 단위입니다. 

네이버, 공공기관 사이트 등에서는 사용자에게 글자 크기를 크게/작게 설정할 수 있도록 기능을 제공하는데, 이때 사용되는 폰트 단위가 rem 입니다. 

즉, 반응형 대응도 하고 시각적 접근성도 보장할 수 있는 중요한 역할을 하는 단위입니다.

✨ 실무 팁: clamp()로 더 정교한 폰트 사이즈 설정하기

최근에는 px, em, rem, vw 같은 단위를 단독으로 쓰기보다, CSS의 clamp() 함수와 함께 활용하는 경우가 많습니다.

font-size: clamp(1rem, 2vw, 2rem);

위 예시처럼 clamp(최소값, 가변값, 최대값)을 설정하면 화면이 너무 좁아도 글자가 최소 크기 이하로 줄지 않고 화면이 넓어져도 최대 크기 이상으로 커지지 않으며, 그 사이에서는 상대 단위(vw 등)로 유연하게 반응하게 만들 수 있습니다.

즉, 절대 단위와 상대 단위를 조합하여 더 세밀하고 정교한 반응형 폰트 스타일을 구현할 수 있는 방법이죠!

☀️ 관련 글 : CSS clamp() 완벽 가이드! 반응형 폰트와 레이아웃 쉽게 설정하기

➰➰➰

px, em, rem, vw, clamp() 등 다양한 단위를 조합하면, 글자가 화면 크기에 맞춰 자연스럽게 반응합니다.

이런 정교한 반응형 웹 디자인을 바로 경험하고 싶다면, 디자인키트의 다양한 템플릿을 확인해보세요!