CSS 기초를 학습할 때 우리는 대체로 박스 모델, 페이지 내 요소 배치 방법, 그리고 font-family나 글자 크기 같은 디자인 시스템 요소에 집중하게 됩니다. 하지만 페이지에서 글꼴이 실제로 어떻게 보이는지 한 단계 더 깊이 이해하려면 font-kerning, letter-spacing, word-spacing 속성을 반드시 살펴봐야 합니다. 바로 이런 섬세한 타이포그래피 디테일이 평범한 웹사이트를 전문적이고 세련된 결과물로 격상시켜 줍니다.
폰트 커닝(Font Kerning)
커닝(kerning)은 서로 다른 두 문자 사이의 간격을 조정하는 방식을 말합니다. 커닝이 잘 된 글꼴은 글자 간 간격이 더욱 균일하기 때문에 시각적으로 훨씬 매력적으로 보입니다. CSS의 font-kerning 속성에는 none, normal, auto 세 가지 값을 사용할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Spacing</title>
<style>
div {
font-size: 2rem;
font-family: serif;
}
#nokern {
font-kerning: none;
}
#kern {
font-kerning: normal;
}
</style>
</head>
<body>
<div id="kern">AV Ta</div>
<div id="nokern">AV Ta</div>
</body>
</html>
auto 값은 브라우저가 커닝 적용 여부를 스스로 판단하도록 합니다. MDN에 따르면 일부 브라우저는 작은 글꼴에서 가독성이 저하될 수 있어 커닝을 비활성화합니다. normal은 해당 글꼴이 커닝 정보를 포함하고 있을 경우 커닝을 적용한다는 의미이며, none은 말 그대로 커닝을 적용하지 않습니다. 위 코드를 실행해 보면 'AV'와 'Ta' 조합에서 이 속성의 효과가 가장 뚜렷하게 드러납니다. 앞 글자 세리프의 끝부분과 다음 글자 세리프의 시작 부분 사이 간격이 좁혀져 있는지 여부가 커닝 적용 여부를 판단하는 기준이 됩니다.
letter-spacing(문자 간격)
커닝과 달리 letter-spacing 속성은 한 줄의 텍스트 전체에 걸쳐 모든 글자에 균일한 간격을 적용합니다. px, rem, em 단위의 길이(length) 값을 받으며, 양수와 음수 값 모두 사용할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Spacing</title>
<style>
div {
font-size: 2rem;
font-family: serif;
}
#big-spacing {
letter-spacing:5px;
}
#little-spacing {
letter-spacing: 1px;
}
</style>
</head>
<body>
<div id="little-spacing">Hello World</div>
<div id="big-spacing">Hello World</div>
</body>
</html>
word-spacing(단어 간격)
letter-spacing과 마찬가지로 word-spacing은 이름 그대로 단어와 단어 사이의 간격을 조절하는 속성입니다. 기본값은 0.25em이며, 양수 또는 음수 길이 값을 지정할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Spacing</title>
<style>
div {
font-size: 2rem;
font-family: serif;
}
#big-spacing {
word-spacing:5rem;
}
#little-spacing {
word-spacing: 1rem;
}
</style>
</head>
<body>
<div id="little-spacing">Hello World</div>
<div id="big-spacing">Hello World</div>
</body>
</html>
이번 글에서는 font-kerning과 letter-spacing의 차이, 그리고 letter-spacing과 word-spacing의 차이를 살펴보았습니다. 이 세 가지 속성 모두 대부분의 브라우저에서 폭넓게 지원되지만, Internet Explorer에서는 폰트 커닝을 사용할 수 없다는 점에 유의하세요.
부트캠프 참가자의 81%는 참여 후 IT 분야 취업 전망에 대해 더 큰 확신을 느꼈다고 답했습니다. 오늘 바로 자신에게 맞는 부트캠프를 찾아보세요.
부트캠프 수료생은 부트캠프를 시작한 순간부터 첫 직장을 찾을 때까지 평균 6개월 미만의 짧은 기간 안에 커리어 전환을 완료했습니다.