아이디/비번 기억
  • 봉하마을 방문후기
  • 미디어협동조합 국민TV국민TV의 조합원이 되어주세요!
  • 한국탐사저널리즘센터
현재위치 : HOME > 구구자료실

폰트 글꼴 단위비교

구구 | 2014.11.20 18:45 | 조회 2999
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

6pt8px0.5em50%
7pt9px0.55em55%
7.5pt10px0.625em62.5%
8pt11px0.7em70%
9pt12px0.75em75%
10pt13px0.8em80%
10.5pt14px0.875em87.5%
11pt15px0.95em95%
12pt16px1em100%
13pt17px1.05em105%
13.5pt18px1.125em112.5%
14pt19px1.2em120%
14.5pt20px1.25em125%
15pt21px1.3em130%
16pt22px1.4em140%
17pt23px1.45em145%
18pt24px1.5em150%
20pt26px1.6em160%
22pt29px1.8em180%
24pt32px2em200%
26pt35px2.2em220%
27pt36px2.25em225%
28pt37px2.3em230%
29pt38px2.35em235%
30pt40px2.45em245%
32pt42px2.55em255%
34pt45px2.75em275%
36pt48px3em300%

출처 : http://blog.naver.com/PostView.nhn?blogId=pjh445&logNo=220052228738
twitter facebook me2day 요즘
97개(1/5페이지)
소스자료실
번호 제목 글쓴이 조회 날짜
97 [html/css] 배경고정 스크롤 구구 124 2020.03.16 21:28
96 [html/css] 가로 세로 가운데 정렬 구구 1746 2017.04.14 17:54
95 [etc] 유튜브, 네이버 동영상 자동재생 구구 3728 2015.08.26 17:28
>> [html/css] 폰트 글꼴 단위비교 구구 3000 2014.11.20 18:45
93 [html/css] 맵(Map)의 이해 - 이미지맵걸기 사진 첨부파일 구구 4900 2014.11.06 17:05
92 [html/css] Image Sprites 또는 CSS SPRITE 첨부파일 구구 3273 2014.09.18 17:39
91 [etc] 킴스큐 Tip 구구 3451 2014.06.16 11:23
90 [모바일] PC홈페이지 > 모바일홈페이지 연결소스 구구 6077 2013.07.26 14:22
89 [기획] 색체 이미지맵 첨부파일 구구 11982 2013.03.29 13:26
88 [html/css] 검색폼 만들기 개념 사진 첨부파일 구구 5363 2013.03.07 10:28
87 [html/css] 간단한 롤오버 이미지 만들기 사진 첨부파일 구구 8334 2012.12.05 14:59
86 [etc] 저작권 표시방법 4가지 [1] 구구 11804 2012.07.04 10:14
85 [html/css] float 정렬 해제 등~ 코딩관련정보 사진 첨부파일 구구 4803 2012.06.15 13:39
84 [html/css] 플래시 대체 문구 넣기 구구 5111 2012.06.15 13:36
83 [html/css] 메타태그 총정리 구구 6023 2012.06.15 13:35
82 [html/css] 텍스트에 효과를 주자! 구구 4900 2012.06.15 13:34
81 [html/css] 레어어(div)를 투명하게~ (익스,오페라,파이어폭스) 구구 8948 2012.06.15 13:33
80 [html/css] tr 에 스타일 줘서 링크걸기 구구 5964 2012.06.15 13:33
79 [html/css] 웹표준 교과서 요약 (속성) 구구 8501 2012.06.15 13:32
78 [html/css] 텍스트를 들여쓸때! 구구 5336 2012.06.15 13:31