웹폰트 크기를 비교하는 표를 만들어 드릴게요. px, em, rem 단위는 각각 다른 기준에 따라 크기가 결정
IT
작성자
biolove2
작성일
2025-08-05 16:01
조회
193
웹폰트 크기를 비교하는 표를 만들어 드릴게요. px, em, rem 단위는 각각 다른 기준에 따라 크기가 결정되므로, 용도에 맞게 선택하는 것이 중요합니다. 이 표는 대부분의 브라우저에서 기본 폰트 크기가 16px인 것을 기준으로 작성되었습니다.
웹폰트 크기 비교표 (기본 폰트 16px 기준)
| PX (Pixels) | REM (Root Em) | EM (Em) | 백분율(%) | 설명 |
| 12px | 0.75rem | 0.75em | 75% | 화면의 픽셀에 고정된 절대 단위입니다. 사용자 설정과 무관하게 항상 동일한 크기로 표시됩니다. |
| 14px | 0.875rem | 0.875em | 87.5% | 일반적으로 사용되는 본문 폰트 크기입니다. |
| 16px | 1rem | 1em | 100% | 대부분의 브라우저에서 기본 폰트 크기입니다. rem의 기준이 되는 크기입니다. |
| 18px | 1.125rem | 1.125em | 112.5% | 1rem을 기준으로 계산됩니다. 사용자가 브라우저의 기본 폰트 크기를 변경하면, rem 단위로 설정된 크기도 함께 조절됩니다. |
| 20px | 1.25rem | 1.25em | 125% | 접근성(Accessibility)에 유리한 단위입니다. |
| 24px | 1.5rem | 1.5em | 150% | em 단위는 부모 요소의 폰트 크기에 비례합니다. 부모-자식 관계가 중첩되면 크기가 의도치 않게 커질 수 있습니다. |
| 32px | 2rem | 2em | 200% | 반응형 디자인에 적합한 단위입니다. |
단위별 특징
- px (픽셀): 화면의 픽셀에 고정되는 절대 단위입니다. 장점은 정밀한 디자인이 가능하지만, 사용자가 브라우저 설정을 통해 글자 크기를 변경해도 크기가 변하지 않아 접근성(Accessibility)에 취약할 수 있습니다.
- rem (Root Em):
<html>요소, 즉 루트(Root) 요소의 폰트 크기에 비례하는 상대 단위입니다. 기본적으로1rem은16px과 같지만, 사용자가 브라우저 설정을 변경하면rem으로 설정된 모든 폰트 크기가 일괄적으로 조정됩니다. - em (Em): 부모 요소의 폰트 크기에 비례하는 상대 단위입니다. 중첩된 요소에
em을 사용하면 폰트 크기가 계산될 때마다 계속해서 커질 수 있어 관리가 복잡해질 수 있습니다. - 백분율(%):
em과 마찬가지로 부모 요소의 폰트 크기에 비례하여 계산되는 상대 단위입니다.
대부분의 현대 웹 개발에서는 반응형 디자인과 접근성을 고려하여 px보다는 rem 단위를 사용하는 것을 권장합니다.
전체 0
전체 200
| 번호 | 제목 | 작성자 | 작성일 | 추천 | 조회 |
| 공지사항 |
"최악의 호스팅 서비스 경험 - 카페24 이용 후기 (실제 피해 사례)"
biolove2
|
2025.09.23
|
추천 0
|
조회 235
|
biolove2 | 2025.09.23 | 0 | 235 |
| 199 |
하드파싱(Hard parsing)과 소프트파싱(Soft parsing) ?
biolove2
|
2026.02.07
|
추천 0
|
조회 29
|
biolove2 | 2026.02.07 | 0 | 29 |
| 198 |
 111
biolove2
|
2026.01.03
|
추천 0
|
조회 21
|
biolove2 | 2026.01.03 | 0 | 21 |
| 197 |
[심화 학습 #4] 한국 공공기관 도입을 위한 필수 체크리스트: 보안 가이드라인과 CSAP
biolove2
|
2025.12.21
|
추천 0
|
조회 72
|
biolove2 | 2025.12.21 | 0 | 72 |
| 196 |
한국 공공기관 도입의 필수 관문: CSAP와 보안 가이드라인
biolove2
|
2025.12.21
|
추천 0
|
조회 75
|
biolove2 | 2025.12.21 | 0 | 75 |
| 195 |
[심화 학습 #3] AI 도입의 최종 관문: "데이터 거버넌스 및 보안"
biolove2
|
2025.12.21
|
추천 0
|
조회 60
|
biolove2 | 2025.12.21 | 0 | 60 |
| 194 |
[심화 학습 #2] 텍스트를 넘어 이미지와 도표를 읽다: "멀티모달 RAG"
biolove2
|
2025.12.21
|
추천 0
|
조회 59
|
biolove2 | 2025.12.21 | 0 | 59 |
| 193 |
[심화 학습 #1] AI의 답변 품질을 결정짓는 "Advanced RAG" 핵심 기술 총정리
biolove2
|
2025.12.21
|
추천 0
|
조회 54
|
biolove2 | 2025.12.21 | 0 | 54 |
| 192 |
비정형 데이터 (PDF, 엑셀, 매뉴얼 파일) 벡터화 및 임베딩 과정 (Chunking & Vectorization)
biolove2
|
2025.12.21
|
추천 0
|
조회 68
|
biolove2 | 2025.12.21 | 0 | 68 |
| 191 |
[GCP 시리즈 #5] 5분 완성! Compute Engine으로 나만의 웹 서버 만들기 (실전편)
biolove2
|
2025.12.21
|
추천 0
|
조회 59
|
biolove2 | 2025.12.21 | 0 | 59 |
| 190 |
[GCP 시리즈 #4] 내 서버를 지키는 철통 보안: VPC와 방화벽 완벽 가이드
biolove2
|
2025.12.21
|
추천 0
|
조회 55
|
biolove2 | 2025.12.21 | 0 | 55 |
| 189 |
[GCP 시리즈 #3] 쓰고 보니 1,000만 원? Compute Engine 요금 폭탄 피하는 5가지 전략
biolove2
|
2025.12.21
|
추천 0
|
조회 57
|
biolove2 | 2025.12.21 | 0 | 57 |
| 188 |
[GCP 시리즈 #2] 접속자가 폭주해도 평온한 이유: 오토스케일링과 로드밸런싱
biolove2
|
2025.12.21
|
추천 0
|
조회 55
|
biolove2 | 2025.12.21 | 0 | 55 |
| 187 |
[GCP 시리즈 #1] 클라우드의 심장, Compute Engine이란 무엇인가?
biolove2
|
2025.12.21
|
추천 0
|
조회 52
|
biolove2 | 2025.12.21 | 0 | 52 |
| 186 |
[GCP 시리즈 #1] 클라우드의 심장, Compute Engine이란 무엇인가?
biolove2
|
2025.12.21
|
추천 0
|
조회 50
|
biolove2 | 2025.12.21 | 0 | 50 |
| 185 |
국내 최대 클라우드 관리 전문 기업: 메가존클라우드(MegazoneCloud) 심층 분석
biolove2
|
2025.12.21
|
추천 0
|
조회 60
|
biolove2 | 2025.12.21 | 0 | 60 |
| 184 |
일반 호스팅 vs. GCP + MSP , 비용 비교, 구글 클라우드 MSP 업체, AS 방법
biolove2
|
2025.12.21
|
추천 0
|
조회 57
|
biolove2 | 2025.12.21 | 0 | 57 |
| 183 |
마켓플레이스에서 워드프레스 vs 일반 호스팅(카페24 등) 비교, 장.단점, 이용방법
biolove2
|
2025.12.21
|
추천 0
|
조회 67
|
biolove2 | 2025.12.21 | 0 | 67 |
| 182 |
Google Cloud Marketplace란? 상품 종류, 활용 시나리오,
biolove2
|
2025.12.21
|
추천 0
|
조회 55
|
biolove2 | 2025.12.21 | 0 | 55 |
| 181 |
AMP와 PWA: 2025년 SEO에 더 유리한 것은 무엇일까요?
biolove2
|
2025.12.20
|
추천 0
|
조회 64
|
biolove2 | 2025.12.20 | 0 | 64 |
| 180 |
피지컬 AI의 감각 기관: 데이터 수집 수단 (Sensor Taxonomy)
biolove2
|
2025.12.19
|
추천 0
|
조회 69
|
biolove2 | 2025.12.19 | 0 | 69 |