한글 손글씨와 영문 스크립트 섞기: 폴백이 티 나지 않게

Caveat을 한글 문장에 지정하면 한국어가 손글씨처럼 보일 수 있지만, 실제로는 뒤의 폴백 폰트가 그린 결과다. 한글과 영문이 우연히 어울리는 상태에 기대면 기기와 로딩 조건이 바뀔 때 조합도 달라진다. 두 패밀리의 역할을 명시해서 같은 결과를 만들자.

오늘도 천천히 · take your time

지원 문자를 먼저 확인한다

획획클럽 카탈로그의 Caveat 자산은 라틴 문자·숫자·문장부호를 지원하고 한글은 포함하지 않는다. 한글은 나눔손글씨 펜이나 붓처럼 별도 패밀리로 지정한다. 계산 스타일과 렌더링 폰트에서 문자별 적용 결과를 확인한다.

문자 지원을 확인하지 않고 family 이름 하나만 적으면 시스템 폰트가 끼어도 알아차리기 어렵다. 목표 한글 폰트와 최종 시스템 폴백까지 스택에 명시한다.

한 줄 혼용보다 블록 조합부터 시작한다

한글 제목과 영문 부제를 별도 요소로 나누면 각 폰트의 크기, 굵기, 행간을 독립적으로 맞출 수 있다. 같은 문장 안에서 단어마다 바꾸는 방식은 기준선과 공백을 통제하기 어렵다. 먼저 두 블록의 관계를 설계한다.

번역 관계라면 시각 무게를 비슷하게, 서명이나 장식 문구라면 영문을 한 단계 낮춘다. 언어 자체를 위계로 쓰지 말고 정보 관계를 기준으로 둔다.

한글 34px / Caveat 38px · 보이는 높이를 맞춘 조합

보이는 크기와 기준선을 맞춘다

한글 네모틀과 Caveat 소문자의 x-height가 다르므로 같은 font-size를 시작점으로만 쓴다. 실제 문구를 놓고 영문이 지나치게 작거나 아래로 처져 보이지 않는지 확인한다. 숫자와 대문자가 섞인 영문도 따로 본다.

한 줄 안에서 조합해야 한다면 baseline과 line-height를 실제 컴포넌트에서 조정한다. 위치를 임의 픽셀로 밀기 전에 폰트와 크기 선택이 맞는지 다시 본다.

공백과 굵기는 언어 사이 리듬을 만든다

한글 뒤에 영문이 붙는 문구는 일반 띄어쓰기 하나로 충분하지 않을 수 있다. 별도 블록의 gap을 단계별로 비교하고, 쉼표나 가운데점 같은 구분 기호가 어느 폰트로 보이는지 확인한다.

Caveat은 여러 굵기를 제공하지만 한글 손글씨는 한 굵기인 경우가 많다. 영문만 굵어져 위계가 뒤집히지 않도록 실제 화면에서 면적을 맞춘다.

마음을 담아 · with love, always · 29 September

로딩 실패와 긴 문구에서 마무리한다

두 웹폰트 중 하나만 늦게 오는 상태를 재현한다. 한글은 목표 폰트인데 영문만 시스템 폰트로 남거나 그 반대인 순간에도 레이아웃이 무너지지 않아야 한다. 긴 한영 문구와 모바일 줄바꿈도 함께 확인한다.

Caveat 상세에서 영문 지원 범위를 확인하고 폰트 시뮬레이터에 한글·영문 블록을 올려 보자. 지원 문자, 보이는 크기, 기준선, 공백, 실패 상태를 문서화하면 폴백을 디자인 선택으로 바꿀 수 있다.