가독성 개선을 위한 글꼴, 행간, 폰트 크기, 글꼴 속성
웹사이트 상에서 HTML 코드에 의해 문자를 표현하는 경우에 한해, 문자의 크기와 간격, 앨리어스 여부, 적절한 행간조정에 관한 김효일의 연구 결과 (김효일, 「인터페이스상에서의 문자 가독성에 관한 연구」, 한성대학교 석사학위논문, 2000, p. 77~88.)를 참고하기를 권한다.
김효일은 평균적인 인터넷 이용자 200명을 대상으로 한 설문조사 결과, 모니터상에서 표현되는 문자 표현에 대해 다음과 같은 결론을 얻었다.
‘서체의 종류와 크기, 앨리어스는 가독성에 많은 영향을 미치는 것으로 분석되었다. 자간과 행간도 영향을 주었으나 문장의 길이와 글줄 길이는 영향을 미치지 않는 것으로 분석되었다.
설문 결과에서 추출된 가독성이 좋은 글자는 굴림(체)로서 200명의 설문자 중 가장 가독성이 좋은 순서의 1위를 기록한 항목 폰트 속성 : 굴림(체), 12pt, 자간 보통, 행간 140%, 글줄길이 17~20, 글줄길이 대비 문장길이 120%, 앨리어스 None의 경우 설문자의 190명이 첫 번째로 잘 보이는 문항으로 선정하여 95%를 기록하였다.(중략)
설문에서 보여진 결과는 서체의 종류와 크기, 앨리어스에 따라서 가독성이 달라지며 앨리어스의 경우는 서체의 종류에 따라 좌우되기도 한다. 굴림(체)와 같이 세리프가 없는 경우엔 앨리어스된 서체가 가독성이 좋은 것으로 나타났으며, 바탕(체)와 궁서(체)와 같이 세리프가 있는 경우엔 안티앨리어스 된 글자가 가독성이 좋은 것으로 나타났다.(중략)
위에 따르면 가장 이상적인 조건의 인터페이스 상의 문자 조건은 다음의 표와 같다.
김효일의 연구 결과, 35개의 예시된 사례 중 가독성 1순위 상세 항목.
|
서체 |
크기 |
자간 |
행간 |
글줄길이 |
글줄길이대비 문장길이 |
앨리어스 |
|
굴림(체) |
12pt |
보통 |
140% |
17 ~ 20 |
120% |
None |
또 정재우도 「영상매체에 구현되는 한글의 가독성에 관한 연구」(정재우, 「영상매체에 구현되는 한글의 가독성에 관한 연구」, 한성대학교 석사학위논문, 1997.)에서 위와 유사한 결과를 얻은 바 있다. 세리프가 있는 명조체보다 고딕체가 상대적으로 가독성이 우수하며 PC모니터 상에서 12포인트의 크기가 가장 적당하고 행간은 150% 이상이면 무난하다는 것, 자간은 넓히지 않은 기본 설정이 가장 무난하다는 것이 그의 연구결과였다.
선행연구의 결과가 말하고 있는 바에 따라, 가독성을 향상시키기 위해서 연구 결과에서 가장 효과적인 글꼴, 행간, 폰트 크기에 대해 권고하고 있는 바를 그대로 적용하기 위한 HTML 구현예는 아래와 같다.
최적의 가독성을 주는 서체, 글자 크기, 자간, 행간 기준.
구분
내용
구현예
서체
굴림(굴림체)
<font face="굴림, 굴림체">
글자크기
11 pixel
12 pixel
<p style="font-size:11px">
<p style="font-size:12px">
자간
조정없음
x
행간
160 %
<p style="line-height:160%">
출처 : 이주희, 사용성 향상을 위한 웹 디자인 스타일 가이드(Web Design Style Guide) 연구, 동덕여자대학교 디자인대학원, 2001.
따끈 : 위 글은 저작자의 동의를 얻어 고쳐 쓴 것임을 알립니다.
쓸만한 웹 만들기
