font-kerning 속성의 이해

font-kerning 속성은
글꼴 내에 저장된 커닝 정보를 사용할지 여부를 지정하는 속성입니다.

커닝(kerning)

'커닝'이란
인접한 문자 사이의 간격을 조정하여 시각적으로 더 조화롭고 매끄롭게 보이게 하는 것을 말합니다.

글자가 나열될 때 각각의 글자의 모양과 간격로 인해서 고르게 배치되지 않는 것처럼 보이는 것을 의도적으로 엇물리게 조정해서 더 짜임새 있고 조화롭게 글자 사이를 조정하는 것입니다.

이를테면, 영문자 V와 A를 같이 나열하는 경우에 두 글자의 간격이 넓어 보이는데, 커닝이 적용되면 글자 사이를 의도적으로 엇물리게 조정하여 더욱 짜임새 있게 글자 사이를 조정합니다. 이것은 단순히 글자를 엇물리는 것이 아니라, "짜임새 있고 조화롭게" 보이도록 만드는 것입니다.

커닝(kerning)
커닝은 인접한 문자 사이를 짜임새 있고 조화롭게 엇물리는 것입니다.

이러한 커닝은 글꼴 파일에 직접 정보로 저장되어 있는 커닝 정보를 가지고 구현하는데, 서체 디자이너에 의해 커닝 정보를 저장할지, 아니면 저장하지 않을지가 결정됩니다. 따라서, 모든 글꼴이 커닝 정보를 제공하는 것은 아닙니다.
주의할 점은 커닝 정보를 제공하지 않는 글꼴은 커닝을 구현하지 않는다는 것입니다.

일반적으로 '자간'이라고 말하는 글자와 글자 사이의 간격은 글자의 모양과 상관없이 고정된 값을 가진다는 점에서 커닝과 차이가 있습니다.

다음은 실제로 font-kerning 속성으로 커닝 적용하기 전과 적용한 후를 비교한 예시입니다.
(이 예시에서는 커닝 정보를 제공하는 글꼴을 사용했습니다다.)

커닝 적용 전 font-kerning: none;으로 커닝 정보를 사용하지 않음

커닝 적용 전에는 V와 A 사이의 간격이 넓어 보이고, V가 A보다 오른쪽으로 더 밀려 있는 것처럼 보입니다.

커닝 적용 후 font-kerning: normal;으로 커닝 정보를 사용함

커닝을 적용하면 V와 A 사이의 간격을 의도적으로 엇물리게 조정하여 두 글자가 시각적으로 자연스럽게 어울리도록 만들 수 있습니다.

font-kerning 속성

CSS의 font-kerning 속성은
글꼴 내에 저장된 커닝 정보를 사용할지 여부를 지정하는 속성입니다.

커닝 정보가 없는 글꼴에는 font-kerning 속성이 영향을 미치지 않습니다.

font-kerning 속성의 형식은 다음과 같습니다.

구문

CSS 
selector {
    font-kerning: /* value */
}

정의

font-kerning 속성의 정의
초깃값 auto
적용 요소 모든 요소
상속 예
애니메이션 아니오

값

font-kerning 속성의 값
auto 브라우저가 결정합니다.
대부분의 경우 글꼴 내에 저장된 커닝 정보를 사용합니다. 하지만, 일부 브라우저에서는 작은 글꼴에 대한 커닝을 비활성화합니다. 커닝을 적용하면 텍스트의 가독성이 손상될 수 있기 때문입니다.
normal 글꼴에 저장된 글꼴 커닝 정보를 적용해야 합니다.
커닝 정보가 없는 글꼴에는 적용되지 않습니다.
none 글꼴에 저장된 글꼴 커닝 정보가 비활성화됩니다.
CSS 
/* 키워드 값 */
font-kerning: auto;
font-kerning: normal;
font-kerning: none;

/* 글로벌 값 */
font-kerning: inherit;
font-kerning: initial;
font-kerning: revert;
font-kerning: revert-layer;
font-kerning: unset;

사용법 참고사항

로마자의 경우가 글꼴에 따라 알파벳 사이의 간격이 조화롭지 않게 불규칙한 경우가 심해서 font-kerning 속성으로 커닝을 적용하는 경우가 많으나, 그렇지 않는 경우(대표적으로, 한국, 일본 등 아시아권 글자)에는 커닝을 적용하지 않는 경우가 많습니다.

font-kerning 속성의 초깃값은 auto이므로 대부분의 경우 글꼴 파일에 커닝 정보가 있으면 커닝을 수행하기 때문에 별도로 font-kerning 속성의 값을 normal로 지정하지 않아도 됩니다.

font-kerning과 letter-spacing 속성과의 차이점

letter-spacing 속성은 텍스트의 문자와 문자 사이 간격(일반적으로 '자간'이라고 함)을 지정하는 속성입니다. 글자의 모양과 상관없이 고정된 값을 가집니다. 모든 글자 사이에 동일하게 적용됩니다.

CSS letter-spacing 속성

font-kerning 속성은 글꼴의 커닝 정보가 있어야만 적용이 가능하며, 글꼴에 포함된 커닝 정보에 따라 글자와 글자 사이의 간격을 매끄럽게 조정합니다. 모든 글자에 동일하게 적용되지 않으며, 커닝 정보에 있는 개별 글자와 글자 간격을 임의로 조정합니다.

예제

CSS 
p {
    font-size: 50px;
    font-weight: 900;
}
.no-kern {
    font-kerning: none;
    color: red;
}
.with-kern {
    font-kerning: normal;
    color: blue;
}
HTML 
<p class="no-kern">WAVE</p>
<p class="with-kern">WAVE</p>
실제 적용된 모습

브라우저 호환성

font-kerning 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
font-kerning 33 79 32 9

명세서

font-kerning 속성의 명세서 사양
명세서 사양
font-kerning CSS Fonts Module Level 4
#font-kerning-prop

참고문헌

같이 보기