px를 rem으로 — CSS 단위표 120가지
16px이 1rem이고 12pt입니다. 1px부터 120px까지 rem·pt·pc·인치·밀리미터를 한 줄에 놓았습니다.
자주 쓰는 크기
본문 16px, 작은 글씨 14px, 여백 8·24·32px처럼 되풀이되는 값들입니다.
rem은 왜 16으로 나누나요
브라우저 기본 글자 크기가 16px이고 rem은 그 크기에 대한 배수이기 때문입니다. 사용자가 브라우저에서 글자를 키우면 rem으로 적은 자리만 함께 커집니다 — px로 못 박아 둔 자리는 그대로입니다.
pt·인치는 화면에서도 픽셀로 정해집니다
CSS는 1인치를 96px로, 1pt를 1/72인치로 못 박아 두었습니다. 그래서 16px은 정확히 12pt이고, 화면에서 자로 재면 1인치가 나오지는 않습니다.
딱 떨어지는 값
rem이 정수가 되는 것은 16의 배수이고, pt가 정수가 되는 것은 4의 배수입니다 — 4px이 정확히 3pt이기 때문입니다.
1px부터 120px까지
읽는 방법
- rem = px ÷ 16. 브라우저 기본 글자 크기가 16px이기 때문입니다.
- pt = px × 0.75. CSS가 1인치를 96px, 1pt를 1/72인치로 정해 두었습니다.
- 1pc는 12pt이고, 1인치는 96px이자 72pt입니다.
- 글자와 여백은 rem으로, 테두리처럼 얇아야 하는 선은 px로 적는 편이 좋습니다.
자주 묻는 질문
Q. 1rem은 몇 px인가요?
브라우저 기본값에서는 16px입니다. 다만 사용자가 브라우저 설정에서 글자를 키웠다면 그만큼 커집니다 — 그것이 rem을 쓰는 이유입니다.
Q. px와 rem 가운데 뭘 써야 하나요?
글자와 여백은 rem이 좋습니다. 사용자가 글자를 키웠을 때 함께 커지기 때문입니다. 1px 테두리처럼 얇아야 하는 선은 px로 둡니다.
Q. html에 font-size: 62.5%를 주는 건 왜인가요?
루트를 10px로 만들어 1.6rem = 16px처럼 계산을 쉽게 하려는 방법입니다. 다만 사용자가 기본 글자 크기를 바꿔 둔 경우 의도와 다르게 작아질 수 있습니다.
Q. pt는 왜 아직도 쓰나요?
인쇄에서 온 단위라 인쇄 스타일시트나 메일 템플릿에 남아 있습니다. 화면에서는 16px = 12pt로 환산됩니다.
Q. em과 rem은 뭐가 다른가요?
rem은 항상 루트 글자 크기를 기준으로 삼지만, em은 그 요소의 글자 크기를 기준으로 삼습니다. 그래서 em은 중첩될수록 값이 곱해집니다.