가독성을 높이는 css 폰트속성

가독성의 중요성

html의 문서에서 가장 많이 쓰이는 것이 텍스트이다. 내가 만든 컨텐츠의 정보가 방문자 또는 구독자에게 내용을 제대로 잘 전달하기 위해서는 잘읽히고 잘 보이는 문서를 만들어야 한다. 가독성이 떨어지면 글을 읽는데 어려움이 있고 글을 다 읽기도 전에 포기를 하고 이탈이 이루어진다.

css 폰트 제어속성

폰트를 제어하는 css의 소스는 엄청나게 많으나 가장 많이 쓰이는 속성만 간단히 알아보자.

속성	속성값	설명
color	red 또는 #ffffff	텍스트의 컬러
direction	ltr, rtl	텍스트의 방향
line-height	150%	줄간의 간격
text-align	left,right,center,justify	텍스트 정렬
text-spacing	1px	글자 간의 간격
text-decoration	none,underline,overline,line-though,blank	텍스트 장식
text-indent	10px	들여쓰기
text-transform	none,capitalze,uppercase	대소문자 지정
word-spacing	1px	단어 간격

제일 많이 쓰는 텍스트 제어 소스이며 이것들을 이용해서 가독성을 제어할 수있다.

많이 사용되는 css

가장 많이 쓰는 css 스타일은 존재한다. 흔히 포털 사이트들의 폰트 css는 가장 대표적으로 가독성에 초점을 둔 사이트이기 때문에 포털 사이트의 텍스트 스타일을 따라하는 것이 제일 좋은 방법 중 하나이다. 예를 들어 naver의 폰트 사이즈는 12px이며 줄간격은 15px인 150% 주로 사용하고 있다. 한명에게 특화를 할 수 없는 포털 사이트에선 많은 이들에게 최적화된 사이트를 만들고 유지하는 것이 최대의 목표이다.그로인해 많은 검증과 테스트를 통해 이를 이루어 낸다.! 본인 스스로가 어떤게 제일 좋은 가독성인지를 모를시에는 포털사이트의 속성을 참조하는것이 옳다.

포털사이트의 기본 폰트 속성

기본적인 폰트 컬러는 블랙이 제일 많았다. 그 다음 색사은 #666666의 컬러색상이 많이 보였으며 제목이나 중요 글에는 font-weight:blod를 적용하여 두께를 조정하였으나 웹표준으로 보게 되면 <strong>을 사용하는게 더 용이하다.

font-size:11px; 또는 12px

line-height: 15px 또는 16px

letter-spacing: -1px 

word-spacing: 1px

의 텍스트 속성이 제일 많이 사용 되었다. 이부분을 참고해서 텍스트의 가독성을 높이는데 참고를 하면 될듯하다. 제일 중요한건 구독자의 편의성을 고려하는 것이 중요하다. 요즘 모바일을 통한 유입이 pc보다 앞섰기 때문에 모바일에서의 가독성이 더 중요해지고 있기에 이부분도 참고 해야한다.