px와 pt
CSS의 1px은 화면 해상도와 상관없이 1/96인치로 정의된 "참조 픽셀"이고, 인쇄와 워드프로세서에서 쓰는 1pt는 1/72인치입니다. 그래서 1pt = 4/3px ≈ 1.333px이고, 한글이나 워드의 10pt 글자는 웹에서 약 13.3px입니다. 반대로 웹의 16px 본문은 인쇄 기준 12pt와 같습니다.
px = pt × 96 ÷ 72, pt = px × 0.75
em과 rem
em은 부모 요소의 글자 크기, rem은 최상위(html) 요소의 글자 크기를 1로 보는 상대 단위입니다. 브라우저 기본 글자 크기는 16px이라 1rem = 16px, 1.125rem = 18px입니다. 사용자가 브라우저 글자 크기를 키우면 rem으로 지정한 글자도 함께 커져 접근성에 좋아서 본문 글자에는 rem을 많이 씁니다. em은 부모를 따라 겹겹이 곱해지므로 중첩된 목록 등에서 크기가 예상과 달라질 수 있습니다.
자주 묻는 질문
기준 글자 크기를 모르겠어요
따로 정하지 않았다면 브라우저 기본값 16px입니다.
모바일 화면에서도 같나요?
CSS px 기준으로는 같습니다. 기기의 실제 물리 픽셀 수는 화면 배율에 따라 2~3배 많습니다.