디자인&가독성을 높히는 블로그 폰트 적용법

블로그 디자인에 있어 절반 이상의 영향력을 차지하는 것은 외형적인 디자인 요소도 중요하겠지만, 블로그의 폰트(Font)가 더 큰 비중을 차지한다고 해도 과언은 아닐 것입니다.

이미지나 그래픽 요소들을 사용해서 블로그 디자인을 돋보이게 할 수도 있겠지만, 그래픽 요소가 전혀없는 백지모드의 블로그 스킨에 폰트(Font)를 이용한 타이포그래피를 강조한 스타일시트 적용으로 블로그를 돋보이게 할 수도 있다는 것입니다.

블로그 디자인은 그 성격이나 주제에 따라 여러 형태로 표현될 수 있으나 가장 중요한 것은 블로그가 비주얼(Visual)을 중시하는 포토폴리오나 브로슈어가 아니라 정보나 로그(기록 또는 글)를 발행하고 독자층을 형성하는 1인 미디어의 하나인 뉴스페이퍼(Newspaper)의 성향이 짙다는 점입니다. 그러므로, 가장 중시되어야 하는 부분이 '가독성'이고 그것을 뒤받침하는 블로그 디자인과 전체적인 조화를 이루는 '폰트(Font)의 적용' 이라고 할 수 있겠습니다.

그러므로 블로그에 광고프로그램이나 이미지가 있고 없고를 떠나 폰트의 크기와 컬러가 적절한 조화를 이루지 못하고 따로 놀게되면 충분한 가독성을 제공하지 못해서 발행하는 글의 퀄리티나 전달력에도 많은 영향을 끼치게 됩니다. 하지만, 적절한 컬러의 배합이나 광고프로그램과 일치되어 조화를 이루는 글꼴의 적용은 충분한 가독성을 살리는것은 물론 광고 프로그램의 삽입 마져도 부담감을 줄여주게 되며, 블로그 디자인에도 깔끔함과 세련됨을 보여주게 됩니다.

애드센스와 폰트 조화를 반영한 뉴스페이퍼2.0

위의 참고 이미지에서 보는것과 같이 타이틀 ⓐ는 본문과 명확한 구분을 지어주기 위해서 본문과 다른느낌의 바탕체를 적용했고, 큰 폰트가 적용됨을 감안하여 스타일 적용을 통해 가독성을 높여 주었습니다.

본문 ⓑ는 기존 폰트인 돋움체를 버리고 Arial서체를 대체 함으로써 삽입된 애드센스 문단광고의 폰트와 일치를 시켜, 폰트차이를 통한 가독성 저해와 애드센스와의 폰트 조화를 통한 시각적 부담을 최대한 줄일 수 있도록 스타일을 적용시킨 사례라고 볼 수 있습니다.

그리고 애드센스의 URL링크의 컬러와 본문에 사용되는 링크나 강조문장의 컬러를 통일시켜 이질감이 들지않도록 배려를 했습니다. 이 결과 포스트 본문에 문단광고가 들어있지만 한결 가독성이 확보 되고 자연스런 조화로 애드센스 클릭율(CTR)이 점진적으로 증가되는 결과를 볼 수 있었습니다.

아래는 위의 이미지처럼 디자인로그와 뉴스페이퍼2.0의 style.css 수정내용 입니다.

※ 티스토리 style.css의 수정 내용

-. 가독성을 높이는 포스트 타이틀 폰트를 위한 CSS 영역 수정
.entry h2 { font:26px/0.8em Batang, arial, Verdana, AppleGothic, Sans-serif; line-height:14pt; padding-left:2px; padding-top:8px; padding-bottom:4px; letter-spacing:-4px; word-spacing:-2px;}

-. 애드센스 폰트와 조화를 이루는 본문 폰트를 위한 CSS 영역 수정
body{  font:12px/1.5 arial, 돋움, Dotum, Verdana, AppleGothic, Sans-serif;

-. 본문 문단정렬 양쪽정렬을 위한 CSS 영역 수정
.article  { width:520px; margin:5px 5px 5px 10px; overflow:hidden; text-align:justify;}

아울러 그동안 나름대로 여러가지 실험을 통해서 얻은 정보를 바탕으로 아래와 같이 블로그 디자인과 가독성을 위한 효율적인 폰트의 적용방법을 함께 공유하고자 합니다.

1. 블로그와 포스트 폰트에 너무 많은 컬러를 적용하지 마십시요.
2 .포스트 폰트 종류와 크기를 다양하게 적용하지 마십시요.
3. 타이틀 폰트와 본문 폰트의 종류를 구분시켜 가독성을 높히세요.
4. 광고프로그램의 폰트컬러를 본문의 폰트컬러와 일치 시키세요.
5. 본문의 폰트를 광고프로그램 폰트와 일치시키세요.

끝으로, 최근들어 블로그 수익창출의 일환으로 애드센스, 애드클릭스, 링크프라이스 등 여러가지 광고 프로그램이 포스트나 블로그의 부분 영역에 삽입되면서 블로그 전체 디자인을 저해하거나 포스트의 가독성을 해치다는 불만의 목소리가 많이 높았던 적이 있고 이 문제는 계속해서 거론되어지고 있습니다만, 일단 여기서는 광고프로그램 삽입에 대한 옳고 그름에 대해서는 개별적인 선택사항으로 미루고 조금이나마 깔금하고 가독성이 높은 블로그 폰트적용의 관한 이야기를 풀어 보았습니다.