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

(내용수정, 2020-04-21) em의 수치가 %와 비슷하게 작동한다는 내용 추가

 

 

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

 

한글 웹폰트의 자간

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

 

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

CSS의 경우 한글 폰트를 대상으로는 letter-spacing을 보통 -1px ~ -2px로 주는 것이 일반적입니다. 다만 이 경우 폰트 사이즈가 커지는 경우에 값을 다르게 설정해 주어야 하는 것과 같은 불편이 있습니다. 텍스트가 커져도 동일한 비율로 자간이 좁아지는 방법이 있으면 더욱 편하게 작업이 가능할 것입니다. 이럴 때를 대비해서 em 유닛을 쓰는 것을 저는 추천드립니다. 특히 적용 scope를 em 유닛을 통해서 전체 개체에 적용하게 함으로써 시간을 절약할 수 있습니다. 16px를 본문 기본 폰트 사이즈로 산정할 경우 1/16인 0.0625em를 이용하면 -1px의 효과를 전체 텍스트에 적용할 수 있습니다. 값을 더 늘려야 하는 경우 2/16 또는 1/14 등의 산술을 통해서 값을 변화시킬 수 있습니다. em은 자신 또는 직계 부모 개체의 font-size 값을 바로 상속받아 동일한 배율로 값을 산정하는 단위입니다. rem은 문서의 기본 폰트 사이즈만을 상속받으므로 여기에서의 사용은 다소 부적절합니다.

 

(내용추가) 동일한 %의 자간을 설정하길 원한다면, 예를 들어 모든 텍스트에 -4%의 자간을 설정하고 싶다면  0.4em을 모든 텍스트에 적용해 주면 자동적으로 상대적으로 비율이 조정되는 효과를 낼 수 있습니다.

 

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

 

/* HTML 본문 폰트사이즈가 16인 경우 1/16의 비율(-0.062em)로서 본문 -1px의 자간 간격을 모든 개체에 동일한 비율로 적용할 수 있다 */
/* % 비율로 설정을 원하는 경우 수치를 그대로 em으로 입력해 주면 됩니다. */
* {
	letter-spacing: -0.0375em; 
    /* -3.75%만큼 모든 자간이 줄어듭니다 */
}

/* 모든 개체 선택이 리소스에 부담을 준다면 주요 텍스트 포함 개체만 선택 */
/* 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을 하면 자간이 너무 좁아지는 현상이 발생할 수 있습니다. 그래서 테스팅 시에는 영어와 숫자 표현 시에도 적정 거리가 유지되는지를 확인할 필요가 있습니다. 아니면 영어 텍스트에 대해서는 별도 분기를 하거나 영문 전용 페이지를 구성하는 경우 페이지 단위의 언어 구분을 통해서 값을 상대적으로 조절할 수 있을 것으로 보입니다.

 

참고자료

• https://www.w3schools.com/tags/ref_byfunc.asp