CSS - pt(point - 포인트) -> px(pixel - 픽셀) 변환

em를 쉽게 사용하기 위해서는 px(pixel - 픽셀)을 알아야 합니다. 그런데 폰트 크기(font-size) 속성 값을 px(pixel - 픽셀)이 아닌 pt(point - 포인트)로 사용할 경우가 많이 있습니다. 그래서 pt(point - 포인트)를 px(pixel - 픽셀)로 변환해 보겠습니다.

 

W3C(World Wide Web Consortium - 월드 와이드 웹 컨소시엄)에서는 단위에 대한 크기를 지정해 두었습니다.

자세한 내용은 W3C 웹 사이트(https://www.w3.org/TR/css3-values)를 참조하세요.

 

위의 단위 테이블을 보면 pt(point - 포인트)와 px(pixel - 픽셀)이 in(inche - 인치)를 기준으로 크기가 지정되어 있는 것을 알 수 있습니다.

in(inche) 1in = 2.54cm = 96px
pt(point) 1pt = 1/72 in
px(pixel) 1px = 1/96 in

 

1in(inche - 인치)는 2.54cm이고 px(pixel - 픽셀)로 96px입니다. 그래서 1px(pixel - 픽셀)은 1/96 in(inche - 인치)입니다.

그리고 1pt(point - 포인트)는 1/72 in(inche - 인치)입니다. 그래서 1in(inche - 인치)는 72pt(point - 포인트)입니다.

1in(inche) = 2.54cm = 72pt(point) = 96px(pixel)

 

그래서 pt(point - 포인트)를 px(pixel - 픽셀)로 변환하는 공식은 pt(point - 포인트)로 px(pixel - 픽셀)를 나누면 됩니다.

var px = 96 / 72;

console.log(px);
--> 1.3333333333333333

 

1pt(point - 포인트)은 1.3333333333333333px(pxiel) 입니다.

1pt(point) = 96px(pixel)/72pt(point) = 1.3333333333333333px(pixel)

 

pt(point - 포인트)를 px(pixel - 픽셀)로 변환하는 함수는 다음과 같습니다. 소수점 2자리까지만 나오게 했습니다.

function pointTopixel(point) {
	return ((point * 96) / 72).toFixed(2);
}

console.log(pointTopixel(6));
--> 8.00

 

 

pt(point - 포인트) -> px(pixel - 픽셀) 변환

 

아래 표는 폰트 크기(font-size) 속성 값에서 많이 사용하는 pt(point - 포인트)도 구성하였습니다.

pt(point)	px(pixel)
1pt	1.33px
2pt	2.67px
3pt	4.00px
4pt	5.33px
5pt	6.67px
6pt	8.00px
7pt	9.33px
8pt	10.67px
9pt	12.00px
10pt	13.33px
11pt	14.67px
12pt	16.00px
14pt	18.67px
16pt	21.33px
18pt	24.00px
24pt	32.00px
32pt	42.67px

 

다른 pt(point - 포인트)는 계산 공식을 이용하여 px(pixel - 픽셀)로 변환해 보시길 바랍니다.

 

참고로 h1, h2, h3, h4, h5, h6 태그의 폰트 크기(font-size) 속성 값입니다.
1em은 HTML 요소(element)의 폰트 크기(font-size) 속성 값이 16px(12pt) 일 경우입니다.

tag	em	pt(point)	px(pixel)
<h1>	2em	24pt	32px
<h2>	1.5em	18pt	24px
<h3>	1.17em	13.55pt(14pt)	18.07px(18.67px)
<h4>	1em	12pt	16px
<h5>	0.83em	10pt	13.33px
<h6>	0.67em	7.55pt(8pt)	10.07px(10.67px)