단위마다 기준이 다르다
px는 CSS 픽셀로, 화면의 물리 픽셀과는 다르며 고해상도 화면에서는 CSS 1px이 물리 2~3px에 그려집니다. rem은 문서 루트(html) 요소의 글꼴 크기를 1로 보는 단위이고, em은 그 속성이 적용되는 요소 자신의 글꼴 크기(font-size 속성 자체에 쓰면 부모의 글꼴 크기)를 1로 봅니다. %는 속성마다 기준이 달라서 font-size에서는 부모 글꼴 크기, width에서는 부모 너비가 기준입니다. 이 도구의 %는 글꼴 크기 기준으로 계산합니다. vw·vh는 뷰포트 너비·높이의 1/100이며, pt는 인쇄 단위로 CSS에서는 1pt = 1.333px로 고정되어 있습니다.
왜 rem이 접근성에 유리한가
브라우저 설정에서 글꼴 크기를 "크게"로 바꾸면 루트 글꼴 크기가 16px에서 20px 같은 값으로 바뀝니다. rem으로 적힌 글자·여백·줄 간격은 이 변화에 따라 함께 커지지만, px로 적힌 값은 그대로라서 시력이 낮은 사용자가 설정을 바꿔도 효과가 없습니다. 페이지 확대(Ctrl +)는 px도 함께 키우므로 둘은 다른 기능입니다. WCAG 1.4.4(텍스트 크기 조절)를 만족하려면 최소한 글자 크기는 rem이나 em으로 두는 편이 안전합니다.
em 중첩의 함정
em은 부모를 기준으로 하므로 font-size: 1.2em이 세 단계 중첩되면 1.2 × 1.2 × 1.2 = 1.728배가 됩니다. 의도치 않게 글자가 커지거나 작아지는 원인이 이것입니다. 글꼴 크기는 rem으로 정하고, 아이콘 크기나 버튼 안쪽 여백처럼 "그 요소의 글자 크기에 비례해야 하는 값"에만 em을 쓰는 것이 관리하기 쉽습니다.
62.5% 트릭
html { font-size: 62.5% }로 두면 루트가 10px이 되어 1.6rem = 16px처럼 암산이 쉬워집니다. 다만 이 경우 루트 글꼴 크기 필드를 10으로 바꿔야 표가 맞고, 서드파티 컴포넌트가 rem을 기준으로 만들어져 있으면 그쪽이 작아지는 부작용이 있습니다. 최근에는 기본 16px을 그대로 두고 이 표처럼 환산해 쓰는 쪽이 더 흔합니다.
자주 묻는 질문
vw로 글자 크기를 정해도 되나요?
화면 너비에 따라 글자가 커지는 유동 타이포그래피에 씁니다. 다만 vw만 쓰면 사용자의 확대 설정이 무시되므로 clamp(1rem, 2vw + 0.5rem, 2rem)처럼 rem과 섞는 것이 권장됩니다.
pt는 언제 쓰나요?
인쇄용 스타일시트(@media print)나 워드·디자인 툴의 값을 옮길 때입니다. 화면용 CSS에서는 px나 rem을 쓰는 것이 일반적입니다.
결과 소수점이 길어요.
소수 넷째 자리에서 반올림합니다. 브라우저는 그보다 긴 소수도 처리하므로 그대로 써도 되고, 실제 렌더링은 대부분 1/64px 단위로 반올림됩니다.