CSS를 사용해 텍스트 커닝(kerning)을 조정하는 방법을 알아봅니다.
선택한 웹 폰트에 커닝 데이터가 포함되어 있다면, 브라우저는 font-kerning CSS 속성을 통해 해당 텍스트에 커닝을 적용할지 여부를 자동으로 판단합니다. 이 속성은 기본적으로 auto로 설정되어 있습니다.
font-kerning: auto;즉, 폰트에 커닝 데이터가 내장되어 있더라도 브라우저는 여러 가지 이유로 커닝 적용 여부를 스스로 결정할 수 있습니다.
커닝을 확실하게 적용하려면?
브라우저의 판단과 상관없이, 폰트에 커닝 데이터가 있다면 반드시 적용되도록 하고 싶다면 auto 대신 normal 값을 사용하세요.
font-kerning: normal;반대로 커닝을 비활성화하고 싶다면 none 값을 지정하면 됩니다.
font-kerning: none;커닝 데이터가 있는데 굳이 끄는 이유는?
"커닝을 지원하는 웹 폰트인데 왜 커닝을 꺼야 하지?"라고 의문이 들 수 있습니다.
예를 들어 특정 브라우저에서 font-kerning이 일시적인 버그 때문에 잘못 렌더링되는 경우가 있을 수 있습니다. 이럴 때 커닝을 끌 수 있는 옵션이 있다면 매우 유용합니다.
또한 개별 텍스트 요소가 특정 상황에서 어색하게 표시되는 경우가 종종 있는데, 이때 유틸리티 클래스 하나로 간편하게 커닝을 끌 수 있습니다.
.kerning-none {
font-kerning: none;
}웹 폰트에 커닝 데이터가 있는지 확인하는 방법
웹 폰트에 커닝 데이터가 포함되어 있는지 빠르게 확인하려면, 값을 none과 normal 사이에서 번갈아 설정해 보면서 브라우저에서 텍스트 렌더링 변화를 주의 깊게 관찰하면 됩니다.