avanturationavanturation
avanturation

The Interlude typeface family

다국어 인터페이스를 더 유연한 밀도로

폰트 다운로드

Interlude는 Pretendard와 Inter를 기반으로 설계된 인터페이스 서체입니다. 라틴 문자와 CJK 문자가 한 화면 안에서 따로 튀지 않도록, 문자 사이의 밀도와 리듬을 섬세하게 조율했습니다.

Pretendard는 한국어 기반 UI와 다국어 환경을 폭넓게 커버할 수 있는 균형 잡힌 서체입니다. 다만 영문 중심의 인터페이스, 기술 문서, 코드성 텍스트가 함께 등장하는 환경에서는 Inter가 가진 영문 가독성과 기호 표현의 정교함이 더 잘 맞는다고 판단했습니다.

또한 40px 이상의 Hero 문구에서는 더 높은 시인성과 또렷한 인상을 위해 Inter Display를 주로 사용합니다. Pretendard는 별도의 Display용 Optical Size를 제공하지 않기 때문에, 큰 크기의 제목 영역에서는 Inter Display가 더 안정적인 선택이었습니다.

다만 Inter는 CJK 글리프를 지원하지 않아 한국어, 일본어, 중국어가 포함된 환경에서는 단독으로 사용하기 어렵습니다. Interlude는 이를 보완하고자 Inter의 라틴 기반 인상은 유지하면서도, CJK 텍스트까지 자연스럽게 다룰 수 있도록 설계한 서체입니다.

Interlude는 Inter와 마찬가지로 본문용 Optical Size와 Display용 Optical Size를 모두 제공합니다. 이 과정에서 CJK 글리프도 Display Optical Size에 맞춰 추가로 보정했습니다.

OpenType 기능 역시 Pretendard와 Inter 두 서체가 제공하는 주요 OpenType 기능을 함께 지원하며, CJK 환경에서 특히 중요한 세부 보정도 함께 반영했습니다. 예를 들어 Pretendard의 ss05를 지원하고, 구두점과 괄호의 기본 정렬이 언어에 따라 자연스럽게 보이도록 rclt를 통해 보정했습니다.

Figma와 같은 상용 디자인 툴에서의 UI 설계를 고려해, UI 전용 서체인 SUIT의 Vertical Metrics 값을 참고했습니다. UI에서 자주 사용하는 본문 크기인 16px과 18px에서 기본 줄간격이 짝수로 떨어지도록 설정했습니다.

또한 9가지 굵기와 wdth 축 기반의 가변 너비 조절을 지원해, Expanded부터 Condensed까지 폭을 유연하게 조정할 수 있습니다. Variable Font를 통해 다양한 화면 밀도와 인터페이스 조건에 맞춰 더 정교한 타이포그래피 구성이 가능합니다.

Latin · Cyrillic · Greek

1,133자

한글

11,172자 전체 음절

일본어 가나

184자

CJK 한자

7,490자

기호 · 구두점 · 통화

200+자

Font Family

Thin100
APGU에서 한 번 돌리고, 흐름 안 끊기게 Baddie랑 Rodeo 가로수길 사이사이를 가로질러, ITW Bolero로 Hole in one
ExtraLight200
느껴 지금 널, 네 자신의 이름도 세상이 찌들고 있어, 답답함이 깊어지는 Seoul
Light300
I born to I am 서울, 몇 년이 지나도 I am in my lane Why it's all too fast, yeah baby I crave
Regular400
하나만 해 that's on me, all of my gas 둘만 아는 place, 그럼 난 어디 있겠어?
Medium500
내 패션 아니야 from 꼬레아 babe, Straight to Japan Back it again, Yuh 今日, what is up, man?
Semibold600
서울을 바꿨어 I did it again, so Y'all pull up to 부산 more hyper again
Bold700
이태원으로부터 압구까지, 한 바쿠를 돌리고 Bruce Lee 처럼 kick, 올라가네 peak
ExtraBold800
풍무동 사우동 강서구청, 연남에서 마포 상수동 비에 젖은 논현 골목 거리, 강남 딱 싫어 그 동네가 난
Black900
But I wanna tell you baby, I•서울•U I got two faces, don't wanna be me

Width 조절

가변 Width 조절
EDM BAECardianAPGUMAINSTREAMORTONEDM BAECardianAPGUMAINSTREAMORTON
VeteranYeezusAntivandalismSS-POP6SEOULVeteranYeezusAntivandalismSS-POP6SEOUL
FREE THE BEASTKC2UMME5K-FLIP+LOVE$ICKFREE THE BEASTKC2UMME5K-FLIP+LOVE$ICK
I AM MUSICRipple EffectOCTANEDrugonlineI AM MUSICRipple EffectOCTANEDrugonline
CRIBLUXURY TAPEUtopiaROB LUCCICRIBLUXURY TAPEUtopiaROB LUCCI
BRATLOV3KANDY CRUSHLOVE IN THE AIRBRATLOV3KANDY CRUSHLOVE IN THE AIR
SAVAGE RMXPUBLIC ENEMYSWAGGERBEIGESAVAGE RMXPUBLIC ENEMYSWAGGERBEIGE
OUTTA SPACEDamn I FlexBaadboyNew BooOUTTA SPACEDamn I FlexBaadboyNew Boo

Interlude는 가변 Width 조절을 통해 화면의 밀도와 리듬에 맞춰 글자의 폭까지 조율할 수 있습니다.

Static 폰트는 Condensed 75%와 Expanded 125%로 제공되며, Variable 폰트에서는 100–900 Weight와 75%–125% Width 조절을 함께 지원합니다.

좁은 인터페이스부터 넓은 디스플레이까지, 같은 서체 안에서 더 유연한 타이포그래피 시스템을 만들 수 있습니다.

CJK 글리프 보정

수직 스케일 보정Pretendard의 capHeight(1448)를 Inter의 capHeight(1490)에 맞춰 1.029배 수직 스케일링. 라틴과 CJK가 같은 줄에서 크기가 다르게 보이는 문제를 제거합니다.
수평 비율 보정CJK 글리프에 1.007배 수평 스케일을 적용해, 정사각형 기반 CJK가 라틴 옆에서 압축되어 보이는 현상을 보정합니다.
굵기 매핑CJK 기본 굵기를 Pretendard wght=430에서 가져와 라틴 Regular(400)과 시각적 무게를 일치시킵니다. Thin~Black 전 구간에서 CJK/라틴 간 자연스러운 굵기 비율을 유지합니다.
Width 축 CJK 처리라틴은 수직 스템을 보존하는 보호 영역 워프를, CJK는 중심 기준 아핀 스케일링을 적용합니다. 75%~125% 전 범위에서 CJK 획 굵기와 그리드 정렬이 유지됩니다.

Interlude는 Pretendard의 CJK 글리프를 그대로 가져오지 않습니다. 라틴과 CJK가 같은 화면에서 조화롭게 보이도록, 빌드 과정에서 기하학적 보정을 적용합니다.

OpenType 기능

한글 컨텍스트 기호 정렬rlig
최원재: @정승환 (하하) 어디야?! 서울→부산 ₩10,000원
한글 현지화ss05
…너 없이… 지나간 날들이… …계속되고… 4월의 달콤한 소나기가…….
CJK 반각 대체 및 조절chws, halt

「東京」、 星になれた綺麗な。

Disambiguationss02, ss06

Il1l Illegal 0O

자동 분수frac

1/3 5/9 1/4 2/7

고정폭 숫자tnum

₩1,111,111

Interlude는 Inter와 Pretendard의 OpenType 기능을 통합하고, CJK 언어 환경에 최적화된 기능을 추가했습니다.

라틴 문자와 한글·중문·일문이 함께 쓰이는 상황에서도 자연스러운 글리프 선택과 안정적인 정렬을 제공합니다.

그 외 아래의 OpenType 기능들을 제공합니다.

aaltAccess All AlternatescaltContextual AlternatescaseCase-Sensitive FormsccmpGlyph CompositiondligDiscretionary LigaturesdnomDenominatorsfracFractionsloclLocalized FormsnumrNumeratorsordnOrdinalspnumProportional FiguresrligRequired LigaturessaltStylistic AlternatessinfScientific InferiorssubsSubscriptsupsSuperscripttnumTabular FigureszeroSlashed Zeross01–ss16Stylistic Setscv01–cv14Character VariantschwsContextual Half-widthcpspCapital SpacinghaltAlternate Half WidthskernKerningmarkMark PositioningmkmkMark-to-Markss05Korean Localization

설치 및 사용하기

웹 폰트로 사용하기

<link href="https://cdn.jsdelivr.net/npm/interlude-ui/dist/web/interlude.css" rel="stylesheet">

웹 폰트로 사용하고자 하는 경우, 상단에 해당 코드를 추가해주세요.

만약 경량 로딩을 위해 Dynamic Subset이 필요한 경우, dynamic-subset/interlude-variable-dynamic-subset.css 이나, Interlude-{weight}.css를 로딩해주세요.

Next.js에서 사용하기

npm i interlude-ui
import { Interlude, InterludeDisplay } from "interlude-ui/font";
import { Interlude } from "interlude-ui/font/sans";
import { InterludeDisplay } from "interlude-ui/font/display";
body {
  font-family: var(--font-interlude), sans-serif;
}

Next.js에서 사용하고자 하는 경우, npm으로 폰트 패키지를 설치해 라이브러리를 layout.tsx에 import하거나, globals.css에 해당 CSS를 추가해주세요.

Variable 사용법

body {
  font-family: "Interlude Variable";
  font-variation-settings: 'opsz' 14;
}

h1 {
  font-family: "Interlude Variable";
  font-variation-settings: 'opsz' 32;
}

Variable 폰트를 사용하는 경우, font-variation-settings를 통해 opsz 값을 조절하여 본문용 텍스트 또는 디스플레이용 텍스트에 맞게 사용해주세요.

라이센스 및 기여

Interlude는 Inter 및 Pretendard와 마찬가지로 SIL Open Font License 1.1을 따릅니다.

따라서 이 폰트는 해당 라이선스의 조건에 따라 자유롭게 사용할 수 있습니다.


또한 Interlude는 전문 폰트 툴 없이 OpenCode만으로 제작된 폰트입니다.

평소 UI 디자이너로서 가지고 있던 고민과 관점을 폰트에 담고자 했습니다. 그 과정에서 사소한 오차나 미처 발견하지 못한 부분이 있을 수 있습니다.


사용 중 발견한 문제나 개선 아이디어가 있다면 GitHub 레포지토리를 통해 제안과 기여를 보내주세요. 많은 관심과 기여를 부탁드립니다.

Interlude Typeface