본문 바로가기
디자인 개발/CSS

CSS 한글 웹폰트 자간(letter-spacing) 자동으로(상대적으로) 조정하기

타이포그래피라는 단어가 영어라는 점에서 알 수 있듯 기본적인 이론과 기술의 근원이 영어 즉, 라틴문자를 중심으로 구성이 되어 있습니다. 하지만 한글은 기본적으로 영어와는 전혀 다른 특성을 가지고 있는 글자체계이기 때문에 적용 기술이 영어를 대상으로 하는 것과는 달라야 합니다. 그 중에 특히 차이가 심한 요소가 자간입니다.

 

한글 웹폰트의 자간

웹폰트를 떠나서 대부분 한글 디지털타입페이스는 자간이 다소 넓습니다. 글자 요소별 kerning이 이루어져 있는 영어와 달리 기술적 제약이 있는 것인지 모르겠지만, 대부분의 디지털타입페이스가 그러합니다. 그래서 한글의 경우 자간조정이 거의 필수적으로 이루어지는 경우가 많습니다. 

 

CSS letter-spacing의 적용:  em의 사용 권장

CSS의 경우 한글 폰트를 대상으로는 letter-spacing을 보통 -1px ~ -2px로 주는 것이 일반적입니다. 다만 이는 어디까지나 상대적인 것으로 타입페이스에 따라 다릅니다. 물론 이는 16px를 기본 서체로 산정하는 경우입니다. 다만 개인적으로는 너무 좁은 걸 선호하지 않아서 그 이하 소수점 값으로 설정을 많이 합니다. -1px ~ -2px 처럼 px 단위를 이용해서 자간을 조정하는 것도 일반적으로 많이 사용되는 관행입니다.

 

다만 px를 사용하는 경우 h1과 같은 큰 font size의 개체를 대상으로 하는 경우 자간 조정 효과가 제대로 적용이 안 될 수 있습니다. 이럴 때를 대비해서 em 유닛을 쓰는 것을 저는 추천드립니다. 특히 적용 scope를 em 유닛을 통해서 전체 개체에 적용하게 함으로써 시간을 절약할 수 있습니다. 16px를 본문 기본 폰트 사이즈로 산정할 경우 1/16인 0.0625em를 이용하면 -1px의 효과를 전체 텍스트에 적용할 수 있습니다. 값을 더 늘려야 하는 경우 2/16 또는 1/14 등의 산술을 통해서 값을 변화시킬 수 있습니다. em은 자신 또는 직계 부모 개체의 font-size 값을 바로 상속받아 동일한 배율로 값을 산정하는 단위입니다. rem은 문서의 기본 폰트 사이즈만을 상속받으므로 여기에서의 사용은 다소 부적절합니다.

 

*를 통한 모든 개체 설정도 가능하지만, 리소스 부하를 줄이기 위해 주요 텍스트 포함 개체에 대해서만 스타일을 적용하는 것을 권장드립니다. 주요 텍스트 개체에 대한 목록 확인은 하기 참고자료에 포함한 HTML Referecense 문서에서 확인하실 수 있습니다. html이나 body에만 적용하면 자식들은 자동으로 상위 값을 상속받는 font-size와는 달리 letter-spacing은 기본적으로 font-size가 새롭게 정의될 때 마다 그 값도 같이 변하기 때문에 같은 비율로 값이 설정될 수 있도록 해당 개체에 직접적으로 값이 전달될 수 있어야 하기 때문에 이같은 방법을 사용합니다.

 

/* 1/16의 비율로서 본문 -1px의 자간 간격을 모든 개체에 동일한 비율로 적용할 수 있다 */
/* 1/16의 수치는 -0.0625이지만 개인적으로 너무 좁은 자간을 비선호하기에 그보다 낮은 수치인 -0.0375를 개인적으로 권장합니다. */
* {
	letter-spacing: -0.0375em; 
}

/* 모든 개체 선택이 리소스에 부담을 준다면 주요 텍스트 포함 개체만 선택 */
/* Basic HTML */
h1, h2, h3, h4, h5, h6, p, 

/* Formating */
abbr, address, b, bdi, bdo, blockquote, cite, code, del, dfn, em, i, ins,
kbd, mark, meter, pre, progress, q, rp, rt, ruby, s, samp, small, strong,
sub, sup, template, time, u, var, wbr,

/* Forms and Input */
form, input, textarea, button, select, optgroup, option, label
fieldset, legend, datalist, output,

/* Images */
img, map, area, canvas, figcaption, figure, picture, svg,

/* Links */
a, link, nav,

/* Lists */
ul, ol, li, dl, dt, dd,

/* Tables */
table, caption, th, tr, td, thead, tbody, tfoot, col, colgroup,

/* Styles and Semantics */
div, span, header, footer, main, section, article, aside, details, 
dialog, summary, data {
	letter-spacing: -0.0375em;
}

 

문제점과 개선점

다만 영어를 함께 사용하는 경우 영어는 한글에 맞춰서 letter-spacing을 하면 자간이 너무 좁아지는 현상이 발생할 수 있습니다. 그래서 테스팅 시에는 영어와 숫자 표현 시에도 적정 거리가 유지되는지를 확인할 필요가 있습니다. 아니면 영어 텍스트에 대해서는 별도 분기를 하거나 영문 전용 페이지를 구성하는 경우 페이지 단위의 언어 구분을 통해서 값을 상대적으로 조절할 수 있을 것으로 보입니다.

 

참고자료