PX → REM·줄 간격

px, rem, em, pt를 변환하고 읽기 좋은 줄 간격을 알려 줍니다

파일이 기기 밖으로 나가지 않습니다
브라우저에서 실행
무료, 가입 불필요, 워터마크 없음

단위 변환

아무 칸에나 입력하면 나머지가 따라 바뀝니다.

rem

미리보기

타이포그래피는 언어를 눈에 보이게 만드는 기술입니다. 알맞은 줄 길이와 넉넉한 행간이 있으면 시선이 길을 잃지 않고 다음 줄로 넘어갑니다.

자주 쓰는 크기

행을 클릭하면 변환기에 불러옵니다.

px	rem	em	pt	vw	줄 높이
10	0.625	0.625	7.5	0.694	1.7
12	0.75	0.75	9	0.833	1.65
13	0.8125	0.8125	9.75	0.903	1.63
14	0.875	0.875	10.5	0.972	1.6
15	0.9375	0.9375	11.25	1.042	1.57
16	1	1	12	1.111	1.55
18	1.125	1.125	13.5	1.25	1.52
20	1.25	1.25	15	1.389	1.5
24	1.5	1.5	18	1.667	1.4
28	1.75	1.75	21	1.944	1.32
32	2	2	24	2.222	1.25
36	2.25	2.25	27	2.5	1.23
40	2.5	2.5	30	2.778	1.2
48	3	3	36	3.333	1.15
56	3.5	3.5	42	3.889	1.13
64	4	4	48	4.444	1.1
72	4.5	4.5	54	5	1.09
96	6	6	72	6.667	1.05

타입 스케일

기준 크기

비율

+6 · 61px날쌘 여우 Quick fox3.815rem

+5 · 48.8px날쌘 여우 Quick fox3.052rem

+4 · 39.1px날쌘 여우 Quick fox2.441rem

+3 · 31.3px날쌘 여우 Quick fox1.953rem

+2 · 25px날쌘 여우 Quick fox1.563rem

+1 · 20px날쌘 여우 Quick fox1.25rem

0 · 16px날쌘 여우 Quick fox1rem

-1 · 12.8px날쌘 여우 Quick fox0.8rem

-2 · 10.2px날쌘 여우 Quick fox0.64rem

clamp() 유동 글꼴 크기

두 뷰포트 너비 사이에서 부드럽게 커지고, 범위 밖에서는 고정됩니다.

최소 크기

최대 크기

최소 뷰포트

최대 뷰포트

font-size: clamp(1rem, 0.8239rem + 0.7512vw, 1.5rem);

뷰포트 너비 시뮬레이션900px → 19.94px

날쌘 여우 Quick fox

너비 375 px일 때

16px

너비 768 px일 때

18.95px

너비 1024 px일 때

20.88px

너비 1440 px일 때

24px

rem

줄 높이

0.625

7.5

0.694

1.7

0.75

0.833

1.65

0.8125

9.75

0.903

1.63

0.875

10.5

0.972

1.6

0.9375

11.25

1.042

1.57

1.111

1.55

1.125

13.5

1.25

1.52

1.25

1.389

1.5

1.667

1.4

1.75

1.944

1.32

2.222

1.25

2.25

2.5

1.23

2.5

2.778

1.2

3.333

1.15

3.5

3.889

1.13

4.444

1.1

4.5

1.09

6.667

1.05

PX → REM·줄 간격 사용 방법

루트·부모 글꼴 크기를 기준으로 px, rem, em, pt, %, vw를 변환하고 권장 줄 높이와 줄 길이를 알려 줍니다. 타입 스케일과 clamp() 규칙도 만들 수 있습니다.

'기준'에서 루트 글꼴 크기, 부모 글꼴 크기, 뷰포트 너비를 정합니다.

'단위 변환'의 아무 칸에나 값을 입력하면 나머지 단위가 따라 바뀝니다.

그 크기의 '권장 줄 높이'와 '읽기 편한 줄 길이'를 확인합니다.

필요하면 비율로 '타입 스케일'을 만들거나 'clamp() 유동 글꼴 크기'를 만들어 CSS를 복사합니다.

자주 묻는 질문

1rem은 몇 픽셀인가요?

1rem은 루트(<html>) 글꼴 크기와 같으며 브라우저 기본값은 16px입니다. 사이트 기준이 다르면 '루트 글꼴 크기'를 바꾸세요.

rem과 em은 무엇이 다른가요?

rem은 루트 글꼴 크기, em과 %는 부모 요소의 글꼴 크기를 기준으로 합니다. em을 정확히 변환하려면 '부모 글꼴 크기'를 설정하세요.

권장 줄 높이는 어떻게 정하나요?

일반적인 타이포그래피 관행을 따라 본문은 약 1.5, 큰 제목일수록 촘촘한 값을 줍니다. 4px 그리드에 맞춘 값도 함께 보여 줍니다.

clamp() 생성기는 어디에 쓰나요?

두 뷰포트 너비 사이에서 글자 크기가 부드럽게 커지고 그 범위 밖에서는 고정되는 font-size를 만들어 줍니다. '뷰포트 너비 시뮬레이션'으로 원하는 너비에서 결과를 볼 수 있습니다.

인쇄용 pt도 변환되나요?

네. pt는 CSS 규칙대로 72pt = 96px로 계산하므로 12pt는 16px입니다.