글자 다루는 일, 생각보다 어렵잖아요
웹이든 앱이든, 화면에 글자를 띄우는 순간 우리는 모두 타이포그래피와 마주치게 되거든요. 타이포그래피가 뭐냐면, 쉽게 말해 "글자를 보기 좋고 읽기 좋게 다루는 기술"이에요. 그런데 CSS에서 font-family, line-height, letter-spacing 같은 속성을 무심코 만지면서도, 막상 "커닝(kerning)이 정확히 뭐예요?" 하고 물어보면 선뜻 대답하기 어려운 분들 많을 거예요. 저도 그랬거든요.
이번에 소개할 Words of Type는 바로 이 글자에 관한 지식을 한곳에 모아둔 위키예요. 위키백과처럼 항목 하나하나가 정리되어 있는데, 주제가 오직 '글자'에 집중되어 있다는 게 특징이에요. 그동안 타이포그래피 지식은 디자인 책, 폰트 회사 블로그, 학교 강의 자료 같은 데에 뿔뿔이 흩어져 있었거든요. 그걸 한 군데서 찾아볼 수 있게 정리해 둔 거예요.
어떤 개념들이 담겨 있냐면
예를 들어 커닝은 글자와 글자 사이의 간격을 '쌍 단위'로 미세하게 조정하는 걸 말해요. 'A'와 'V'를 나란히 두면 비스듬한 면 때문에 사이가 휑하게 비어 보이는데, 이걸 살짝 좁혀서 균형을 맞추는 게 커닝이에요. 반면 트래킹(tracking)은 글자 전체의 간격을 한꺼번에 늘리거나 줄이는 거예요. CSS의 letter-spacing이 사실 이 트래킹에 가까워요.
또 리딩(leading)이라는 말도 자주 나오는데요, 이게 행과 행 사이의 간격, 즉 줄 간격이에요. 옛날 활판 인쇄에서 줄 사이에 납(lead) 조각을 끼워 넣었던 데서 온 이름이거든요. 우리가 매일 쓰는 line-height가 바로 이 개념이에요. 이 밖에도 글자의 기준선인 베이스라인, 소문자 x의 높이를 뜻하는 x-하이트, 'fi'나 'fl'처럼 두 글자를 하나로 붙여 예쁘게 만든 합자(ligature), 화면 해상도가 낮을 때 글자가 또렷하게 보이도록 보정하는 힌팅(hinting) 같은 개념까지 폭넓게 다뤄요.
다른 자료랑 뭐가 다를까
타이포그래피를 배우려고 검색하면 보통 두 갈래로 나뉘거든요. 하나는 폰트를 파는 회사들의 마케팅성 블로그 글이고, 다른 하나는 너무 학술적이라 진입 장벽이 높은 디자인 이론서예요. Words of Type는 그 사이에서 '용어 사전'처럼 쓸 수 있다는 게 장점이에요. 개발자가 디자이너 동료에게 "이 부분 자간 좀 봐주세요" 같은 피드백을 받았을 때, 그 단어가 정확히 뭘 가리키는지 바로 찾아볼 수 있는 거죠. MDN이 웹 표준 용어를 정리해 주듯, 이 위키는 글자 용어를 정리해 준다고 보면 비슷해요.
한국 개발자에게 주는 의미
특히 프론트엔드 하시는 분들께 권하고 싶어요. 요즘은 가변 폰트(variable font)라고 해서, 폰트 파일 하나로 굵기나 너비를 자유롭게 조절하는 기술이 웹에서 점점 보편화되고 있거든요. 이런 걸 제대로 쓰려면 글자 구조에 대한 기본 개념이 있어야 해요. 또 한글은 영문과 달리 자음·모음이 모여 네모 안에 들어가는 구조라 자간·행간 설정이 영문 기준과 미묘하게 다르게 느껴질 때가 많은데, 영문 타이포그래피의 원리를 알아두면 "왜 이 한글 폰트는 행간을 더 줘야 편해 보이지?" 같은 감각을 논리적으로 이해할 수 있게 돼요.
당장 실무에 쓰진 않더라도, 즐겨찾기 해두고 모르는 용어 나올 때마다 들춰보기 딱 좋은 자료예요.
정리하면
글자를 다루는 건 디자이너만의 일이 아니라, 화면을 만드는 모든 개발자의 일이거든요. Words of Type는 그동안 흩어져 있던 글자 지식을 한곳에 모아 누구나 쉽게 찾아볼 수 있게 해준 위키예요.
여러분은 평소 CSS로 글자 다룰 때 자간·행간을 감으로 맞추는 편인가요, 아니면 나름의 기준을 갖고 계신가요? 한글 타이포그래피에서 가장 신경 쓰는 속성이 뭔지도 궁금하네요.
🔗 출처: Hacker News