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

폰트 글꼴 단위비교

구구 | 2014.11.20 18:45 | 조회 3624
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 폰트크기 부모속성에서 조절하기(미디어쿼리 이용시 좋음) 구구 227 2021.01.07 04:00
97 [html/css] 배경고정 스크롤 구구 916 2020.03.16 21:28
96 [html/css] 가로 세로 가운데 정렬 구구 2521 2017.04.14 17:54
95 [etc] 유튜브, 네이버 동영상 자동재생 구구 4510 2015.08.26 17:28
>> [html/css] 폰트 글꼴 단위비교 구구 3625 2014.11.20 18:45
93 [html/css] 맵(Map)의 이해 - 이미지맵걸기 사진 첨부파일 구구 5871 2014.11.06 17:05
92 [html/css] Image Sprites 또는 CSS SPRITE 첨부파일 구구 3950 2014.09.18 17:39
91 [etc] 킴스큐 Tip 구구 4107 2014.06.16 11:23
90 [모바일] PC홈페이지 > 모바일홈페이지 연결소스 구구 7016 2013.07.26 14:22
89 [기획] 색체 이미지맵 첨부파일 구구 14916 2013.03.29 13:26
88 [html/css] 검색폼 만들기 개념 사진 첨부파일 구구 6236 2013.03.07 10:28
87 [html/css] 간단한 롤오버 이미지 만들기 사진 첨부파일 구구 9599 2012.12.05 14:59
86 [etc] 저작권 표시방법 4가지 [1] 구구 13781 2012.07.04 10:14
85 [html/css] float 정렬 해제 등~ 코딩관련정보 사진 첨부파일 구구 5554 2012.06.15 13:39
84 [html/css] 플래시 대체 문구 넣기 구구 5842 2012.06.15 13:36
83 [html/css] 메타태그 총정리 구구 6866 2012.06.15 13:35
82 [html/css] 텍스트에 효과를 주자! 구구 5575 2012.06.15 13:34
81 [html/css] 레어어(div)를 투명하게~ (익스,오페라,파이어폭스) 구구 10020 2012.06.15 13:33
80 [html/css] tr 에 스타일 줘서 링크걸기 구구 6774 2012.06.15 13:33
79 [html/css] 웹표준 교과서 요약 (속성) 구구 9677 2012.06.15 13:32