[모바일기획] 텍스트 설정 가이드

모바일 웹을 위한 텍스트 크기 설정하기

PC 기반의 웹과는 다르게 모바일 웹에서는 텍스트 스타일에 대한 설정이 몇 개 더 추가됩니다. 작은 화면에서 제공되므로 너무 작은 텍스트는 피하고 적절한 크기로 보여야 하기 때문입니다. 그리고 가로 모드와 세로 모드로 변화하기 때문에 변화하는 과정에서 폰트가 너무 커지거나 너무 작아지면 사용자들이 사용하기에 불편할 것입니다. 그래서 텍스트 확대 방지 태그가 나왔습니다.

 

예를 들어, 모바일 사파리 브라우저는 텍스트 영역의 가로를 결정하는 속성값에 맞춰 텍스트의 크기를 자동으로 조절하거나 혹은 크기를 고정할 수 있습니다. 이를 위해서 사용하는 속성은 -webkit-text-size-adjust로 아래와 같이 3가지의 속성을 가지고 있습니다.

 

속성값	설명
auto	화면의 가로 크기를 기준으로 텍스트의 크기를 자동으로 조절합니다.
none	사용자들이 불편함을 느끼지 않도록 폰트의 크기를 자동으로 변환합니다. 기본값으로 설정됩니다.
n%	폰트 크기를 지정된 % 단위의 비율에 맞춰서 변경합니다.

 

 

또한 pt, px 등 절대적인 크기를 나타내는 속성값보다, em, ex, % 라는 상위 요소의 크기에 영향을 받는 상대적인 크기를 나타내는 속성값을 사용해야 합니다. 다양한 해상도와 기기 액정 크기를 생각하면 텍스트 크기도 절대적인 크기보다는 유동적인 상대 크기로 제작하는 것이 접근성 측면으로 더욱 좋습니다.

 

예를 들어, IE 기준으로 글꼴 크기가 "normal"일 경우 크기는 1em, 12pt, 16px 와 같습니다. 기준인 셈이죠. 보통 많이 사용하는 굴림체 9pt의 경우는 12px이므로 em으로 환산하면 0.75em이 됩니다. 다음은 아이폰, 아이패드에서 모바일 웹 페이지를 만든다고 가정했을 때 사용할 수 있는 em 크기 계산표입니다. 아이폰, 아이패드를 기준으로 한 모바일 웹 페이지 제작 시 상당히 유용합니다.

 

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%

 

또한 px를 em 단위로 자동 측정해주는 Em Calculator 웹 페이지(riddle.pl/emcalc)를 활용하는 것도 굉장히 유용합니다.