2019년, 한 화장품 브랜드의 리브랜딩 프로젝트를 맡았을 때입니다. 클라이언트는 “뭔가 답답해 보인다”며 이미지를 계속 바꿔달라고 요구했죠. 저는 이미지를 건드리는 대신, CSS 파일에서 딱 두 줄을 수정했습니다. line-height를 1.4에서 1.6으로, letter-spacing을 -0.5px로 조절했죠.
결과는 어땠을까요? 클라이언트는 “이제야 숨통이 트이네요! 이미지를 바꾸니까 훨씬 낫습니다”라고 하더군요. 저는 웃으며 사실을 말하지 않았습니다. 디자인의 90%는 텍스트이고, 텍스트의 90%는 여백입니다. 이 원리를 깨닫는 순간, 여러분의 눈은 완전히 달라질 겁니다.
1. 자간 (Tracking): 글자끼리 어깨동무하지 마라
자간은 글자와 글자 사이의 간격입니다. 웹 디자인(CSS)에서는 letter-spacing이라고 부르죠.
대부분의 한글 폰트는 영문보다 자간이 넓게 설정되어 있습니다. 그래서 아무 설정 없이 그냥 두면 글자들이 흩어져 보여 멍청해 보입니다. 반대로 영문 폰트는 너무 붙이면 답답해 보이죠.
“솔직히 고백하자면, 저도 신입 시절엔 자간의 존재조차 몰랐습니다. 그냥 포토샵 기본값(0)으로 작업했죠. 하지만 한글 본문은 자간을 살짝 좁혀야(-0.025em ~ -0.05em) 단단하고 옹골차 보인다는 걸 알고 난 뒤, 제 디자인은 ‘프로’ 소리를 듣기 시작했습니다.”
2. 행간 (Leading): 눈이 길을 잃지 않게 하라
행간은 줄과 줄 사이의 높이입니다. CSS에서는 line-height입니다. 가독성에 가장 치명적인 영향을 미치는 요소죠.
- ✅ 너무 좁으면: 아랫줄과 윗줄이 붙어 보여서 읽다가 질식할 것 같은 느낌을 줍니다.
- ✅ 너무 넓으면: 한 줄을 다 읽고 다음 줄을 찾으러 갈 때 시선이 길을 잃습니다. 강(River) 건너듯 멀게 느껴지죠.
💡 코드캠의 실전 TIP: 웹폰트 황금 비율
고민할 시간을 줄여드립니다. 웹 퍼블리싱이나 블로그 스킨을 만질 때 이 수치를 기준으로 잡으세요.
1. 본문 (Body): line-height: 1.6; (글자 크기의 1.6배 공간)
2. 제목 (Heading): line-height: 1.3; (제목은 짧으므로 좀 더 타이트하게)
3. 자간 (Korean): letter-spacing: -0.5px; (Noto Sans KR 기준)
3. 절대 하지 말아야 할 실수: ‘단위’의 혼용
행간(Line-height)을 설정할 때 px 단위를 쓰지 마세요.
만약 line-height: 24px;로 고정해버리면, 나중에 폰트 크기를 30px로 키웠을 때 글자가 서로 겹치는 대참사가 일어납니다. 행간은 언제나 단위 없는 배수(Unitless number)로 설정해야 합니다. (예: 1.5, 1.6) 그래야 폰트가 커지면 행간도 알아서 비율대로 넓어집니다.
4. 보이지 않는 디자인이 명품을 만듭니다
좋은 타이포그래피는 독자의 눈에 띄지 않습니다. 그저 물 흐르듯 편안하게 읽힐 뿐이죠. “이 글, 술술 잘 읽히네?”라는 생각이 들었다면, 그 디자이너가 밤새 자간과 행간을 1픽셀 단위로 조절했기 때문입니다.
오늘 여러분의 블로그나 PPT를 다시 열어보세요. 글자들이 너무 다닥다닥 붙어있진 않은지, 혹은 너무 멀어 보이진 않은지 확인해 보세요. 그 작은 틈새에 ‘가독성’이라는 신이 숨어 있습니다.
지금 작업 중인 디자인이나 PPT의 텍스트가 왠지 모르게 어색하신가요? 폰트 이름과 상황을 댓글로 남겨주시면 최적의 자간/행간 값을 추천해 드리겠습니다!
