한 줄 요약
px는 고정된 크기, em은 부모 글자의 몇 배, rem은 사이트 기준 글자(html)의 몇 배입니다. 본문과 제목에는 rem을 쓰면 관리가 쉽습니다.
비유로 이해하기
px는 자로 잰 고정 길이입니다. 16px은 어디서든 16px이에요.
em은 “엄마 키의 몇 배”입니다. 1.5em은 바로 위 부모 글자 크기의 1.5배라서, 부모가 커지면 같이 커집니다. 상자 속 상자 속에 넣으면 1.5배의 1.5배가 되어 생각보다 커지기도 해요.
rem은 “집안의 기준 키의 몇 배”입니다. 여기서 기준은 맨 꼭대기 html의 글자 크기(보통 16px)예요. 부모가 누구든 상관없이 항상 같은 기준으로 계산됩니다.
비교해 보기
- px: 예측하기 쉽지만, 방문자가 브라우저에서 기본 글자 크기를 키워도 따라 커지지 않습니다.
- em: 버튼 안 아이콘처럼 “주변 글자에 맞춰” 크기를 정할 때 좋습니다.
- rem: 사이트 전체 글자 크기를 일정한 기준으로 관리할 때 좋습니다. 방문자 설정도 존중해요.
직접 실행해 보기
세 줄은 지금 모두 같은 크기로 보입니다. .parent의 font-size를 30px로 바꿔 보세요. em만 커집니다. 그다음 html의 font-size를 24px로 바꾸면 이번엔 rem만 커집니다.
GenerateBlocks에서는
GenerateBlocks의 글자 크기 입력칸 옆에서 단위(px, em, rem)를 고를 수 있습니다. 이 사이트의 본문은 GeneratePress에서 17px로 정했고, 제목은 rem을 섞은 clamp() 값을 썼어요. 처음에는 “본문은 GeneratePress 기본값, 제목만 블록에서 rem으로”라는 규칙이면 충분합니다.
참고: MDN: font-size · Josh W. Comeau: The Surprising Truth About Pixels and Accessibility · web.dev: Text and typography