한영 폴백 스택 짜기: 메뉴·숫자·이름이 흔들리지 않게

CSS 폰트 스택은 이름을 쉼표로 늘어놓는 목록처럼 보이지만, 브라우저는 글자마다 사용할 수 있는 첫 폰트를 찾는다. Inter에는 한글 글리프가 없으므로 영문과 숫자는 Inter로, 한국어는 뒤에 적은 폰트로 그려질 수 있다. 이 조합을 의도했다면 두 폰트가 한 줄에서 같은 팀처럼 보여야 한다.

Workspace 설정 · Owner 김지후 · 8 members

문자 역할부터 정한다

영문과 숫자만 Inter로 보일지, IBM Plex Sans KR이나 프리텐다드 한 벌로 전체 문자를 덮을지 먼저 정한다. 목표가 모호하면 개발자는 스택을 만들고 디자이너는 한 패밀리 시안을 보게 된다. 메뉴, 본문, 데이터 표마다 목표가 다르다면 토큰에 그 차이를 적는다.

브랜드 영문을 강조하려는 화면과 사용자 입력을 안정적으로 받아야 하는 화면도 나눈다. 전자는 라틴 폰트를 앞에 둘 수 있지만, 후자는 문자 범위가 넓은 한글 폰트를 앞세우는 편이 결과를 예측하기 쉽다.

순서는 지원 문자로 확인한다

Inter, Pretendard, sans-serif처럼 적으면 브라우저가 한글을 건너뛰어 Pretendard에서 찾는다. 이 동작을 이름만 보고 추측하지 말고 개발자 도구의 렌더링 폰트나 계산 스타일로 확인한다. 특수기호와 통화 기호는 예상과 다른 폰트가 맡을 수 있다.

한글을 모두 포함하는 본고딕이나 프리텐다드를 Inter보다 앞에 두면 라틴까지 첫 폰트가 가져간다. 어느 순서가 맞는지는 디자인 목표로 결정하며, 중복 나열이 안정성을 자동으로 높여 주지는 않는다.

₩128,900 · USD 96.40 · 결제 완료 Completed

크기와 기준선을 실제 한 줄에서 맞춘다

두 폰트의 font-size를 같은 숫자로 둬도 x-height와 한글의 보이는 높이는 다를 수 있다. 메뉴 한 줄, 사람 이름, 가격 카드에 조합을 적용하고 영문만 위로 뜨거나 작아 보이지 않는지 살핀다. 필요하면 역할별 폰트나 크기를 나누되 한 문장 안에서 잦게 바꾸지는 않는다.

행간은 가장 큰 글자 상자에 맞춰 잡는다. 한글 받침과 영문 대문자, 괄호가 위아래로 잘리지 않는지 보고, 버튼처럼 높이가 고정된 컴포넌트에서는 확대 설정도 함께 시험한다.

없는 굵기를 브라우저가 만들지 않게 한다

스택 안의 폰트가 같은 굵기 범위를 제공한다고 가정하면 안 된다. 요청한 600이 한쪽에 없으면 브라우저가 가까운 굵기를 고르거나 합성할 수 있다. 400·500·700처럼 실제 파일이 있는 값부터 연결하고, 계산된 굵기와 네트워크 요청을 확인한다.

font-synthesis 설정을 검토할 수 있지만 속성 하나로 조합이 완성되지는 않는다. 디자인 도구와 브라우저에서 같은 파일과 같은 굵기를 쓰는지가 먼저다.

알림 Notification · 보안 코드 A1B2-C3D4 · 남은 시간 04:58

실패 상태와 사용자 입력으로 마무리한다

웹폰트를 차단한 뒤 시스템 폴백에서 메뉴 폭과 카드 높이가 얼마나 달라지는지 본다. 이름, 주소, 이모지, 라틴 확장 문자를 넣어 글자별 폴백도 확인한다. 글자가 보인다는 사실만으로 같은 폰트가 적용됐다고 판단해서는 안 된다.

Inter 상세에서 지원 범위를 확인한 뒤 폰트 시뮬레이터에 한영 혼용 문구를 넣자. 정상·지연·실패 세 상태의 줄바꿈과 높이를 기록하면 폴백 스택을 시안과 코드가 함께 이해할 수 있다.