Softonic

EM에서 REM으로 변환기

단계 1 / 2 rem
결과

디자이너는 Figma 시안을 픽셀로 전달하는데 코드베이스는 rem을 쓰고, 컴포넌트의 절반은 부모의 글꼴 크기에 따라 값이 달라지는 em으로 짜여 있는 경우가 많습니다. 이 변환기는 어떤 루트 글꼴 크기에서든 모든 em 값에 해당하는 px와 rem을 계산하므로, 매번 머릿속으로 다시 계산하지 않고도 올바른 값을 그대로 CSS 파일에 복사할 수 있습니다.

em, rem, 픽셀을 변환하는 방법

  1. 1

    기준 글꼴 크기를 설정하세요

    일반적으로 브라우저 기본값인 16px입니다. 일부 디자인 시스템에서는 14px나 18px를 루트 크기로 사용합니다.

  2. 2

    em은 부모 글꼴 크기를 설정하세요

    em은 부모 요소를 기준으로 하는 상대 단위입니다. 부모가 20px이면 1em은 20px에 해당합니다.

  3. 3

    값을 입력하세요

    em 단위로 입력하면 px와 rem 환산값이 자동으로 갱신됩니다.

  4. 4

    변환 결과를 확인하세요

    px, em, rem 값을 반올림한 값과 정확한 소수 값으로 함께 표시합니다.

계산식

rem은 항상 루트 요소(<html>)를 기준으로 합니다.

px = rem * root_font_size rem = px / root_font_size

em은 현재 요소의 부모 요소를 기준으로 합니다.

px = em * parent_font_size em = px / parent_font_size

루트 16px에서의 변환

픽셀 rem em(부모가 16px일 때)
10 0.625 0.625
12 0.75 0.75
14 0.875 0.875
16 1 1
18 1.125 1.125
20 1.25 1.25
24 1.5 1.5
32 2 2
48 3 3
64 4 4

각 단위를 언제 쓸까

  • px: 테두리, 미세한 디테일, 정확히 고정하고 싶은 부분. 1px 박스 그림자, 1px 테두리 등.
  • rem: 사용자의 글꼴 설정에 맞춰 함께 커지고 작아져야 하는 여백, 안쪽 여백, 타이포그래피.
  • em: 컴포넌트 자체의 글꼴 크기에 맞춰 조정되어야 하는 국소적 간격(버튼, 배지 등).
  • %와 vw/vh: 컨테이너 기준·뷰포트 기준 단위로, 이는 별개의 주제입니다.

62.5% 트릭

일부 코드베이스는 html { font-size: 62.5%; }를 설정하여 1rem을 10px로 만듭니다. 이렇게 하면 rem 계산이 쉬워지지만(24px = 2.4rem), 텍스트를 확대하는 사용자의 브라우저 글꼴 크기 설정을 무력화한다는 대가가 따릅니다. 현대적인 관행에서는 이 편법을 피하고, 루트를 16px로 두고 소수점을 감수합니다.

em 상속의 함정

em은 캐스케이드를 통해 상속됩니다. 어떤 부모 요소가 자신의 부모에 대해 font-size 1.2em을 가지고 그 안에 padding 1em을 지정하면, 패딩은 1.2 × 1.2 = 1.44 × 루트가 됩니다. 중첩된 em은 서로 곱해지기 때문에 예상치 못한 결과를 낼 수 있습니다. rem은 항상 <html>을 기준으로 계산되므로 이런 문제를 피합니다.

타이포그래피 스케일 예시

비율 1.25의 흔한 모듈러 타입 스케일 예시입니다.

구분 rem px(루트 16일 때)
캡션 0.75 12
본문 1 16
본문(강조) 1.125 18
H4 1.25 20
H3 1.5625 25
H2 1.953 ~31
H1 2.441 ~39
히어로 3.052 ~49

rem을 쓰면 사용자가 접근성을 위해 브라우저 글꼴 크기를 키웠을 때 모든 단계가 비례해서 함께 커집니다.

사용자 설정을 존중하기

스타일시트 전반에 px를 하드코딩하면 시력상의 이유로 텍스트를 확대하는 사용자에게 불편을 줍니다. rem은 사용자가 바꿀 수 있는 루트 크기를 기준으로 계산되므로 이러한 설정을 존중합니다. 스타일 가이드가 타이포그래피와 간격에 rem을 권장하는 주된 이유가 바로 이것입니다.

자주 묻는 질문

타이포그래피, 간격, 레이아웃 크기에는 rem을 쓰세요. 컴포넌트 자체의 글꼴 크기에 맞춰 조정되어야 하는 컴포넌트 내부 크기(텍스트 안의 버튼, 아이콘 등)에는 em을 쓰세요. px는 크기가 변하면 안 되는 미세한 디테일에만 쓰세요.

사용자는 브라우저의 기본 글꼴 크기를 바꿀 수 있습니다. 크롬 기본값은 16px이지만, 사용자가 18px로 설정하면 모든 rem이 12.5% 커집니다. 루트를 항상 16px로 고정되어 있다고 가정하는 디자이너는 이 점을 놓치기 쉽습니다. rem은 사용자의 선택을 존중하며, 그것이 바로 rem을 쓰는 이유입니다.

Tailwind의 간격 스케일은 rem을 사용합니다. text-base는 기본값에서 1rem = 16px이고, text-lg는 1.125rem입니다. 이 스케일은 일관적이며 기본적으로 루트 글꼴 크기를 존중합니다.

아니요. 입력한 숫자는 변환 계산에만 사용되며 저장되지 않습니다.

관련 도구

ASCII 표 참조

NUL, LF, DEL 같은 제어 문자를 포함해 모든 문자에 대한 10진수, 16진수, 8진수, 2진수, HTML 숫자 문자 참조를 담은 0부터 127까지의 전체 ASCII 표.

HTML 문자 참조

HTML 엔티티의 검색 가능한 목록, 각 엔티티의 이름 및 숫자 코드, 그리고 특수 문자 및 기호에 대한 1클릭 복사 기능을 제공합니다.

키보드 단축키 참고표

macOS, Windows, Linux에서 VS Code, Chrome, GNU Readline을 쓰는 Bash의 문서화된 기본 단축키를 검색합니다.

보색 찾기

어떤 입력에 대해서도 보색을 찾습니다. HSL 반대 색, 분할 보색 쌍, 그리고 접근성 있는 조합 제안을 반환합니다.

랜덤 영어 글자 생성기

A-Z 영어 글자를 무작위로 생성합니다. 개수와 대문자, 소문자, 혼합 대소문자를 선택해 게임, 과제, 수업 활동에 활용하세요.

색상 이름 찾기

HEX, RGB 또는 HSL 값에 가장 가까운 표준 CSS 색상 이름을 CIEDE2000으로 찾습니다.

이 도구는 다른 언어로도 제공됩니다