본문 바로가기
타이포그라피/글자 디자인

인디자인 요소, 자간(Tracking)과 글자간격(letter spacing), 커닝(kerning), 이음자(ligature)

반응형

인디자인 대표 이미지인디자인 대표 이미지


타이포그라피라고 하면 폰트를 변형시키거나 예쁘게 손글씨 쓰는 것(캘리그라피)을 떠올리는 사람이 많다. 그러나 웹사이트 디자인과 인쇄된 책의 본문도 엄연히 타이포그라피의 영역이다. 좀 더 구체적으로 말하면 인디자인 또는 편집 디자인이라고 부른다. 본문을 디자인할 때는 글 전체의 조화가독성을 신경 써야 한다.











인디자인 요소: 점·선·면


인디자인 요소인디자인 요소


미술을 배우면 제일 먼저 나오는 게 점, 선, 면의 개념이다. 점선면은 외형을 결정하는 요소로 점이 여러 개 모이면 선이 되고 선이 모이면 면이 된다. 또 면이 모이면 입체감을 가진다. 글자에도 이런 디자인 요소가 있을까? 물론이다. 문단처럼 여러 글자가 모였을 때 한 글자에 해당하고 글자가 모여 글줄이 되면 이고, 글줄이 모이면 단락, 이 된다.


본문을 디자인할 때는 이런 디자인 요소를 이용해 화려하게 배치하기보다는 사람들이 쉽게 읽을 수 있는지(가독성), 글이 전체적으로 조화롭고 안정적인지를 따져야 한다.





자간과 글자사이


자간, 글자사이자간, 글자사이


한 글자가 인디자인에서는 점에 해당한다. 이 글자가 모여 단어가 된다. 이때 문단을 디자인하는 인디자인 입장에서 고려해야 할 것이 글자와 글자 사이의 간격이다. 이를 자간(Tracking, 트래킹)이라고 부른다. 자간과 글자사이(letter spacing)를 헷갈리는 사람이 많은데 자간을 글자 중심에서 다음 글자 중심까지의 거리다. 반면 글자사이는 글자 끝에서 다음 글자 시작까지의 거리다.


같은 폰트, 같은 크기라도 자간이 넓은 글자와 그렇지 않은 글자는 엄청난 차이가 있다. 자간을 살짝 벌려주면 글자가 세련되어 보이는데 너무 넓으면 읽기 힘들어진다. 디자인하다 보면 글자를 붙여서 써야 하는 경우가 있는데 이때는 자간을 좁혀주면 된다.





커닝(Kerning)


커닝커닝


보통 한글 글자는 모아쓰기 방식이라 네모를 치면 그 안에 글자가 다 들어오게 디자인되어 있어 자간을 조절해주기가 쉽다. 그런데 로마자 알파벳은 외형적 특징에 따라 글자와 글자 사이에 공간이 생긴다. 예를 들면 A의 경우 위쪽이 뾰족해지는 모양이라 위에 공간이 만들어진다. 그런데 A 다음에 오는 글자가 W라고 해보자. W는 아래에 공간이 생긴다. 정상적인 글자 간격이라면 A가 끝나고 W가 시작되어야 하지만 그렇게 나열하면 A와 W의 공간 덕분에 서로 글자가 멀어 보이는 현상이 나타난다.


이를 해결하기 위해 글자의 외형에 따라 글자 사이 거리를 조절하는 것이 커닝(Kerning)이다. 위 이미지를 보면 커닝이 안 된 AW는 서로 더 덜어져 있는 모습으로 보이고, 커닝된 글자 AW는 서로 적절한 간격을 유지하고 있는 것처럼 보인다.










이음자(Ligature)


이음자이음자


로마자 알파벳의 경우 두 글자를 같이 쓸 때 애매하게 겹치는 글자들이 있다. 위 글자처럼 소문자 fi를 같이 쓰면 f의 윗부분이 휘어지면서 i의 점과 만나면서 꼴 보기 싫어진다. 그래서 두 글자를 합쳐서 표현하는데 이를 이음자(Ligature) 또는 합자라고 한다.



한글의 이음자한글의 이음자


한글에도 이음자가 가끔 쓰인다. 한글은 모아쓰기를 하다 보니 쌍기역 ㄲ, 쌍시옷 ㅆ 등에 이음자로 간격을 조절한다. 예로 뽀뽀라고 할 때 ㅂㅂ이 두 번 반복된다. 이때 이음자로 생략하면 위와 같이 뽀자가 나온다. 글자 간격에 대해서만 포스팅했는데 분량이 많아져 글의 선과 면에 관한 내용은 다음에 다루겠다.


by A-PARK


반응형