나눔스퀘어 폰트 깨짐 현상과 웹폰트 활용방법

폰트는 매우 중요하다. 특히, 디자인 작업을 할 때가 아닌 웹에서 보여지는 폰트를 웹폰트라고 한다. 웹폰트와 디자인 작업을 했을 때의 폰트가 보여지는 것이 다른데, 이와 같은 현상은 간단하게 설명하기 복잡하기 때문에 바로 폰트 깨짐현상에 대해서 정리해본다. 폰트 깨짐이란, 말 그대로 폰트가 뭉개지는 현상을 말한다. 일러스트나 포토샵에서 안티앨리언싱을 적용한 폰트는 깔끔하고 부드럽게 보여지는 반면에, 웹폰트의 경우에는 폰트 사이즈가 변할수록 가독성이 떨어진다.

웹폰트에서 가장 깔끔하게 떨어지고 가독성이 좋다고 하는 나눔스퀘어 폰트조차도 16포인트 이하의 글씨크기에서는 폰트가 선명하지 않고 깨지는 현상이 발생한다. 그래서 가독성을 위해서 일반적으로 웹폰트로는 시스템 기본 폰트인 맑은 고딕이나 애플고딕, 돋움, 굴림 등을 사용한다. 또는 가장 대중적인 한글 무료폰트인 나눔고딕 폰트가 있다. 이들 폰트는 깨짐현상이 덜하고 가독성이 좋아 본문 등의 섹션에 적용했을 때 가장 선명하게 보인다는 장점이 있다.

    font-size: 13~16px;
    line-height: 1.8;
    font-family: AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 고딕',dotum,'돋움',sans-serif;
    color: #333;
    letter-spacing: -1px;

위와 같이 내가 적용한 웹폰트 설정이다. 나눔스퀘어를 적용해봤지만 텍스트가 많은 나의 블로그에는 적합하지 않았다. 여러가지 해결방법을 찾기 위해서 인터넷을 열심히 뒤져 해결방법들을 적용해봤지만, 모두 실패했다. 결과론적으로, 16포인트 이하의 글씨를 표현해야할 때는 나눔스퀘어는 적합하지 않다. 라고 생각할 수 밖에 없었다.

나눔스퀘어 웹폰트는 깃헙에 올라와있고, 데모사이트도 있다. 만약, 데모사이트와 동일한 CSS를 적용한다면 나눔스퀘어를 깔끔하게 적용할 수 있을 것이다.

 

나눔스퀘어 웹폰트 데모사이트

정상적으로 적용시켰다면 위와 같이 표현되어야 한다. 글꼴의 굵기만 다르고, 나머지 CSS 설정은 동일하다.

    font: 1.2em/1.3em 'NanumSquare', sans-serif;
    font-style: normal;
    font-variant-ligatures: normal;
    font-variant-caps: normal;
    font-variant-numeric: normal;
    font-variant-east-asian: normal;
    font-weight: normal;
    font-stretch: normal;
    font-size: 1.2em;
    line-height: 1.3em;
    font-family: NanumSquare, sans-serif;

폰트 사이즈를 포인트로 변환한다면 19.2 포인트로 보인다. 이와 같이 적용했을 때 가장 깔끔하게 표현이 되는 것을 확인할 수 있었다. 나눔스퀘어 웹폰트의 글꼴 굵기는 Regular(400), Bold(700), Extra Bold(800), Light(300)로 적용할 수 있다.

사용방법은 깃헙으로 압축파일을 다운받아 서버에서 불러내는 임폴트 방식이 있지만, 간편하게 외부 CDN으로 적용하는 방법은 아래와 같다.

 

사용방법

link 방식 (권장)

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css">

import 방식

@import url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css);

 

나눔스퀘어 폰트는 분명 좋은 폰트다. 그것도 아주 많이, 그러나 작은 글꼴 사이즈에는 적합하지 않고 본문의 타이틀 부분이나, 제목 부분에 적용하는 것이 가장 좋은 사용방법이라고 생각된다.