Image for post
Image for postImage for post

다국어 웹 타이포그래피 섞어짜기

Mixing Multilingual web

Dong-gri
Dong-gri
Aug 16 · 11 min read
Image for post
Image for postImage for post
출처: http://worklife.kr/

가장 먼저 떠오른 글꼴들…

스포카 한 산스 (Spoqa Han Sans)

Image for post
Image for postImage for post
개인적으로 스포카 한 산스는 숫자가 예뻐 좋아합니다.

Univers, San Francisco + NotoSans 섞어짜기

Image for post
Image for postImage for post

다른 곳에선 어떻게 사용하고 있을까?

  1. 영문 — Roboto, Proxima nova, inter (요즘 해외 서비스에서 많이 사용하기 시작함)

Roboto ↔ Proxima nova ↔ Inter

framer에서 inter를 사용한다며 이를 사용하는 게 어떻겠냐 해서 기존의 NotoSans를 기준으로 많이 사용하는 Roboto와 Inter 그리고 Proxima nova를 비교하게 됩니다.

Image for post
Image for postImage for post
세가지 글꼴 비교해보기 (국문은 Noto Sans CJK KR)
Image for post
Image for postImage for post
Roboto는 1과 2-0이 쓰이면 사이가 다른 숫자에 비해 넓어보입니다. Proxima nova는 0-5의 사이가 1과 0에 비해 넓어보입니다. (예시 숫자는 임의 작성)
Image for post
Image for postImage for post
Proxima nova의 알파벳 a — Bowl이 너무 못생겨 보입니다.
Image for post
Image for postImage for post
Noto Sans에 비해 셋다 X-height가 작지만, 그나마 Inter가 제일 높습니다.
Image for post
Image for postImage for post
Noto Sans CJK KR의 medium보다 Inter medium의 굵기가 더 얇습니다. (Inter의 굵기는 Semibold를 사용하는 것으로 차이를 보정합니다.)

실 서비스에 적용하기

원래는 영문은 Inter, 국문은 Noto Sans KR로 섞어 사용하려 했습니다. 하지만 단순히 대체 글꼴 선언만으로 지정하기엔 각자 다른 글꼴과 글리프 마다 세세하게 조정하기가 현실적으로 어렵고 성능상의 이슈 때문에 HTML의 Lang 속성에 따라 각각 다른 글꼴로 표현하기로 했습니다.

Image for post
Image for postImage for post
한국어 임에도 불구하고 Noto Sans JP를 불러오는 모습
  • 영문(English) — Inter + Noto Sans KR (혹시라도 국문이 있을 경우를 대비)
  • 일어(Japanese) 및 기타 — 운영체제에 따른 시스템 폰트

마무리

디지털 폰트에서 Variable 기술이 나오고, 저용량의 압축효율이 높은 woff2 방식이 나오는 등 많이 발전하고 있지만, 편집디자인에서 Indesign의 합성글꼴처럼 세세하게 조정하지 못하는 점이 아쉽습니다. 기본 111,172자 최소 2,350자로 많은 한글 폰트를 웹에서 Weight 별로 불러오는 것도 제한을 많이 받습니다. 기술적으로 더 많이 발전이 이루어졌으면 하는 바람입니다.


도움이 되는 글들 (본문에 소개한 글 제외)

guleum

Dong-gri LAB

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store