Inter 폰트 사용법 — 한글이 없는 화면용 산세리프를 한글 서체와 짝짓는 법

Inter를 소개하는 글은 대개 화면 가독성 이야기로 시작하지만, 한국어권 사용자에게 더 중요한 사실은 따로 있다. 이 서체에는 한글이 없다. 획획클럽이 서빙하는 Inter 자산을 열어 보면 그릴 수 있는 문자가 231자, 현대 한글 11,172자 중 커버는 0자다.

그러니 한국어 화면에서 Inter 를 쓴다는 것은 Inter 하나를 고르는 일이 아니라 한글 서체와 짝을 짓는 일이다. 짝이 어긋나면 한 문장 안에서 영문만 크거나 작아 보인다. 이 글은 그 짝을 실측 숫자로 고르는 방법에 초점을 맞춘다.

Monthly revenue reached 128,400 USD in March, up 12.8% from February. Every label on this dashboard still has to survive a glance at 13 pixels.

11픽셀에 맞추려다 방향을 바꾼 서체

Inter 는 라스무스 안데르손(Rasmus Andersson) 한 사람이 만들었다. 2016년 말 실험으로 시작했고 처음 이름은 Interface 였다. 첫 공개는 2017년 8월 20일이다. 그는 피그마에서 일하던 시절 디자인팀이 한 달 동안 로보토를 대신할 서체를 찾다가 마땅한 것이 없어 직접 만들기 시작했다고 밝히고 있다.

초기 접근은 11px 에서 픽셀 격자에 정확히 들어맞는 폰트를 만드는 것이었다. 그런데 그 방식이 오히려 읽기를 방해한다는 것을 확인하고, 글자 사이의 변별력과 부드러운 곡선을 살리는 쪽으로 방향을 완전히 바꿨다고 한다. 화면용 서체의 목표가 '픽셀에 맞추기'가 아니라 '작은 크기에서 구별되기'라는 결론에 도달한 셈이다.

파일 안의 저작권 표기는 2016년 Inter Project Authors 이고, 획획클럽 자산의 버전은 4.001 이다. 피그마, 깃허브, 유니티, 모질라 등이 사용처로 알려져 있으며, 모질라의 디자인 시스템 문서는 파이어폭스 브랜드 사이트의 본문 서체로 Inter 를 명시한다.

제작자의 주장을 숫자로 검증해 보면

안데르손은 Inter 의 x-height 가 대문자 높이의 정확히 4분의 3이라고 밝힌다. 실제로 재 보면 x-height 가 폰트 단위로 1118, 대문자 높이가 1490 이다. 나누면 0.7503 이다. 주장이 그대로 맞는다.

절대값으로 보면 x-height 는 em 의 0.546 인데, 이 글에서 다루는 다섯 서체 중 가장 크다. 16px 로 지정하면 소문자 x 의 높이가 8.7px 다. 같은 조건에서 SUIT 는 7.4px 이므로 같은 폰트 크기를 줘도 Inter 가 18% 크게 보인다. 작은 크기에서 잘 읽히도록 만들었다는 설명이 이 숫자에 들어 있다. 소문자 x 는 잉크 높이와 진행폭이 둘 다 0.546em 이라 거의 정사각형에 가깝다.

줄 높이는 1.21 이다. 이 파일은 typo 계열 수치를 쓰라는 플래그가 켜져 있어 대부분의 환경에서 1.21 로 잡히지만, 그 플래그를 무시하는 환경에서는 win 계열 수치를 읽어 1.43 까지 벌어진다. 문서 도구와 브라우저에서 줄 간격이 달라 보인다면 원인이 여기일 수 있다.

파일 크기는 23.1KiB 다. 담긴 문자가 231자, 글리프가 518개뿐이니 당연한 결과인데, 영문만 필요한 화면에서 로딩 비용이 거의 들지 않는다는 실질적인 장점으로 이어진다. 기능 태그에는 문맥에 따라 글자 모양을 바꾸는 calt 가 기본으로 들어 있고, 고정폭 숫자와 분수, 위아래 첨자 관련 태그도 갖추고 있다.

Weekly Active Users 42,910

어떤 한글 서체와 섞어야 하나

본론이다. Inter 를 앞에 두고 한글 서체를 뒤에 두면 영문과 숫자는 Inter 가, 한글은 뒤 서체가 그린다. 이때 두 서체의 x-height 가 다르면 한 문장 안에서 크기가 어긋나 보인다. 실측값으로 줄을 세워 보자. Inter 가 0.546 일 때 본고딕은 0.543, 프리텐다드는 0.530, 나눔스퀘어 Neo 는 0.525, SUIT 는 0.461 이다.

가장 가까운 짝은 본고딕이다. 차이가 0.003em 에 불과해 사실상 같은 눈높이다. 게다가 라틴 표본 문자열의 폭도 Inter 가 8.131em, 본고딕이 8.054em 으로 거의 겹친다. 영문 레이아웃을 Inter 로 잡아 두고 한글을 본고딕으로 받치면 줄 길이가 크게 달라지지 않는다.

프리텐다드는 조금 다르다. 프리텐다드의 라틴은 원래 Inter 를 바탕으로 다시 그린 것인데, 실측에서는 같은 문자열이 7.705em 으로 Inter 보다 5.5% 좁다. 한글과 나란히 놓을 때의 균형을 위해 다시 조정됐다는 뜻이다. 그래서 Inter 로 잡아 둔 영문 레이아웃을 프리텐다드로 통일하면 줄이 조금 짧아진다. 어느 쪽이 낫다기보다, 바꿔 끼울 때 폭이 달라진다는 사실을 알고 있어야 한다.

반대로 SUIT 와 섞는 조합은 주의가 필요하다. x-height 차이가 0.085em 이나 되어, 한 문장 안에서 영문만 눈에 띄게 커 보인다. 굳이 조합하려면 Inter 쪽 크기를 한두 단계 낮추는 보정이 필요하다.

쓸 자리와 쓰지 말아야 할 자리

Inter 는 영문과 숫자가 주인공인 자리에 강하다. 관리자 대시보드의 지표, 제품명, 버전 표기, 영문 라벨, 코드가 아닌 기술 문서의 본문 같은 곳이다. 파일이 가볍고 작은 크기에서의 변별력이 좋아, 조밀한 화면일수록 이득이 커진다.

당연하게도 한글 본문에는 단독으로 쓸 수 없다. 한국어 자막이나 한국어 제목에 지정하면 글자가 전부 다른 서체로 대체되므로, 지정한 의미가 사라진다. 한글이 조금이라도 섞이는 화면이라면 반드시 뒤에 둘 한글 서체를 함께 정해야 한다.

굵기와 문자 지원

배포본은 100부터 900까지 아홉 굵기에 각각 이탤릭을 더해 18스타일을 제공하고, 광학 크기 축을 가진 형태로도 배포된다. 다만 획획클럽 시뮬레이터가 내려 주는 자산은 굵기 400 하나짜리 정적 파일이라 그 축들이 들어 있지 않다. 굵기와 광학 크기별 차이까지 보려면 공식 배포처에서 전체 패밀리를 받는 편이 정확하다.

문자 지원은 라틴 기본 95자 전부, 라틴-1 보충 96자 중 95자다. 한글 음절은 0자, 한글 호환 자모도 0자다. 배포본은 그리스 문자와 키릴 문자까지 포함하는 다국어 서체이지만, 이 서비스의 미리보기 자산은 라틴 서브셋이라는 점을 기억해 두자.

라이선스

Inter 는 SIL Open Font License 1.1 로 배포된다. 획획클럽의 판정에서도 인쇄, 웹, 영상, 패키지, BI/CI 다섯 매체가 모두 허용으로 기록돼 있고, 제약은 폰트 파일 자체를 단독 상품으로 파는 것과 수정본 재배포 시 이름에 관한 조건 정도다.

적용 전에 Inter 상세 페이지에서 공식 라이선스 원문을 확인해 두면 좋다. 이 글은 요약이며 법률 자문이 아니다.

Interface text is read in a hurry, at small sizes, on screens that are never as good as the proof.

Inter 와 어울리는 한글 짝을 고르는 가장 빠른 방법은 겹쳐 보는 것이다. 쓰던 시안 이미지를 올리고 영문과 한글이 섞인 실제 문구를 얹은 다음, 뒤에 둘 한글 서체만 본고딕, 프리텐다드, SUIT 로 번갈아 바꿔 보면 위에서 읽은 x-height 차이가 화면에서 어떻게 보이는지 몇 초 만에 확인된다.