블로그 본문 글씨 크기는 얼마?

블로그 스킨을 바꾸면 고치고 싶은 부분이 눈에 띈다. 그 가운데 본문에 쓰는 글꼴과 크기가 있다. 블로그 본문에 가장 좋은 글꼴과 크기는 뭘까? 사람마다 느낌은 다르니까 정답은 없다. 블로그 본문은 쉽게 읽을 수 있어야 한다고 생각한다. 개인적으로 노안이라서 작은 글씨는 눈에 잘 들어 오지 않는다.

body {
    font-weight: 400;
    font-family: 'NEXON Lv1 Gothic OTF'';
    font-size: 1.0em;
    line-height: 2.1em;
}

CSS에서 글자 크기를 나타내는 단위는 여러 가지다.

단위	설명
pt (points)	1pt=1/72인치=0.35mm로 절대 크기. 1inch=25.4mm
px(pixels)	화면 해상도에 대한 상대 크기
em	1em은 지정된 글꼴 세트에서 'M'자의 너비를 뜻한다.
rem(root em)	HTML 문서의 뿌리(root) 요소에 지정된 크기를 기준으로 상대적인 값을 가진다. em은 바로 위에 있는 부모 요소로부터 크기를 물려받지만, rem은 부모가 아닌 뿌리로부터 크기를 물려받는다.
%	100%는 12pt, 16px와 같다.
vw (viewport width)	1vw는 글자가 들어있는 뷰포트 요소 폭의 1%와 같다.

요즘은 워낙 다양한 디바이스로 웹페이지를 보기 때문에 스킨은 반드시 반응형이라야 한다. 따라서 em이나 vw로 쓰는 것이 좋다. 개발자들은 %를 거의 쓰지 않는 것 같다. 피씨 화면에서 잘 보이다가 모바일로 보면 글자가 너무 작거나 커서 모양이 틀어지는 것은 pt를 써서 그런 것이다.

웹 페이지를 만들 때 글꼴 크기를 지정해주지 않으면 16px, 100%가 디폴트 값이다. em 단위는 부모로부터 크기를 물려받기 때문에 같은 값이 설정되어 있어도 단계가 깊어질 수록 글자 크기가 의도와 달리 커지거나 작아진다. 이런 방식은 부모 또는 조상 가운데 어떤 요소의 값을 바꾸면 모든 자식과 자손 요소도 영향을 받기 때문에 예측하기 어렵고 계산하기 복잡하다. rem은 이런 단점을 극복할 수 있다.

각 크기 사이의 관계는 아래 표와 같다.

Points	Pixels	Ems	Percent
6pt	8px	0.5em	50%
7pt	9px	0.55em	55%
7.5pt	10px	0.625em	62.5%
8pt	11px	0.7em	70%
9pt	12px	0.75em	75%
10pt	13px	0.8em	80%
10.5pt	14px	0.875em	87.5%
11pt	15px	0.95em	95%
12pt	16px	1em	100%
13pt	17px	1.05em	105%
13.5pt	18px	1.125em	112.5%
14pt	19px	1.2em	120%
14.5pt	20px	1.25em	125%
15pt	21px	1.3em	130%
16pt	22px	1.4em	140%
17pt	23px	1.45em	145%
18pt	24px	1.5em	150%
20pt	26px	1.6em	160%
22pt	29px	1.8em	180%
24pt	32px	2em	200%
26pt	35px	2.2em	220%
27pt	36px	2.25em	225%
28pt	37px	2.3em	230%
29pt	38px	2.35em	235%
30pt	40px	2.45em	245%
32pt	42px	2.55em	255%
34pt	45px	2.75em	275%
36pt	48px	3em	300%

http://pxtoem.com/ 

PXtoEM.com: PX to EM conversion made simple.