글자 크기 변환기
글자 크기를 포인트, 픽셀, em, rem, 퍼센트, 밀리미터, 인치, 파이카 사이에서 변환합니다. CSS의 정의를 따르므로 1인치는 96픽셀이며 72포인트입니다. em, rem, %가 기준으로 삼는 루트와 부모 글자 크기도 직접 설정할 수 있습니다.
브라우저는 기본적으로 16px에서 시작합니다. 스타일시트가 html 요소나 부모 요소에 다른 크기를 지정했다면 이 값을 바꾸세요.
12 pt의 모든 단위 환산
| 단위 | 크기 | CSS | 복사 |
|---|---|---|---|
| 포인트(pt) | 12 | 12pt | |
| 픽셀(px) | 16 | 16px | |
| em | 1 | 1em | |
| rem | 1 | 1rem | |
| 퍼센트(%) | 100 | 100% | |
| 밀리미터(mm) | 4.2333 | 4.2333mm | |
| 센티미터(cm) | 0.4233 | 0.4233cm | |
| 인치(in) | 0.1667 | 0.1667in | |
| 파이카(pc) | 1 | 1pc |
계산 과정
- 12 pt × 96 ÷ 72 = 16 px
- 16 px ÷ 16 px = 1 em
- 16 px ÷ 16 px = 1 rem
- 16 px × 25.4 ÷ 96 = 4.2333 mm
Windows의 Word와 Google 문서는 글자 크기를 포인트로 지정하고 1인치를 96픽셀로 취급하므로, 100% 배율에서 12포인트 글자는 브라우저의 16px 글자와 같은 크기로 보입니다.
자주 쓰는 포인트 크기
em, rem, %는 위의 루트 및 부모 크기를 사용합니다.
| 포인트 | 픽셀 | em | rem | % | mm |
|---|---|---|---|---|---|
| 6 | 8 | 0.5 | 0.5 | 50 | 2.12 |
| 7 | 9.33 | 0.583 | 0.583 | 58.3 | 2.47 |
| 8 | 10.67 | 0.667 | 0.667 | 66.7 | 2.82 |
| 9 | 12 | 0.75 | 0.75 | 75 | 3.18 |
| 10 | 13.33 | 0.833 | 0.833 | 83.3 | 3.53 |
| 10.5 | 14 | 0.875 | 0.875 | 87.5 | 3.7 |
| 11 | 14.67 | 0.917 | 0.917 | 91.7 | 3.88 |
| 12 | 16 | 1 | 1 | 100 | 4.23 |
| 14 | 18.67 | 1.167 | 1.167 | 116.7 | 4.94 |
| 16 | 21.33 | 1.333 | 1.333 | 133.3 | 5.64 |
| 18 | 24 | 1.5 | 1.5 | 150 | 6.35 |
| 20 | 26.67 | 1.667 | 1.667 | 166.7 | 7.06 |
| 22 | 29.33 | 1.833 | 1.833 | 183.3 | 7.76 |
| 24 | 32 | 2 | 2 | 200 | 8.47 |
| 28 | 37.33 | 2.333 | 2.333 | 233.3 | 9.88 |
| 32 | 42.67 | 2.667 | 2.667 | 266.7 | 11.29 |
| 36 | 48 | 3 | 3 | 300 | 12.7 |
| 48 | 64 | 4 | 4 | 400 | 16.93 |
| 72 | 96 | 6 | 6 | 600 | 25.4 |
글자 크기 변환기 사용 방법
- 1. 크기와 단위를 입력하세요. 12를 입력하고 포인트를 고르거나, 24를 입력하고 픽셀을 고르세요. 아홉 가지 단위 중 어느 것이든 시작점이 될 수 있습니다.
- 2. 필요하면 기준 크기를 설정하세요. rem은 루트(
html) 글자 크기를, em과 %는 부모 요소의 글자 크기를 기준으로 합니다. 둘 다 브라우저 기본값인 16px로 시작합니다. - 3. 모든 단위의 크기를 확인하세요. 각 행에는 값과 붙여넣을 CSS가 있고 복사 버튼이 있습니다. 계산 과정에는 각 환산이 픽셀을 거치는 모습이 나옵니다.
- 4. 자주 쓰는 크기 표를 보세요. 워드프로세서 메뉴의 글자 크기인 6에서 72포인트까지가 픽셀, em, rem, %, 밀리미터 값과 함께 나열되어 있습니다.
환산 규칙
CSS는 물리 단위끼리의 관계를 정해 두었습니다. 1인치는 96픽셀, 72포인트, 6파이카, 25.4밀리미터입니다. 따라서 1포인트는 정확히 1픽셀의 4/3입니다. 상대 단위는 기준이 되는 글자 크기라는 값이 하나 더 필요합니다.
| 단위 | 픽셀로 환산 | 픽셀에서 환산 |
|---|---|---|
| 포인트(pt) | px = pt × 96 ÷ 72 | pt = px × 72 ÷ 96 |
| 파이카(pc) | px = pc × 16 | pc = px ÷ 16 |
| 밀리미터(mm) | px = mm × 96 ÷ 25.4 | mm = px × 25.4 ÷ 96 |
| 인치(in) | px = in × 96 | in = px ÷ 96 |
| em | px = em × 부모 크기 | em = px ÷ 부모 크기 |
| rem | px = rem × 루트 크기 | rem = px ÷ 루트 크기 |
| 퍼센트(%) | px = % × 부모 크기 ÷ 100 | % = px ÷ 부모 크기 × 100 |
루트와 부모 크기는 픽셀 단위이며, 스타일시트가 바꾸지 않는 한 둘 다 16px입니다.
기본값에서 12pt는 12 × 96 ÷ 72 = 16px입니다. 그러면 16 ÷ 16은 1em, 1rem, 100%이고, 16 × 25.4 ÷ 96은 4.2333mm입니다. 부모 크기를 20px로 설정하면 같은 16px이 0.8em과 80%가 되지만, rem은 부모를 무시하므로 여전히 1rem입니다.
12pt가 16px인 이유
1포인트는 1인치의 1/72이고, CSS 픽셀은 1인치의 1/96입니다. 따라서 12포인트는 12/72 = 1/6인치이며, 96 ÷ 6 = 16픽셀입니다. Windows의 Word와 Google 문서도 화면에서 1인치를 96픽셀로 취급하므로, 100% 배율에서 12포인트 글자는 브라우저의 16px 글자와 같은 크기로 보입니다. 16px은 스타일시트가 크기를 정하지 않은 글자에 브라우저가 쓰는 크기입니다.
CSS 픽셀이 화면의 점 하나와 반드시 같지는 않습니다. 고밀도 화면에서는 CSS 픽셀 하나가 여러 장치 픽셀을 차지하며, 브라우저는 모든 단위를 함께 비례 조정하므로 위의 비율은 항상 성립합니다. 인치당 72포인트 기준에서 흔한 예외는 LaTeX입니다. LaTeX의 pt는 인쇄용 포인트로 인치당 72.27이므로, LaTeX의 12pt는 Word나 CSS의 12pt보다 약 0.4% 작습니다. TeX의 bp(빅 포인트)가 이 변환기가 쓰는 인치당 72포인트입니다.
학술 논문의 글자 크기
스타일 가이드는 글자 크기를 포인트로 정하므로, 논문의 글자 크기를 환산할 일은 거의 없습니다. 다만 각 가이드가 실제로 요구하는 것이 무엇인지 알아 두면 도움이 됩니다:
- APA 7은 한 가지 크기보다 글꼴과 크기의 짝을 제시합니다: 11포인트 Calibri, 11포인트 Arial, 10포인트 Lucida Sans Unicode, 12포인트 Times New Roman, 11포인트 Georgia 또는 10포인트 Computer Modern.
- MLA 9는 읽기 쉬운 글꼴을 요구하며, 기울임꼴이 보통 글자와 대비되어야 합니다. 강사가 달리 정하지 않는 한 크기는 11~13포인트 사이입니다.
- Turabian(학생용 Chicago 스타일): 공식 안내서는 12포인트 Times New Roman이나 Calibri, 또는 11포인트 Arial을 제안합니다.
같은 포인트 크기라도 글꼴마다 다르게 보입니다. Arial은 Times New Roman보다 크게 보이며, 그래서 APA는 글꼴마다 크기를 짝지어 둡니다. 여백, 간격, 머리글 등 나머지 페이지 서식은 APA, MLA, Chicago로 학술 논문을 서식하는 방법을 보세요.
자주 묻는 질문
- 12pt는 몇 픽셀인가요?
- 16픽셀입니다. CSS는 1인치를 96픽셀이자 72포인트로 정의하므로, 1포인트는 픽셀의 4/3이고 12 × 4/3 = 16입니다. 같은 원리로 10pt는 13.33px, 11pt는 14.67px, 14pt는 18.67px입니다.
- px를 rem으로 어떻게 바꾸나요?
- 루트 글자 크기로 나누세요. 기본값 16px에서는 24px이 24 ÷ 16 = 1.5rem이고, 14px은 0.875rem입니다. 스타일시트가
html요소에 다른 크기를 지정했다면, 그 값을 루트 크기로 입력하면 변환기가 그 값을 사용합니다. - em과 rem은 무엇이 다른가요?
- 둘 다 글자 크기를 기준으로 하지만 기준이 다릅니다. rem은 항상 루트(
html) 요소를 기준으로 하므로 1.5rem은 페이지 어디서나 같은 크기입니다. em은 부모 요소를 기준으로 하므로, 글자가 이미 1.5em인 상자 안의 1.5em은 루트 크기의 2.25배가 됩니다. em은 누적되고 rem은 누적되지 않습니다. - 1em은 항상 16px인가요?
- 기본값에서만 그렇습니다. 1em은 부모 요소의 글자 크기이고 1rem은 루트의 글자 크기이며, 브라우저는 둘 다 16px에서 시작합니다. 독자가 브라우저 설정에서 기본 글자 크기를 키우면 이 시작점이 바뀌므로, rem이나 em으로 지정한 글자는 독자의 선택을 따르고 px로 지정한 글자는 따르지 않습니다.
- 12pt는 밀리미터로 얼마인가요?
- 12포인트는 1/6인치, 약 4.23mm입니다. 이 값은 글꼴의 em 상자, 즉 각 글자가 그려지는 설계 공간의 크기입니다. 대문자의 실제 높이가 아니며, 일반적인 본문 글꼴에서 대문자의 높이는 이 상자의 약 3분의 2입니다.
- 같은 포인트 크기라도 어떤 글꼴은 왜 더 커 보이나요?
- 포인트 크기는 보이는 글자가 아니라 em 상자를 정합니다. 글꼴마다 그 상자 안에서 글자를 다른 비율로 그리므로, 예를 들어 Arial은 Times New Roman보다 소문자가 높아서 12포인트 Arial이 더 커 보입니다. 그래서 APA 7은 모든 글꼴에 한 가지 크기를 쓰지 않고, 11포인트 Arial을 12포인트 Times New Roman과 짝지습니다.