
폰트 글꼴 단위비교
CSS에서는 글자 폰트 크기나 width, height 등의 크기를 지정할 때 다양한 단위를 사용할 수 있습니다.
pt, px, em, ex, % 등 대부분의 브라우저는 단위를 사용하지 않으면 자동으로 px단위(모니터의 픽셀)로 인식하여 렌더링을 하게 되지만,
현재 표준은 단위를 항상 명시해주는 것입니다.
대부분 HTML 개발 시에는 px 단위를 사용하고 폰트 크기에는 pt, px 단위를 혼용하여 사용하고는 하는데, em이라는 단위를 사용하자는 움직임도 있는 것 같습니다.
pt, px이 절대적인 크기를 나타내는데 반해서, em, ex, % 는 상위 엘리먼트에 대한 상대적인 크기를 나타냅니다.
em, ex 단위의 장점이라면 웹 브라우저의 메뉴에서 글꼴 크기를 조절할 수 있고, 그에 따라 레이아웃이 유동적으로 변화 될 수 있기 때문에 접근성이 향상됩니다. 즉 작은 글자를 보기 어려운 분들도 글자 확대를 하여 쉽게 볼 수 있다는 점이죠.
브라우저 설정에서 글꼴 크기를 "보통(default)"으로 지정했을 경우 1em은 12pt, 16px 와 같습니다. 9pt의 경우는 12px 이므로 em으로 환산하면 0.75em 이 됩니다.
- px (픽셀,1px=모니터의 1dot)
- pt (포인트, 1pt= 1/72 in)
- in (인치, 1in = 25.4 mm)
- pc (파이카, 1pc=12pt)
- em (기준 글꼴에 대한 문자의 높이 기준)
- ex (기준 글꼴에 대한 문자의 소문자 x 높이 기준
- em의 절반 크기 정도)
- % (기준이 되는 글꼴에 대한 퍼센트)
Points |
Pixels |
Ems |
Percent |
---|---|---|---|
6pt | 8px | 0.5em | 50% |
7pt | 9px | 0.55em | 55% |
7.5pt | 10px | 0.625em | 62.5% |
8pt | 11px | 0.7em | 70% |
9pt | 12px | 0.75em | 75% |
10pt | 13px | 0.8em | 80% |
10.5pt | 14px | 0.875em | 87.5% |
11pt | 15px | 0.95em | 95% |
12pt | 16px | 1em | 100% |
13pt | 17px | 1.05em | 105% |
13.5pt | 18px | 1.125em | 112.5% |
14pt | 19px | 1.2em | 120% |
14.5pt | 20px | 1.25em | 125% |
15pt | 21px | 1.3em | 130% |
16pt | 22px | 1.4em | 140% |
17pt | 23px | 1.45em | 145% |
18pt | 24px | 1.5em | 150% |
20pt | 26px | 1.6em | 160% |
22pt | 29px | 1.8em | 180% |
24pt | 32px | 2em | 200% |
26pt | 35px | 2.2em | 220% |
27pt | 36px | 2.25em | 225% |
28pt | 37px | 2.3em | 230% |
29pt | 38px | 2.35em | 235% |
30pt | 40px | 2.45em | 245% |
32pt | 42px | 2.55em | 255% |
34pt | 45px | 2.75em | 275% |
36pt | 48px | 3em | 300% |
출처 : http://blog.naver.com/PostView.nhn?blogId=pjh445&logNo=220052228738





98개(1/5페이지)
번호 | 제목 | 글쓴이 | 조회 | 날짜 |
---|---|---|---|---|
98 | [html/css] em,rem 폰트크기 부모속성에서 조절하기(미디어쿼리 이용시 좋음) | 구구 | 136 | 2021.01.07 04:00 |
97 | [html/css] 배경고정 스크롤 | 구구 | 775 | 2020.03.16 21:28 |
96 | [html/css] 가로 세로 가운데 정렬 | 구구 | 2359 | 2017.04.14 17:54 |
95 | [etc] 유튜브, 네이버 동영상 자동재생 | 구구 | 4348 | 2015.08.26 17:28 |
>> | [html/css] 폰트 글꼴 단위비교 | 구구 | 3501 | 2014.11.20 18:45 |
93 |
[html/css] 맵(Map)의 이해 - 이미지맵걸기
![]() ![]() |
구구 | 5698 | 2014.11.06 17:05 |
92 |
[html/css] Image Sprites 또는 CSS SPRITE
![]() |
구구 | 3814 | 2014.09.18 17:39 |
91 | [etc] 킴스큐 Tip | 구구 | 3958 | 2014.06.16 11:23 |
90 | [모바일] PC홈페이지 > 모바일홈페이지 연결소스 | 구구 | 6836 | 2013.07.26 14:22 |
89 |
[기획] 색체 이미지맵
![]() |
구구 | 14347 | 2013.03.29 13:26 |
88 |
[html/css] 검색폼 만들기 개념
![]() ![]() |
구구 | 6067 | 2013.03.07 10:28 |
87 |
[html/css] 간단한 롤오버 이미지 만들기
![]() ![]() |
구구 | 9369 | 2012.12.05 14:59 |
86 | [etc] 저작권 표시방법 4가지 [1] | 구구 | 13450 | 2012.07.04 10:14 |
85 |
[html/css] float 정렬 해제 등~ 코딩관련정보
![]() ![]() |
구구 | 5403 | 2012.06.15 13:39 |
84 | [html/css] 플래시 대체 문구 넣기 | 구구 | 5696 | 2012.06.15 13:36 |
83 | [html/css] 메타태그 총정리 | 구구 | 6707 | 2012.06.15 13:35 |
82 | [html/css] 텍스트에 효과를 주자! | 구구 | 5426 | 2012.06.15 13:34 |
81 | [html/css] 레어어(div)를 투명하게~ (익스,오페라,파이어폭스) | 구구 | 9828 | 2012.06.15 13:33 |
80 | [html/css] tr 에 스타일 줘서 링크걸기 | 구구 | 6617 | 2012.06.15 13:33 |
79 | [html/css] 웹표준 교과서 요약 (속성) | 구구 | 9443 | 2012.06.15 13:32 |