PT에서 PX로 변환기

PT에서 PX로 변환기는 화면과 인쇄 작업 모두에서 포인트를 픽셀로, 픽셀을 다시 포인트로 변환합니다. 대부분의 변환기는 고정된 CSS 비율인 1pt = 1.3333px에 기반한 단일 숫자를 보여 줍니다. 이 답은 브라우저에서는 맞지만 거의 모든 다른 경우에는 틀립니다. 포인트는 물리적 단위이며 그 안에 들어가는 픽셀 수는 출력 해상도에 따라 달라지기 때문입니다. 이 도구는 두 가지를 모두 제공합니다. 브라우저가 실제로 렌더링할 CSS 값과 72, 150, 300, 600 또는 사용자 지정 DPI에서의 장치 픽셀 값, 그리고 실제 자에서 밀리미터와 인치로 측정한 실제 물리적 크기입니다.

PT에서 PX로 변환 공식

1포인트는 정확히 1인치의 72분의 1로 정의됩니다. 1인치에 포함되는 픽셀 수는 출력 해상도가 결정합니다. 이 두 사실을 합치면 변환식이 나옵니다.

웹에서는 해상도가 변수로 취급되지 않습니다. CSS 사양이 1in = 96px로 고정하므로 브라우저는 항상 96을 사용하고, 공식은 상수로 단순화됩니다.

따라서 1× 노트북 패널이든 3× 휴대폰 화면이든 모든 브라우저에서 12pt는 16px입니다. CSS 픽셀은 하드웨어 픽셀이 아니라 참조 단위입니다.

1인치, 세 가지 이름

단위를 쉽게 구분하는 방법은 모두 같은 물리적 거리를 설명한다는 사실을 기억하는 것입니다. 아래 막대는 각각 정확히 1인치 너비입니다.

PT에서 PX로 변환표

CSS에는 웹 열을 사용하세요. PDF를 래스터 이미지로 내보내거나 인쇄 파일을 배치하거나 인쇄할 비트맵의 텍스트 크기를 정할 때는 300 DPI 열을 사용하세요.

같은 포인트 크기인데 픽셀 수가 다른 이유

사람들이 가장 자주 헷갈리는 부분이므로 분명히 말해 두겠습니다. 물리적 크기는 절대 변하지 않습니다. 12pt는 언제나 1/6인치입니다. 달라지는 것은 그 1인치를 얼마나 촘촘하게 샘플링하느냐입니다.

• 72 DPI — 1pt = 1px이 되도록 정확히 선택된 역사적인 Macintosh 화면 해상도입니다. 일부 오래된 이미지 파이프라인에서는 여전히 기본값이므로 12pt 텍스트가 때때로 실망스러운 12픽셀로 내보내지는 이유이기도 합니다.
• 96 DPI — Windows 기본값이며 CSS가 기준으로 정의된 참조 해상도입니다. 웹에서 사용하는 값이고 브라우저가 사용하는 값입니다.
• 150 DPI — 초안 인쇄 품질 또는 먼 거리에서 읽도록 만든 대형 포맷 작업에 적합합니다.
• 300 DPI — 상업 인쇄 표준입니다. 300 DPI로 내보낸 12pt 캡션에는 16이 아니라 50픽셀 높이가 필요합니다.
• 600 DPI — 정밀 선화, 고급 인쇄 작업 및 가는 선이 중요한 레이저 출력에 사용됩니다.

작품을 ‘정확한 크기’로 내보냈는데 글자가 흐릿하고 픽셀화되어 나온 적이 있다면, 원인은 거의 항상 이 비율입니다. 레이아웃은 포인트로 측정했지만 래스터는 300 DPI가 아닌 72 또는 96 DPI로 생성된 것입니다.

포인트 크기가 실제로 측정하는 것

12pt 글꼴은 보이는 글자가 12포인트라는 뜻이 아닙니다. 포인트 크기는 서체가 그려지는 보이지 않는 디자인 격자인 em 정사각형을 설명합니다. 글자가 그 정사각형을 얼마나 차지하는지는 전적으로 글꼴 디자이너에 달려 있으므로 같은 포인트 크기로 설정한 두 글꼴도 실제 크기가 매우 다르게 보일 수 있습니다.

CSS에서 pt와 px 중 무엇을 사용해야 하나요?

화면 스타일에는 px 또는 rem을 사용하세요. 포인트는 CSS에서 px와 마찬가지로 절대 단위이므로 동일한 접근성 문제가 있습니다. pt로 크기를 지정한 텍스트는 방문자의 브라우저 글꼴 크기 설정을 따르지 않습니다. 또한 pt를 사용하면 동료가 스타일시트를 읽을 때 출력 장치의 물리적 포인트를 뜻한다고 오해할 수 있습니다.

pt가 실제로 적합한 곳은 인쇄용 스타일시트입니다. 출력이 실제로 인치 단위로 측정되기 때문입니다.

@media print {
  body { font-size: 11pt; line-height: 1.45; }
  h1   { font-size: 24pt; }
  h2   { font-size: 18pt; }
  .no-print { display: none; }
}

브라우저는 인쇄 작업을 생성할 때 실제 용지 크기를 기준으로 해당 포인트를 매핑하므로 11pt 본문은 페이지에서 실제로 11pt 크기로 출력됩니다. 워드 프로세서에서 생성하는 것과 같은 크기입니다.

Word 또는 InDesign 문서를 웹으로 변환하기

1. 문서 스타일시트에서 포인트 크기를 그대로 가져옵니다. 일반적으로 본문은 11pt, 소제목은 16pt, 제목은 24pt입니다.
2. 해상도를 96으로 둔 채 쉼표로 구분하여 값 필드에 한 번에 모두 붙여 넣습니다.
3. CSS 픽셀 열을 확인합니다. 11pt는 14.67px, 16pt는 21.33px, 24pt는 32px가 됩니다.
4. 배포하기 전에 깔끔한 눈금으로 반올림합니다. 인쇄 타이포그래피는 어색한 소수도 허용하지만 웹 글꼴 크기 눈금은 정수 또는 0.5픽셀일 때 더 읽기 좋으므로 14.67px는 보통 15px 또는 16px가 됩니다.
5. 디자인 시스템에서 상대 단위를 사용한다면 최종 픽셀 값을 rem으로 변환합니다.

관련 CSS 절대 단위

포인트는 CSS가 동일한 96픽셀 인치를 기준으로 정의하는 소수의 절대 단위 중 하나입니다. 전체 계열을 알면 변환이 간단해집니다.

• 1in = 96px = 72pt = 6pc = 25.4mm
• 1pc(파이카) = 12pt = 16px
• 1cm = 37.795px ≈ 28.35pt
• 1mm = 3.7795px ≈ 2.835pt
• 1Q(1/4밀리미터) = 0.945px

이 변환기 사용 방법

1. 방향을 선택합니다: pt → px 또는 px → pt.
2. 값을 입력합니다: 숫자 하나 또는 쉼표나 공백으로 구분한 전체 글꼴 크기 눈금을 입력합니다(한 번에 최대 20개). 12pt와 같은 끝의 단위도 허용되며 무시됩니다.
3. 출력 해상도를 설정합니다: CSS 및 웹 작업에는 96 DPI를 유지하거나 72, 150, 300 또는 600 DPI 칩을 누릅니다.
4. 변환을 클릭합니다: 결과, DPI 비교, 실제 크기 글꼴 미리보기, 밀리미터 자 및 참조 눈금을 확인합니다.
5. CSS를 복사합니다: 버튼 하나로 모든 font-size 선언을 복사하며, 원래 포인트 값은 주석으로 유지됩니다.

자주 묻는 질문

pt를 px로 어떻게 변환하나요?

포인트 값에 출력 해상도를 곱한 뒤 72로 나누세요. 포인트 하나는 1인치의 72분의 1이기 때문입니다. 웹에서는 해상도가 96 DPI로 고정되므로 px = pt × 1.3333입니다. 예를 들어 12pt는 16px입니다.

12pt는 픽셀 몇 개인가요?

CSS와 모든 브라우저에서 12pt는 정확히 16px입니다. 300 DPI 인쇄물이나 이미지 파일에서는 같은 12pt 글자가 50픽셀 높이로 표시되고, 600 DPI에서는 100픽셀 높이로 표시됩니다. 해상도에 따라 픽셀 수는 달라지지만 물리적 크기는 그대로이기 때문입니다.

1pt는 항상 1.3333px인가요?

CSS에서는 CSS 사양이 1인치를 정확히 96픽셀로 고정하므로 항상 1.3333px입니다. 하지만 래스터 출력에는 해당하지 않습니다. 300 DPI에서는 1포인트가 4.1667 장치 픽셀이고, 72 DPI에서는 정확히 1픽셀입니다.

pt와 px의 차이는 무엇인가요?

포인트는 1인치의 72분의 1에 해당하는 물리적 타이포그래피 단위로, 인쇄, 워드 프로세서 및 데스크톱 출판에서 사용됩니다. 픽셀은 표시 단위입니다. CSS에서 픽셀도 1인치의 96분의 1이라는 물리적 기준에 연결되므로 웹에서는 두 단위가 고정 비율로 변환되지만 이미지 파일에서는 그렇지 않습니다.

CSS에서 pt와 px 중 무엇을 사용해야 하나요?

화면 스타일에는 px 또는 rem을 사용하고 인쇄용 스타일시트에는 pt를 남겨 두세요. 포인트는 절대적인 물리적 단위이므로 pt로 설정한 글자는 방문자의 브라우저 글꼴 크기 설정을 따르지 않습니다. @media print 블록 안에서는 출력이 실제로 인치로 측정되므로 pt가 자연스러운 단위입니다.

인쇄에는 어떤 DPI를 사용해야 하나요?

300 DPI는 상업 인쇄 및 사진 품질 출력의 표준이고, 150 DPI는 초안이나 멀리서 보는 대형 포맷 작업에 적합하며, 600 DPI는 정밀 선화와 고급 인쇄 작업에 사용됩니다. 프린터나 내보내기 대화 상자가 요구하는 값으로 해상도 필드를 설정하세요.

12pt 텍스트는 화면에서 왜 높이가 12포인트가 아닌가요?

포인트 크기는 글자가 그려지는 디자인 격자인 글꼴의 em 정사각형을 설명하는 것이지 개별 글리프의 높이를 설명하는 것이 아닙니다. 대문자 높이는 일반적으로 em 크기의 약 70%, 소문자 x-height는 약 50%이므로 12pt 대문자의 실제 높이는 대략 8.4pt입니다.

장치 픽셀 비율이 pt에서 px로의 변환을 바꾸나요?

아닙니다. 2× 또는 3× 디스플레이에서도 브라우저는 12pt를 16 CSS 픽셀로 보고한 뒤 32 또는 48개의 하드웨어 픽셀을 사용하여 해당 16 CSS 픽셀을 렌더링합니다. CSS 픽셀은 참조 단위이므로 스타일시트의 숫자는 바뀌지 않으며, 추가 하드웨어 픽셀은 같은 크기를 더 선명하게 표시할 뿐입니다.

추가 자료

• CSS 길이 단위 - MDN
• 절대 길이 - W3C CSS Values