goodthings4me.tistory.com
◆ 글자(폰트) 사이즈 계산 방법 - px, em, %, pt
- px : pixel, 모니터(display장치) 등에서 디지털 이미지를 이루는 원소
※ 디지털 이미지 해상도는 ppi(pixels per inch)로 나타냄
- em : 폰트의 대문자 M의 너비를 기준으로 하는 글자체 크기
- % : 기본 글꼴의 크기(16px)에 대한 상대적인 값
- pt : 일반 문서 등에서 글자 크기로 많이 사용하는 단위
⊙ 계산 방법
- 기본값(브라우저 Body) : 16px = 1em
- em = px / 16px((기본값)
- % = px / 16px((기본값) × 100 (or px * 0.75 / 12)
- pt = px / 1.33333 (or px * 0.75)
◆ 단위별(px, em, %, pt) 폰트 크기
Pixels | Ems | Percent | Points |
---|---|---|---|
1px | 0.063em | 6.25% | 0.76pt |
2px | 0.125em | 12.5% | 1.51pt |
3px | 0.188em | 18.75% | 2.26pt |
4px | 0.25em | 25% | 3.01pt |
5px | 0.313em | 31.25% | 3.76pt |
6px | 0.375em | 37.5% | 4.51pt |
7px | 0.438em | 43.75% | 5.26pt |
8px | 0.5em | 50% | 6.01pt |
9px | 0.563em | 56.25% | 6.76pt |
10px | 0.625em | 62.5% | 7.51pt |
11px | 0.688em | 68.75% | 8.26pt |
12px | 0.75em | 75% | 9.01pt |
13px | 0.813em | 81.25% | 9.76pt |
14px | 0.875em | 87.5% | 10.51pt |
15px | 0.938em | 93.75% | 11.26pt |
16px | 1em | 100% | 12.01pt |
17px | 1.063em | 106.25% | 12.76pt |
18px | 1.125em | 112.5% | 13.51pt |
19px | 1.188em | 118.75% | 14.26pt |
20px | 1.25em | 125% | 15.01pt |
21px | 1.313em | 131.25% | 15.76pt |
22px | 1.375em | 137.5% | 16.51pt |
23px | 1.438em | 143.75% | 17.26pt |
24px | 1.5em | 150% | 18.01pt |
25px | 1.563em | 156.25% | 18.76pt |
26px | 1.625em | 162.5% | 19.51pt |
27px | 1.688em | 168.75% | 20.26pt |
28px | 1.75em | 175% | 21.01pt |
29px | 1.813em | 181.25% | 21.76pt |
30px | 1.875em | 187.5% | 22.51pt |
31px | 1.938em | 193.75% | 23.26pt |
32px | 2em | 200% | 24.01pt |
33px | 2.063em | 206.25% | 24.76pt |
34px | 2.125em | 212.5% | 25.51pt |
35px | 2.188em | 218.75% | 26.26pt |
36px | 2.25em | 225% | 27.01pt |
37px | 2.313em | 231.25% | 27.76pt |
38px | 2.375em | 237.5% | 28.51pt |
39px | 2.438em | 243.75% | 29.26pt |
40px | 2.5em | 250% | 30.01pt |
41px | 2.563em | 256.25% | 30.76pt |
42px | 2.625em | 262.5% | 31.51pt |
43px | 2.688em | 268.75% | 32.26pt |
44px | 2.75em | 275% | 33.01pt |
45px | 2.813em | 281.25% | 33.76pt |
46px | 2.875em | 287.5% | 34.51pt |
47px | 2.938em | 293.75% | 35.26pt |
48px | 3em | 300% | 36.01pt |
49px | 3.063em | 306.25% | 36.76pt |
50px | 3.125em | 312.5% | 37.51pt |
51px | 3.188em | 318.75% | 38.26pt |
52px | 3.25em | 325% | 39.01pt |
53px | 3.313em | 331.25% | 39.76pt |
54px | 3.375em | 337.5% | 40.51pt |
55px | 3.438em | 343.75% | 41.26pt |
56px | 3.5em | 350% | 42.01pt |
57px | 3.563em | 356.25% | 42.76pt |
58px | 3.625em | 362.5% | 43.51pt |
59px | 3.688em | 368.75% | 44.26pt |
60px | 3.75em | 375% | 45.01pt |
61px | 3.813em | 381.25% | 45.76pt |
62px | 3.875em | 387.5% | 46.51pt |
63px | 3.938em | 393.75% | 47.26pt |
64px | 4em | 400% | 48.01pt |
65px | 4.063em | 406.25% | 48.76pt |
66px | 4.125em | 412.5% | 49.51pt |
67px | 4.188em | 418.75% | 50.26pt |
68px | 4.25em | 425% | 51.01pt |
69px | 4.313em | 431.25% | 51.76pt |
70px | 4.375em | 437.5% | 52.51pt |
71px | 4.438em | 443.75% | 53.26pt |
72px | 4.5em | 450% | 54.01pt |
73px | 4.563em | 456.25% | 54.76pt |
74px | 4.625em | 462.5% | 55.51pt |
75px | 4.688em | 468.75% | 56.26pt |
76px | 4.75em | 475% | 57.01pt |
77px | 4.813em | 481.25% | 57.76pt |
78px | 4.875em | 487.5% | 58.51pt |
79px | 4.938em | 493.75% | 59.26pt |
80px | 5em | 500% | 60.01pt |
81px | 5.063em | 506.25% | 60.76pt |
82px | 5.125em | 512.5% | 61.51pt |
83px | 5.188em | 518.75% | 62.26pt |
84px | 5.25em | 525% | 63.01pt |
85px | 5.313em | 531.25% | 63.76pt |
86px | 5.375em | 537.5% | 64.51pt |
87px | 5.438em | 543.75% | 65.26pt |
88px | 5.5em | 550% | 66.01pt |
89px | 5.563em | 556.25% | 66.76pt |
90px | 5.625em | 562.5% | 67.51pt |
91px | 5.688em | 568.75% | 68.26pt |
92px | 5.75em | 575% | 69.01pt |
93px | 5.813em | 581.25% | 69.76pt |
94px | 5.875em | 587.5% | 70.51pt |
95px | 5.938em | 593.75% | 71.26pt |
96px | 6em | 600% | 72.01pt |
97px | 6.063em | 606.25% | 72.76pt |
98px | 6.125em | 612.5% | 73.51pt |
99px | 6.188em | 618.75% | 74.26pt |
100px | 6.25em | 625% | 75.01pt |
[출처] http://pxtoem.com/ http://chongmoa.com/extopx
'IT(Tip)' 카테고리의 다른 글
데스크탑 조립PC 추천 사양 (0) | 2021.12.27 |
---|---|
[파이썬] pyinstaller로 만든 exe 실행 파일의 바이러스 오탐지 (0) | 2021.12.01 |
카페24(Cafe24) CDN Filezilla 설정 및 접속 방법 (0) | 2021.11.26 |
아나콘다(anaconda) 다운로드 및 설치 (0) | 2021.11.24 |
네이버 블로그 글과 이미지 저장 프로그램(파이썬 Tkinter 모듈로 만듦) (0) | 2021.11.15 |
댓글