CSS 폰트 사이즈 단위(px / em / rem / % / pt)를 상호 변환합니다. 베이스 폰트 사이즈 기준으로 동시 표시됩니다.
표준 사이즈 변환표
폰트 단위 변환 사용법
- 베이스 폰트 사이즈를 설정합니다 (HTML 기본값 16px).
- 변환하고 싶은 단위 입력란에 숫자를 입력합니다.
- 나머지 단위가 자동으로 환산됩니다.
- 아래 표준 사이즈 변환표도 참고할 수 있습니다.
주요 기능
- px ↔ em / rem ↔ % ↔ pt 양방향 변환
- 베이스 폰트 사이즈 커스터마이징
- 표준 사이즈(12, 14, 16, 18, 20, 24, 32) 변환표
- 실시간 양방향 동기화
활용 예시
- 디자이너의 px 시안을 개발 코드의 rem으로 변환
- 접근성을 위한 상대 단위(em/rem) 채택
- 인쇄용 pt를 화면용 px로 환산
- 반응형 디자인의 % 폰트 사이즈 결정
각 단위의 특징
- px: 절대 단위. 사용자가 브라우저에서 폰트 크기를 키워도 영향 없음 (접근성 약점)
- em: 부모 요소 폰트 사이즈 기준 (중첩 시 누적)
- rem: 루트(html) 폰트 사이즈 기준 (가장 권장)
- %: em과 동일 (폰트 사이즈 컨텍스트에서)
- pt: 인쇄용 단위 (1pt ≈ 1.333px)
자주 묻는 질문
px vs rem, 어느 것을 써야 하나요?
접근성을 위해 rem 권장합니다. 사용자가 브라우저 폰트 크기를 키우면 rem은 자동 비례하지만 px는 고정됩니다. 단, 보더·아이콘처럼 정확한 픽셀이 필요하면 px를 씁니다.
왜 베이스가 보통 16px인가요?
대부분의 브라우저 기본 폰트 사이즈가 16px이기 때문입니다. html { font-size: 16px }이 디폴트라 1rem = 16px이 됩니다.
10px 베이스 트릭이 뭔가요?
html { font-size: 62.5% }로 설정하면 1rem = 10px이 되어 계산이 쉬워집니다 (예: 1.6rem = 16px). 옛날에 자주 쓰였지만 최근에는 16px 베이스를 그대로 두는 것이 권장됩니다.
em과 rem은 정확히 뭐가 다른가요?
em은 부모 요소 폰트 사이즈 기준이라 중첩되면 누적됩니다(div 1.5em 안의 div 1.5em = 2.25em). rem은 항상 루트(html) 기준이라 일관됩니다.