웹 페이지에서 텍스트의 글자 간 간격(커닝)을 세밀하게 조정하고 싶다면 CSS의 font-kerning 속성을 활용할 수 있습니다. 커닝(kerning)은 특정 글자 쌍 사이의 간격을 자동으로 조절해 시각적으로 더 균형 잡힌 타이포그래피를 만드는 기술입니다.
font-kerning 속성이란?
font-kerning 속성은 폰트 파일에 포함된 커닝 정보를 브라우저가 적용할지 여부를 결정합니다. 사용 가능한 값은 다음과 같습니다.
- auto – 브라우저가 자동으로 판단하여 커닝 적용 여부를 결정합니다. (기본값)
- normal – 폰트에 저장된 커닝 정보를 항상 적용합니다.
- none – 커닝을 비활성화하여 글자 간격 조정을 하지 않습니다.
사용 예제
아래 코드는 font-kerning 속성을 실제로 적용하는 기본적인 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
font-kerning: normal;
}
</style>
</head>
<body>
<div id = "demo">This is demo text.</div>
</body>
</html>활용 팁
제목이나 큰 크기의 헤드라인 텍스트에서는 커닝을 적용하면 글자가 더 고급스럽고 정돈된 느낌을 줍니다. 반면 코드 블록이나 모노스페이스 폰트처럼 균일한 간격이 필요한 경우에는 font-kerning: none;을 지정해 커닝을 끄는 것이 좋습니다. 대부분의 최신 브라우저에서 이 속성을 지원하므로, 별도의 설정 없이도 자연스러운 텍스트 렌더링을 기대할 수 있습니다.