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

폰트 글꼴 단위비교

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