Pixel to Em Converter : CSS 단위별 폰트크기(px, em, %, pt)
C.m.A Util
Pixel to Em Converter : CSS 단위별 폰트크기(px, em, %, pt)
Pixel to Em Converter : CSS 단위별 폰트크기(px, em, %, pt)
상대적인 폰트 크기를 지정할 때 주로 사용되는 em(rem), 특히나 반응형 웹 사이트를 제작할 때는 중요합니다.
em (font_size)
해당폰트의 대문자 M의 너비를 기준으로 함 (지정되거나 상속받은 (또는 상위 엘리먼트)에 대한 백분율 상대 크기)
rem (font_size)
해당폰트의 대문자 M의 너비를 기준으로 함 (지정되거나 상속받은 (또는 ROOT 엘리먼트)에 대한 백분율 상대 크기)
ex (x-height)
px (pixel)
% (percent)
pt (point)
Pixel to Em(Rem) 변환 공식 및 예제
PX to EM ,
PX to REM
공식) size in pixels / parent size in pixel
예) 12px / 16px = 0.75em
예) 12px / 16px = 0.75em
PX to %
PX to PT
EM to PX
,
REM to PX
EM to %
,
REM to %
Pixel to Em(Rem) / Em(Rem) to Pixel Converter
em : 요소의 크기를 부모 요소의 폰트 크기에 비례하여 조정
rem : 요소의 크기를 루트 요소(html)의 폰트 크기를 기준에 비례하여 조정
대부분의 브라우저는 폰트 사이즈의 기본값 : 16px, 1em(rem), 12pt, 100%
em : 요소의 크기를 부모 요소의 폰트 크기에 비례하여 조정
rem : 요소의 크기를 루트 요소(html)의 폰트 크기를 기준에 비례하여 조정
대부분의 브라우저는 폰트 사이즈의 기본값 : 16px, 1em(rem), 12pt, 100%
| Pixels | EMs/REMs | Percent | Points |
|---|---|---|---|
| 1 5px p {font-size: 5px;} 글꼴 | 0.313em {font-size: 0.313em;} p {font-size: 0.313rem;} 글꼴 | 31.3% p {font-size: 31.3%;} 글꼴 | 4pt p {font-size: 4pt;} 글꼴 |
| 2 6px p {font-size: 6px;} 글꼴 | 0.375em {font-size: 0.375em;} p {font-size: 0.375rem;} 글꼴 | 37.5% p {font-size: 37.5%;} 글꼴 | 5pt p {font-size: 5pt;} 글꼴 |
| 3 7px p {font-size: 7px;} 글꼴 | 0.438em {font-size: 0.438em;} p {font-size: 0.438rem;} 글꼴 | 43.8% p {font-size: 43.8%;} 글꼴 | 5pt p {font-size: 5pt;} 글꼴 |
| 4 8px p {font-size: 8px;} 글꼴 | 0.5em {font-size: 0.5em;} p {font-size: 0.5rem;} 글꼴 | 50% p {font-size: 50%;} 글꼴 | 6pt p {font-size: 6pt;} 글꼴 |
| 5 9px p {font-size: 9px;} 글꼴 | 0.563em {font-size: 0.563em;} p {font-size: 0.563rem;} 글꼴 | 56.3% p {font-size: 56.3%;} 글꼴 | 7pt p {font-size: 7pt;} 글꼴 |
| 6 10px p {font-size: 10px;} 글꼴 | 0.625em {font-size: 0.625em;} p {font-size: 0.625rem;} 글꼴 | 62.5% p {font-size: 62.5%;} 글꼴 | 8pt p {font-size: 8pt;} 글꼴 |
| 7 11px p {font-size: 11px;} 글꼴 | 0.688em {font-size: 0.688em;} p {font-size: 0.688rem;} 글꼴 | 68.8% p {font-size: 68.8%;} 글꼴 | 8pt p {font-size: 8pt;} 글꼴 |
| 8 12px p {font-size: 12px;} 글꼴 | 0.75em {font-size: 0.75em;} p {font-size: 0.75rem;} 글꼴 | 75% p {font-size: 75%;} 글꼴 | 9pt p {font-size: 9pt;} 글꼴 |
| 9 13px p {font-size: 13px;} 글꼴 | 0.813em {font-size: 0.813em;} p {font-size: 0.813rem;} 글꼴 | 81.3% p {font-size: 81.3%;} 글꼴 | 10pt p {font-size: 10pt;} 글꼴 |
| 10 14px p {font-size: 14px;} 글꼴 | 0.875em {font-size: 0.875em;} p {font-size: 0.875rem;} 글꼴 | 87.5% p {font-size: 87.5%;} 글꼴 | 11pt p {font-size: 11pt;} 글꼴 |
| 11 15px p {font-size: 15px;} 글꼴 | 0.938em {font-size: 0.938em;} p {font-size: 0.938rem;} 글꼴 | 93.8% p {font-size: 93.8%;} 글꼴 | 11pt p {font-size: 11pt;} 글꼴 |
| 12 16px p {font-size: 16px;} 글꼴 | 1em {font-size: 1em;} p {font-size: 1rem;} 글꼴 | 100% p {font-size: 100%;} 글꼴 | 12pt p {font-size: 12pt;} 글꼴 |
| 13 17px p {font-size: 17px;} 글꼴 | 1.063em {font-size: 1.063em;} p {font-size: 1.063rem;} 글꼴 | 106.3% p {font-size: 106.3%;} 글꼴 | 13pt p {font-size: 13pt;} 글꼴 |
| 14 18px p {font-size: 18px;} 글꼴 | 1.125em {font-size: 1.125em;} p {font-size: 1.125rem;} 글꼴 | 112.5% p {font-size: 112.5%;} 글꼴 | 14pt p {font-size: 14pt;} 글꼴 |
| 15 19px p {font-size: 19px;} 글꼴 | 1.188em {font-size: 1.188em;} p {font-size: 1.188rem;} 글꼴 | 118.8% p {font-size: 118.8%;} 글꼴 | 14pt p {font-size: 14pt;} 글꼴 |
| 16 20px p {font-size: 20px;} 글꼴 | 1.25em {font-size: 1.25em;} p {font-size: 1.25rem;} 글꼴 | 125% p {font-size: 125%;} 글꼴 | 15pt p {font-size: 15pt;} 글꼴 |
| 17 21px p {font-size: 21px;} 글꼴 | 1.313em {font-size: 1.313em;} p {font-size: 1.313rem;} 글꼴 | 131.3% p {font-size: 131.3%;} 글꼴 | 16pt p {font-size: 16pt;} 글꼴 |
| 18 22px p {font-size: 22px;} 글꼴 | 1.375em {font-size: 1.375em;} p {font-size: 1.375rem;} 글꼴 | 137.5% p {font-size: 137.5%;} 글꼴 | 17pt p {font-size: 17pt;} 글꼴 |
| 19 23px p {font-size: 23px;} 글꼴 | 1.438em {font-size: 1.438em;} p {font-size: 1.438rem;} 글꼴 | 143.8% p {font-size: 143.8%;} 글꼴 | 17pt p {font-size: 17pt;} 글꼴 |
| 20 24px p {font-size: 24px;} 글꼴 | 1.5em {font-size: 1.5em;} p {font-size: 1.5rem;} 글꼴 | 150% p {font-size: 150%;} 글꼴 | 18pt p {font-size: 18pt;} 글꼴 |
| 21 25px p {font-size: 25px;} 글꼴 | 1.563em {font-size: 1.563em;} p {font-size: 1.563rem;} 글꼴 | 156.3% p {font-size: 156.3%;} 글꼴 | 19pt p {font-size: 19pt;} 글꼴 |
| 22 26px p {font-size: 26px;} 글꼴 | 1.625em {font-size: 1.625em;} p {font-size: 1.625rem;} 글꼴 | 162.5% p {font-size: 162.5%;} 글꼴 | 20pt p {font-size: 20pt;} 글꼴 |
| 23 27px p {font-size: 27px;} 글꼴 | 1.688em {font-size: 1.688em;} p {font-size: 1.688rem;} 글꼴 | 168.8% p {font-size: 168.8%;} 글꼴 | 20pt p {font-size: 20pt;} 글꼴 |
| 24 28px p {font-size: 28px;} 글꼴 | 1.75em {font-size: 1.75em;} p {font-size: 1.75rem;} 글꼴 | 175% p {font-size: 175%;} 글꼴 | 21pt p {font-size: 21pt;} 글꼴 |
| 25 29px p {font-size: 29px;} 글꼴 | 1.813em {font-size: 1.813em;} p {font-size: 1.813rem;} 글꼴 | 181.3% p {font-size: 181.3%;} 글꼴 | 22pt p {font-size: 22pt;} 글꼴 |
| 26 30px p {font-size: 30px;} 글꼴 | 1.875em {font-size: 1.875em;} p {font-size: 1.875rem;} 글꼴 | 187.5% p {font-size: 187.5%;} 글꼴 | 23pt p {font-size: 23pt;} 글꼴 |
| 27 31px p {font-size: 31px;} 글꼴 | 1.938em {font-size: 1.938em;} p {font-size: 1.938rem;} 글꼴 | 193.8% p {font-size: 193.8%;} 글꼴 | 23pt p {font-size: 23pt;} 글꼴 |
| 28 32px p {font-size: 32px;} 글꼴 | 2em {font-size: 2em;} p {font-size: 2rem;} 글꼴 | 200% p {font-size: 200%;} 글꼴 | 24pt p {font-size: 24pt;} 글꼴 |
| 29 33px p {font-size: 33px;} 글꼴 | 2.063em {font-size: 2.063em;} p {font-size: 2.063rem;} 글꼴 | 206.3% p {font-size: 206.3%;} 글꼴 | 25pt p {font-size: 25pt;} 글꼴 |
| 30 34px p {font-size: 34px;} 글꼴 | 2.125em {font-size: 2.125em;} p {font-size: 2.125rem;} 글꼴 | 212.5% p {font-size: 212.5%;} 글꼴 | 26pt p {font-size: 26pt;} 글꼴 |
| 31 35px p {font-size: 35px;} 글꼴 | 2.188em {font-size: 2.188em;} p {font-size: 2.188rem;} 글꼴 | 218.8% p {font-size: 218.8%;} 글꼴 | 26pt p {font-size: 26pt;} 글꼴 |
| 32 36px p {font-size: 36px;} 글꼴 | 2.25em {font-size: 2.25em;} p {font-size: 2.25rem;} 글꼴 | 225% p {font-size: 225%;} 글꼴 | 27pt p {font-size: 27pt;} 글꼴 |