커닝

정의

커닝은 특정 글자 쌍 사이의 간격을 하나하나 조정해 전체 글줄이 고르게 보이도록 다듬는 작업입니다. 글자들은 저마다 생김새가 달라, 그냥 나란히 놓으면 어떤 쌍은 유독 벌어져 보이고 어떤 쌍은 붙어 보입니다. 예를 들어 A와 V, T와 o처럼 서로 비스듬하거나 곡선이 맞물리는 쌍은 사이가 뻥 뚫린 듯 벌어져 보이는데, 이런 쌍의 간격만 살짝 좁혀 주면 글줄 전체의 밀도가 균일해집니다. 글자 사이 간격을 통째로 똑같이 조절하는 자간과 달리, 커닝은 문제가 되는 쌍만 골라 손보는 세밀한 조정이라는 점이 다릅니다.

왜 중요한가

사람의 눈은 글자와 글자 사이의 공백 넓이가 들쭉날쭉하면 그것을 어색함으로 느낍니다. 특정 쌍만 유난히 벌어져 있으면 그 자리에서 단어가 잠깐 끊겨 보여, 읽는 흐름이 미세하게 걸립니다. 커닝은 이런 불균형을 메워 글자들이 하나의 단어로 매끈하게 이어져 보이게 합니다. 이 차이는 글자가 클수록 크게 드러나서, 큰 제목이나 로고, 버튼 라벨처럼 눈에 확 들어오는 곳에서 특히 티가 납니다. 다행히 대부분의 폰트에는 쌍별 커닝 정보가 이미 들어 있어서, 커닝을 켜 두기만 하면 브라우저가 알아서 처리해 줍니다. 반대로 이 기능을 끄면 특정 쌍이 어색하게 벌어져, 잘 만든 폰트도 어딘가 엉성해 보입니다.

흔한 실수

• 커닝과 자간을 같은 것으로 생각하는 경우입니다. 자간은 모든 글자 사이를 똑같이 벌리거나 좁히는 균일 조정이고, 커닝은 특정 쌍만 손보는 개별 조정입니다. 글줄 전체가 답답하면 자간을, 특정 쌍만 어색하면 커닝을 봐야 합니다.
• 큰 제목이나 로고에서 커닝을 끈 채로 두는 경우입니다. 본문 크기에서는 잘 안 보이던 쌍 간격의 불균형이 큰 글자에서는 확 드러나므로, 눈에 띄는 큰 텍스트일수록 커닝을 켜 두어야 깔끔합니다.
• 쌍 간격이 어색한 것을 커닝이 아니라 자간으로 해결하려는 경우입니다. 전체 자간을 벌리거나 좁히면 문제가 된 한 쌍뿐 아니라 멀쩡했던 나머지 쌍까지 함께 흐트러져, 오히려 글줄 전체가 더 고르지 않게 보일 수 있습니다.

실무 팁

• 커닝은 대개 폰트가 자동으로 처리하므로 font-kerning 설정을 켜 두고 그대로 두는 것이 기본입니다. 자간처럼 전체를 균일하게 조절하는 것과는 목적이 다르니, 두 값을 혼동하지 마세요.
• 큰 제목이나 로고처럼 글자가 크게 노출되는 곳은 자동 커닝 결과를 눈으로 한 번 확인하세요. 특정 쌍이 여전히 벌어져 보이면 그 부분만 미세하게 조정해 균형을 맞추면 인상이 크게 달라집니다.
• 본문처럼 작은 글자에서는 커닝에 지나치게 공들일 필요가 없습니다. 작은 크기에서는 차이가 거의 보이지 않으니, 자동 처리에 맡기고 정작 눈에 띄는 큰 글자에 시간을 쓰는 편이 낫습니다. 한정된 시간을 어디에 쓸지 가리는 것도 실무의 중요한 감각입니다.

관련 개념