타이포그래피 가독성을 높이는 자간 행간, 완벽한 읽기 경험의 비밀

웹이나 앱 디자인에서 타이포그래피 가독성을 극적으로 끌어올리려면 단순히 예쁜 폰트를 고르는 데 집착할 것이 아니라, 글자 사이의 간격인 '자간(Letter-spacing)'을 미세하게 마이너스(-) 값으로 좁혀 단어의 응집력을 높이고, 줄과 줄 사이의 간격인 '행간(Line-height)'은 폰트 크기의 1.5배에서 1.6배(150%~160%) 정도로 넉넉하게 벌려주어 사용자의 시선이 다음 줄로 넘어갈 때 헤매지 않도록 편안한 호흡의 여백을 설계하는 것이 가장 치명적이고 핵심적인 타이포그래피 조판 규칙입니다. 타이포그래피(Typography) 가독성이란 텍스트가 화면이나 종이 위에 배열되었을 때 독자가 눈의 피로도 없이 얼마나 빠르고 정확하게 글의 내용을 뇌로 흡수할 수 있는지를 결정짓는 '읽기의 편안함' 정도를 의미한다. 과거의 초보 디자이너들은 디자인 프로그램이 기본으로 세팅해 둔 'Auto(자동)' 값을 그대로 방치하여 글씨가 답답하게 뭉쳐있거나 줄이 너무 빽빽해 읽기를 포기하게 만드는 참사를 자주 일으켰지만, 텍스트가 곧 정보의 핵심인 현대 UI/UX 환경에서는 디자이너의 편집 레이아웃 역량을 평가하는 가장 첫 번째 척도가 바로 이 미세한 자간과 행간을 밀리미터 단위로 조율하는 집요함에 달려 있습니다. 글이 아무리 명문장이라도 타이포그래피가 숨 막히게 닫혀 있다면, 사용자들은 3초 만에 시각적 질식감을 느끼고 '뒤로 가기' 버튼을 광클하게 됩니다.

자간(Letter-spacing)을 마이너스로 좁혀야 하는 이유는 무엇인가요?

한글 폰트는 영어 폰트와 달리 받침(종성)이 존재하는 네모반듯한 블록 형태를 띠고 있기 때문에, 기본 설정(0) 그대로 글씨를 타이핑하면 단어와 단어 사이가 묘하게 벌어져 보이고 시선이 흩어지는 현상이 발생합니다. 이때 자간을 -0.02em이나 -0.05em 정도로 아주 미세하게 좁혀주면 흩어져 있던 글자들이 자석처럼 서로 쫀쫀하게 달라붙으면서 하나의 단어(덩어리)로 명확하게 인식되는 마법 같은 응집력이 생겨납니다.

특히 굵은 글씨체(Bold)를 사용하여 제목이나 헤드라인을 엄청나게 크게 강조할 때는 글씨가 커진 만큼 글자 사이의 빈 공간도 같이 커져 버리므로, 본문보다 자간을 훨씬 더 과감하게 좁혀주어야(예: -0.08em) 시각적으로 팽팽한 긴장감이 돌고 묵직한 가독성을 획득할 수 있습니다.

완벽한 행간(Line-height)의 황금비율은 정말 1.6배인가요?

본문의 줄이 두 줄 이상 넘어가기 시작하면 독자의 눈동자는 첫 줄의 끝에서 다음 줄의 처음으로 지그재그 이동(Z패턴)을 반복해야 하는데, 행간이 너무 좁으면 눈동자가 착지할 곳을 잃어버리고 방금 읽었던 줄을 또다시 읽는 난독 증상을 겪게 됩니다. W3C 웹 콘텐츠 접근성 지침(WCAG)은 문단 안 줄 간격을 글자 크기의 1.5배 이상으로 둘 것을 권고합니다. 실무에서는 본문 텍스트의 완벽한 행간 비율은 폰트 크기(Font-size) 대비 150%에서 160%(CSS 기준 line-height: 1.5 ~ 1.6) 사이일 때 눈의 피로도가 가장 낮은 이른바 '황금비율'로 꼽힙니다.

반면 행간이 180%를 넘어 너무 넓어지면 줄과 줄 사이의 연결 고리가 툭툭 끊어져 문단이 하나의 맥락으로 읽히지 않고 파편화되어 둥둥 떠다니는 듯한 심각한 부작용을 초래하므로 과유불급의 원칙을 반드시 지켜야 합니다.

텍스트 요소 (크기)	추천 폰트 웨이트(굵기)	자간(Letter-spacing)	행간(Line-height) 팁
대제목 (H1) (32px 이상)	Extra Bold, Heavy	-0.05em ~ -0.08em (매우 좁게)	1.2배 ~ 1.3배 (딱 붙게)
소제목 (H2, H3) (20~24px)	Bold, Semi Bold	-0.03em ~ -0.05em (약간 좁게)	1.3배 ~ 1.4배
본문 텍스트 (Body) (16px)	Regular, Medium	-0.01em ~ -0.02em (자연스럽게)	1.5배 ~ 1.6배 (가장 여유롭게)
캡션/주석 (Caption) (12px)	Light, Regular	0 (기본) ~ +0.02em (오히려 넓게)	1.4배

위 표에서 가장 흥미로운 점은 캡션이나 주석처럼 폰트 크기가 12px 이하로 아주 작아질 때는, 글씨가 뭉개져 보이지 않도록 오히려 자간을 0이거나 미세하게 플러스(+) 값으로 넓혀주어야 가독성이 살아난다는 사실입니다. 폰트의 크기가 극단적으로 커질수록 좁히고, 극단적으로 작아질수록 넓혀준다는 대원칙만 외워두면 타이포그래피의 절반은 마스터한 셈입니다.

한 줄에 들어가는 적정 글자 수는 몇 자가 좋나요?

가독성에 영향을 미치는 또 다른 숨은 주역은 바로 한 줄에 담기는 글자 수(Line Length)입니다. 한 줄이 가로로 너무 길게 이어지면(예: PC 모니터 끝에서 끝까지 텍스트가 가득 찬 경우) 눈동자가 우측으로 이동하는 거리가 멀어져 엄청난 안구 피로를 유발하며, 다음 줄로 시선을 내릴 때 길을 잃기 십상입니다.

인간의 눈이 가장 편안하게 스캐닝할 수 있는 한 줄의 길이는 영문 기준 5075자, 한글 기준으로는 3045자(공백 포함) 내외입니다. 이 때문에 블로그나 뉴스 기사들이 모니터 양옆을 하얗게 텅텅 비워두고 화면 정중앙에만 좁고 길게 본문 폭(Max-width 700px 내외)을 설정해 두는 것입니다. 여백은 공간 낭비가 아니라 독자의 눈을 보호하는 훌륭한 타이포그래피 쿠션입니다. 더 자세한 폰트 굵기 조합법과 피그마(Figma) 텍스트 스타일 세팅법은 에서 확인하실 수 있습니다.

자주 묻는 질문

영문 폰트와 한글 폰트를 섞어 쓸 때 팁이 있나요?

한글과 영문(혹은 숫자)이 혼용된 문장을 타이핑할 때, 영문과 숫자의 기본 베이스라인(밑줄 기준선)이 한글보다 미세하게 위로 들려 있거나 크기가 작아 텍스트가 울퉁불퉁해 보이는 현상이 잦습니다. 이를 방지하려면 영문 전용 폰트(Roboto 등)를 1px 정도 크게 키우거나, 처음부터 한글과 영문 밸런스가 완벽하게 패키징된 Noto Sans KR이나 프리텐다드(Pretendard) 같은 만능 폰트를 통합해서 사용하는 것이 정신 건강에 좋습니다.

명조체(세리프)는 웹에서 가독성이 떨어지나요?

과거 저해상도 모니터 시절에는 명조체 특유의 얇은 삐침 장식이 모니터 픽셀에 깨져 보여 가독성 최악의 폰트로 취급받았습니다. 하지만 현재의 고해상도(레티나) 디스플레이에서는 명조체의 미려한 곡선이 완벽하게 렌더링되므로, 감성적인 브랜드 에세이나 긴 호흡의 인터뷰 기사 본문에는 오히려 고딕체보다 명조체를 활용하는 것이 글의 피로도를 낮추고 고급스러운 문학적 몰입감을 부여하는 훌륭한 수단이 됩니다.

배경색이 어두운 다크 모드에서는 타이포그래피를 어떻게 조절해야 하나요?

시커먼 배경에 하얀색 글씨(반전 텍스트)를 쓸 때는 흰 배경에 검은 글씨를 쓸 때보다 글자가 빛의 번짐 현상(할레이션) 때문에 실제 두께보다 더 뚱뚱하고 번져 보입니다. 따라서 다크 모드 전용 폰트 웨이트(굵기)를 일반 모드보다 한 단계 얇은 것으로 교체(예: Bold -> Medium)하고, 행간과 자간을 평소보다 아주 미세하게 더 넓혀주어야 눈이 부신 현상을 방지할 수 있습니다.