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

폰트 글꼴 단위비교

구구 | 2014.11.20 18:45 | 조회 3501
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 폰트크기 부모속성에서 조절하기(미디어쿼리 이용시 좋음) 구구 136 2021.01.07 04:00
97 [html/css] 배경고정 스크롤 구구 776 2020.03.16 21:28
96 [html/css] 가로 세로 가운데 정렬 구구 2360 2017.04.14 17:54
95 [etc] 유튜브, 네이버 동영상 자동재생 구구 4348 2015.08.26 17:28
>> [html/css] 폰트 글꼴 단위비교 구구 3502 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홈페이지 > 모바일홈페이지 연결소스 구구 6837 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] 구구 13451 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] 메타태그 총정리 구구 6708 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] 웹표준 교과서 요약 (속성) 구구 9444 2012.06.15 13:32