HTML CSS / Font-size (em,px,pt,%)

HTML CSS / Font-size (em,px,pt,%)

 

웹에서만 사용하다 모바일을 고려하다 보니 font-size가 문제가 됩니다.

각종 기기마다 해상도가 다르다 보니 컨텐츠의 text 내용이 작아보이거나 너무 크게 보이는등의 문제가 발행합니다.
font-size 의 단위를 설정하는 방법은 크게 고정단위(px)와 유동단위(%,em)이 있는대 모바일에서 확대 또는 축소되어 보이려면 유동단위를 사용해 주면 됩니다.

 
CSS에서는 글자 폰트 크기나 width, height 등의 크기를 지정할 때 다양한 단위를 사용할 수 있다.
pt(포인트), px(필셀), em, ex, %
대부분의 브라우저는 단위를 사용하지 않으면 자동으로 px(픽셀)단위로 인식하여 렌더링을 하게 되지만,

현재 표준은 0을 제외하고 단위를 항상 명시해주는 것이다.
ex. DIV.test { padding:5px 0 5px 10px; font:normal 9pt 돋움; }

대부분 HTML 개발 시에는 px단위를 사용하고 폰트 크기에는 pt, px 단위를 혼용하여 사용하고는 하는데,
em 이라는 단위를 사용하자는 움직이 있다.
pt, px 가 절대적인 크기를 나타내는데 반해서,

em, ex, % 는 상위 엘레멘트에 대한 상대적인 크기를 나타낸다.
em, ex 단위의 장점이라면 웹 브라우저 메뉴에서 글꼴 크기를 변화시켜 줄 수 있고,

그에 따라 레이아웃을 유동적으로 적용할 수 있기 때문에 접근성이 향상된다.

즉 작은 글자를 보기 어려운 분들도 글자 확대를 하여 쉽게 볼 수 있다는 점이다.
IE 기준으로 글꼴 크기를 “보통”(웹브라우저 디폴트)으로 지정했을 경우 최상엘리멘트 1em은 12pt, 16px 와 같다.
보통 많이 사용하는 굴림체 9pt 의 경우는 12px 이므로 em 으로 환산하면 0.75em 이 됩니다.

 

font-size 계산은 http://pxtoem.com

 

6px 0.375em 37.5% 5pt
7px 0.438em 43.8% 5pt
8px 0.500em 50.0% 6pt
9px 0.563em 56.3% 7pt
10px 0.625em 62.5% 8pt
11px 0.688em 68.8% 8pt
12px 0.750em 75.0% 9pt
13px 0.813em 81.3% 10pt
14px 0.875em 87.5% 11pt
15px 0.938em 93.8% 11pt
16px 1.000em 100.0% 12pt
17px 1.063em 106.3% 13pt
18px 1.125em 112.5% 14pt
19px 1.188em 118.8% 14pt
20px 1.250em 125.0% 15pt
21px 1.313em 131.3% 16pt
22px 1.375em 137.5% 17pt
23px 1.438em 143.8% 17pt
24px 1.500em 150.0% 18pt