브랜드 에디토리얼 제목 짜기: 한글과 라틴의 크기·굵기 맞추기

한글 제목 48px과 영문 제목 48px을 나란히 두면 숫자는 같아도 무게와 높이가 다르게 보일 수 있다. 에디토리얼 화면에서는 이 차이가 의도처럼 보이기도 하고 실수처럼 보이기도 한다. Hahmlet을 한글 기준으로 잡고 라틴 세리프를 맞추는 순서를 정해 두면 판단이 빨라진다.

도시의 밤
THE CITY AFTER DARK

제목의 정보 관계를 정한다

한글과 영문이 번역 관계인지, 제목과 시리즈명인지, 브랜드명과 기사명인지 구분한다. 같은 정보라면 시각 무게를 비슷하게 맞추고, 보조 정보라면 크기와 간격으로 한 단계 내린다. 언어만 다르다는 이유로 영문을 자동으로 작게 두지 않는다.

실제 최장 제목과 최단 제목을 함께 준비한다. 짧은 예시만 맞추면 긴 고유명사나 숫자가 들어왔을 때 조합이 깨질 수 있다.

보이는 높이부터 맞춘다

한글 네모틀과 라틴 대문자의 높이를 눈으로 비교하고, 각 폰트의 font-size를 독립적으로 조절한다. 화면에 기준선을 그어 위아래 여백과 중심을 살핀다. 크기 숫자가 달라도 결과가 같은 위계로 보이면 그 값이 맞다.

라틴 소문자가 많은 부제는 대문자 제목과 또 다르게 보인다. “LONDON” 한 단어로 맞춘 뒤 긴 문장에 그대로 적용하지 말고 두 표본을 모두 확인한다.

서울의 기록 56px · Archive of Seoul 52px

굵기는 획의 면적으로 비교한다

Hahmlet 700과 라틴 700이 같은 무게로 보인다고 가정하지 않는다. 굵은 세로획과 가는 가로획이 차지하는 면적, 받침의 밀도, 대문자 내부 공간을 본다. 필요하면 한쪽 굵기를 한 단계 낮춰 화면의 검은 면적을 맞춘다.

배경 사진 위에서는 대비가 결과를 바꾼다. 밝은 영역과 어두운 영역을 지나도록 제목을 옮겨 보고 외곽선 없이도 두 언어가 함께 읽히는지 확인한다.

줄바꿈과 간격을 한 묶음으로 다룬다

한글과 영문을 각각 한 줄로 고정하면 좁은 화면에서 글자가 지나치게 작아질 수 있다. 허용할 줄 수와 줄바꿈 위치를 언어별로 정하고, 두 블록 사이 간격은 제목 내부 행간보다 넓게 둬 관계를 보여 준다.

조사나 짧은 전치사가 홀로 남지 않는지 보고 문구 편집도 허용한다. 폰트 크기만 줄이는 방식은 제목의 힘을 먼저 잃게 한다.

계절의 가장 느린 장면
THE SLOWEST SCENE OF THE SEASON

모바일 축소 규칙을 별도로 만든다

데스크톱 비율을 그대로 줄이면 작은 화면에서 획 대비와 간격이 사라질 수 있다. 모바일은 제목 크기, 최대 줄 수, 두 언어 사이 여백을 다시 정한다. 실제 320px 안팎의 폭에서 긴 제목과 짧은 제목을 번갈아 본다.

Hahmlet 상세에서 한글 제목을 고른 뒤 폰트 시뮬레이터로 라틴 후보와 실제 문구를 비교하자. 최종 규칙에는 두 폰트의 크기, 굵기, 기준선 보정, 줄 수를 함께 적어야 다음 편집물에서도 같은 인상이 난다.