글자 크기 변환기
px · pt · em · rem · vw 즉시 변환 · clamp() 코드 생성 · 실시간 미리보기
⚡ 즉시 변환
🔧 5가지 단위
👁️ 실시간 미리보기
📋 CSS 코드 복사
✨ clamp() 생성기
글자 크기 단위 변환
px
px
—
픽셀
pt
—
포인트
em
—
부모 기준
rem
—
루트(html) 기준
vw
—
뷰포트 (1920px 기준)
%
—
부모 기준 퍼센트
루트(html) 폰트:
px
부모 폰트:
px
em·%는 부모, rem은 루트 기준
clamp() 반응형 폰트 코드 생성기
모바일 최솟값, 데스크탑 최댓값을 입력하면 반응형
clamp() CSS 코드를 자동 생성해요.
📐 clamp() 설정
최솟값 (모바일 px)
기준값 (vw %)
최댓값 (데스크탑 px)
font-size: clamp(14px, 2.5vw, 20px);
자주 쓰는 글자 크기 참조표
📝 본문 (body)
16px
12pt
1rem
🔤 소제목 (h4)
18px
13.5pt
1.125rem
📌 중제목 (h3)
20px
15pt
1.25rem
📢 제목 (h2)
24px
18pt
1.5rem
🏆 대제목 (h1)
32px
24pt
2rem
🏷️ 캡션/라벨
12px
9pt
0.75rem
🔘 버튼/UI
14px
10.5pt
0.875rem
🖨️ 인쇄 본문
10~12pt
A4 기준
🔧 CSS 글자 크기 단위 완전 가이드
각 단위의 기준과 사용 목적이 달라요. 상황에 맞는 단위를 선택하세요.
px
화면 픽셀 1개 = 절대 단위
화면 해상도에 관계없이 고정 크기. 정확한 크기 지정이 필요할 때 사용. 브라우저 폰트 크기 설정을 무시함.
pt
1pt = 1/72인치 · 96dpi 기준 1pt≈1.33px
인쇄·워드·한글·포토샵 등 문서 작성 단위. 웹보다 인쇄 디자인에 주로 사용됨.
em
부모 요소 폰트 크기 기준 · 상대 단위
부모가 16px이면 1em = 16px. 중첩 시 계속 곱해져 복잡해질 수 있음. padding·margin에 활용 많음.
rem
html 루트 폰트 기준 · 브라우저 기본 16px
어디서든 항상 루트 기준이라 예측이 쉬움. 반응형 웹에서 가장 권장하는 단위. 사용자 브라우저 설정 존중.
vw
뷰포트 너비의 1% · 유동 단위
화면 크기에 따라 폰트가 커지고 작아짐. 히어로 제목·배너 텍스트에 효과적. clamp()와 조합하면 최적.
clamp()
min · preferred · max 세 값 조합
clamp(14px, 2.5vw, 20px) 형태. 모바일엔 최솟값, 데스크탑엔 최댓값으로 자동 제한. 현대 반응형 타이포그래피 표준.
💡 단위 선택 가이드 & 팁
🌐 웹 개발 권장 단위
•본문: rem (1rem = 16px)
•버튼·UI: rem 또는 em
•히어로 제목: clamp() + vw
•border·shadow: px 고정
🖨️ 인쇄·문서 권장 단위
•Word·한글 본문: 10~12pt
•프레젠테이션 본문: 18~24pt
•Photoshop: pt 또는 px
•A4 인쇄 최소: 8pt
✨ clamp() 활용 예시
•본문: clamp(14px, 1.5vw, 18px)
•h1: clamp(24px, 5vw, 48px)
•h2: clamp(20px, 3vw, 32px)
•미디어쿼리 없이 반응형 가능
♿ 접근성 최소 글자 크기
•WCAG AA: 본문 최소 16px
•모바일: 최소 14px 권장
•캡션·주석: 최소 12px
•사용자 폰트 설정 존중 → rem 사용
❓ 자주 묻는 질문
Q. px와 pt의 차이는 무엇인가요?
96dpi 화면 기준으로 1pt = 1.333px, 1px = 0.75pt예요. 웹에서는 px를, Word·한글·Photoshop 등 인쇄 문서에서는 pt를 사용해요. 웹 본문 16px는 인쇄 시 약 12pt에 해당해요.
Q. em과 rem의 차이는 무엇인가요?
em은 부모 요소 폰트 크기를 기준으로 계산돼요. 중첩될 경우 계속 곱해져 복잡해질 수 있어요. rem은 항상 html 루트 요소 폰트 크기를 기준으로 해서 예측이 쉬워요. 반응형 웹에서는 rem 사용을 권장해요.
Q. clamp()란 무엇이고 어떻게 사용하나요?
clamp(최솟값, 기준값, 최댓값) 형태로 폰트 크기의 범위를 지정해요. 예:
font-size: clamp(14px, 2.5vw, 20px)은 화면이 좁아도 최소 14px, 넓어도 최대 20px을 보장해요. 미디어 쿼리 없이 반응형 타이포그래피를 구현할 수 있어요.
Q. 반응형 웹에서 어떤 단위를 써야 하나요?
본문은 rem, 반응형 제목은 clamp()를 권장해요. rem은 브라우저 기본 폰트 설정을 존중하고 사용자 접근성에 유리해요. 대형 제목·배너는 clamp()로 최솟값·최댓값을 지정하면 모바일과 데스크탑 모두 자연스럽게 조정돼요.
Q. 브라우저 기본 폰트 크기가 왜 16px인가요?
W3C 웹 표준에서 사용자 가독성을 고려해 16px를 기본값으로 권장했고, 모든 주요 브라우저(Chrome·Firefox·Safari·Edge)가 이를 따르고 있어요. 사용자가 브라우저 설정에서 변경할 수 있어요. 이 때문에 rem은 1rem = 16px가 기본이에요.
글자 크기 변환기
px · pt · em · rem · vw 즉시 변환 · clamp() 코드 생성 · 실시간 미리보기
⚡ 즉시 변환
🔧 5가지 단위
👁️ 실시간 미리보기
📋 CSS 코드 복사
✨ clamp() 생성기
글자 크기 단위 변환
px
px
—
픽셀
pt
—
포인트
em
—
부모 기준
rem
—
루트(html) 기준
vw
—
뷰포트 (1920px 기준)
%
—
부모 기준 퍼센트
루트(html) 폰트:
px
부모 폰트:
px
em·%는 부모, rem은 루트 기준
clamp() 반응형 폰트 코드 생성기
모바일 최솟값, 데스크탑 최댓값을 입력하면 반응형
clamp() CSS 코드를 자동 생성해요.
📐 clamp() 설정
최솟값 (모바일 px)
기준값 (vw %)
최댓값 (데스크탑 px)
font-size: clamp(14px, 2.5vw, 20px);
자주 쓰는 글자 크기 참조표
📝 본문 (body)
16px
12pt
1rem
🔤 소제목 (h4)
18px
13.5pt
1.125rem
📌 중제목 (h3)
20px
15pt
1.25rem
📢 제목 (h2)
24px
18pt
1.5rem
🏆 대제목 (h1)
32px
24pt
2rem
🏷️ 캡션/라벨
12px
9pt
0.75rem
🔘 버튼/UI
14px
10.5pt
0.875rem
🖨️ 인쇄 본문
10~12pt
A4 기준
🔧 CSS 글자 크기 단위 완전 가이드
각 단위의 기준과 사용 목적이 달라요. 상황에 맞는 단위를 선택하세요.
px
화면 픽셀 1개 = 절대 단위
화면 해상도에 관계없이 고정 크기. 정확한 크기 지정이 필요할 때 사용. 브라우저 폰트 크기 설정을 무시함.
pt
1pt = 1/72인치 · 96dpi 기준 1pt≈1.33px
인쇄·워드·한글·포토샵 등 문서 작성 단위. 웹보다 인쇄 디자인에 주로 사용됨.
em
부모 요소 폰트 크기 기준 · 상대 단위
부모가 16px이면 1em = 16px. 중첩 시 계속 곱해져 복잡해질 수 있음. padding·margin에 활용 많음.
rem
html 루트 폰트 기준 · 브라우저 기본 16px
어디서든 항상 루트 기준이라 예측이 쉬움. 반응형 웹에서 가장 권장하는 단위. 사용자 브라우저 설정 존중.
vw
뷰포트 너비의 1% · 유동 단위
화면 크기에 따라 폰트가 커지고 작아짐. 히어로 제목·배너 텍스트에 효과적. clamp()와 조합하면 최적.
clamp()
min · preferred · max 세 값 조합
clamp(14px, 2.5vw, 20px) 형태. 모바일엔 최솟값, 데스크탑엔 최댓값으로 자동 제한. 현대 반응형 타이포그래피 표준.
💡 단위 선택 가이드 & 팁
🌐 웹 개발 권장 단위
•본문: rem (1rem = 16px)
•버튼·UI: rem 또는 em
•히어로 제목: clamp() + vw
•border·shadow: px 고정
🖨️ 인쇄·문서 권장 단위
•Word·한글 본문: 10~12pt
•프레젠테이션 본문: 18~24pt
•Photoshop: pt 또는 px
•A4 인쇄 최소: 8pt
✨ clamp() 활용 예시
•본문: clamp(14px, 1.5vw, 18px)
•h1: clamp(24px, 5vw, 48px)
•h2: clamp(20px, 3vw, 32px)
•미디어쿼리 없이 반응형 가능
♿ 접근성 최소 글자 크기
•WCAG AA: 본문 최소 16px
•모바일: 최소 14px 권장
•캡션·주석: 최소 12px
•사용자 폰트 설정 존중 → rem 사용
❓ 자주 묻는 질문
Q. px와 pt의 차이는 무엇인가요?
96dpi 화면 기준으로 1pt = 1.333px, 1px = 0.75pt예요. 웹에서는 px를, Word·한글·Photoshop 등 인쇄 문서에서는 pt를 사용해요. 웹 본문 16px는 인쇄 시 약 12pt에 해당해요.
Q. em과 rem의 차이는 무엇인가요?
em은 부모 요소 폰트 크기를 기준으로 계산돼요. 중첩될 경우 계속 곱해져 복잡해질 수 있어요. rem은 항상 html 루트 요소 폰트 크기를 기준으로 해서 예측이 쉬워요. 반응형 웹에서는 rem 사용을 권장해요.
Q. clamp()란 무엇이고 어떻게 사용하나요?
clamp(최솟값, 기준값, 최댓값) 형태로 폰트 크기의 범위를 지정해요. 예:
font-size: clamp(14px, 2.5vw, 20px)은 화면이 좁아도 최소 14px, 넓어도 최대 20px을 보장해요. 미디어 쿼리 없이 반응형 타이포그래피를 구현할 수 있어요.
Q. 반응형 웹에서 어떤 단위를 써야 하나요?
본문은 rem, 반응형 제목은 clamp()를 권장해요. rem은 브라우저 기본 폰트 설정을 존중하고 사용자 접근성에 유리해요. 대형 제목·배너는 clamp()로 최솟값·최댓값을 지정하면 모바일과 데스크탑 모두 자연스럽게 조정돼요.
Q. 브라우저 기본 폰트 크기가 왜 16px인가요?
W3C 웹 표준에서 사용자 가독성을 고려해 16px를 기본값으로 권장했고, 모든 주요 브라우저(Chrome·Firefox·Safari·Edge)가 이를 따르고 있어요. 사용자가 브라우저 설정에서 변경할 수 있어요. 이 때문에 rem은 1rem = 16px가 기본이에요.