[Tips] Font 사이즈 비율 계산 정리 (pt, px, em,% 변환)

폰트 사이즈 비율을 계산이 필요한 Web 디자인, UX기획, Front 개발시에 깔끔하게 정리된 정보가 필요해서 매번 찾던 자료를 이 참에 정리해 둡니다.
즘엔 프로토타입 툴들이 제공을 해주긴 합니다만, 디자인 시스템 컴포넌트 정의할 때는 한방에 정리된 자료가 보기도 편하겠죠.

font-size 계산기와 비교 표를 함께 공유 드립니다.

---

Font-size 비율표

• viewport : 96 dpi
• defulat font-size : 16px
• 참고 : 아래쪽에 폰트 계산기 사이트 정보도 연결해두었습니다. 

 

Point(px)	Pixel(px)	Em / rem	Percent	Keyword
6pt	8px	0.5em	50%
6.75pt	9px	0.5625em	56.25%	xx-small
7pt	9.333px	0.5833em	58.333%
7.5pt	10px	0.625em	62.5%	x-small
8pt	10.667px	0.6667em	66.667%
8.25pt	11px	0.6875em	68.75%
9pt	12px	0.75em	75%
9.75pt	13px	0.8125em	81.25%
10pt	13.333px	0.8333em	83.333%	small
10.5pt	14px	0.875em	87.5%
11pt	14.667px	0.9167em	91.667%
11.25pt	15px	0.9375em	93.75%
12pt	16px	1em	100%	medium
12.75pt	17px	1.0625em	106.25%
13pt	17.333px	1.0833em	108.333%
13.5pt	18px	1.125em	112.5%	large
14pt	18.667px	1.1667em	116.667%
14.25pt	19px	1.1875em	118.75%
15pt	20px	1.25em	125%
15.75pt	21px	1.3125em	131.25%
16pt	21.333px	1.3333em	133.333%
16.5pt	22px	1.375em	137.5%
17pt	22.667px	1.4167em	141.667%
17.25pt	23px	1.4375em	143.75%
18pt	24px	1.5em	150%	x-large
18.75pt	25px	1.5625em	156.25%
19pt	25.333px	1.5833em	158.333%
19.5pt	26px	1.625em	162.5%
20pt	26.667px	1.6667em	166.667%
20.25pt	27px	1.6875em	168.75%
21pt	28px	1.75em	175%
21.75pt	29px	1.8125em	181.25%
22pt	29.333px	1.8333em	183.333%
22.5pt	30px	1.875em	187.5%
23pt	30.667px	1.9167em	191.667%
23.25pt	31px	1.9375em	193.75%
24pt	32px	2em	200%	xx-large
24.75pt	33px	2.0625em	206.25%
25pt	33.333px	2.0833em	208.333%
25.5pt	34px	2.125em	212.5%
26pt	34.667px	2.1667em	216.667%
26.25pt	35px	2.1875em	218.75%
27pt	36px	2.25em	225%
27.75pt	37px	2.3125em	231.25%
28pt	37.333px	2.3333em	233.333%
28.5pt	38px	2.375em	237.5%
29pt	38.667px	2.4167em	241.667%
29.25pt	39px	2.4375em	243.75%
30pt	40px	2.5em	250%
30.75pt	41px	2.5625em	256.25%
31pt	41.333px	2.5833em	258.333%
31.5pt	42px	2.625em	262.5%
32pt	42.667px	2.6667em	266.667%
32.25pt	43px	2.6875em	268.75%
33pt	44px	2.75em	275%
33.75pt	45px	2.8125em	281.25%
34pt	45.333px	2.8333em	283.333%
34.5pt	46px	2.875em	287.5%
35pt	46.667px	2.9167em	291.667%
35.25pt	47px	2.9375em	293.75%
36pt	48px	3em	300%

•출처 : https://websemantics.uk/

---

Font-size 계산기 이용 방법

• 출처 : https://websemantics.uk/tools/font-size-conversion-pixel-point-em-rem-percent/

• 아래 표시한 Convert 항목에 폰트를 입력하면, Result 항목에 원하는 스타일로 변환된 폰트 사이즈가 나옵니다.

 

 

#폰트 사이즈 기준,#폰트 사이즈 rem,#폰트 사이즈 mm,#폰트 사이즈 변환,#폰트 사이즈 단위, #Front #design #UI/UX #font #DesignSystem