Interlude는 라틴과 CJK가 같은 화면 안에서 따로 튀지 않도록, 문자 사이의 밀도와 리듬을 다시 맞춘 인터페이스 서체입니다.
Inter의 라틴 글리프와 Pretendard의 CJK 글리프를 기반으로, 4px Grid 중심의 UI 환경에 맞게 폭과 밀도를 다시 조율했습니다. 라틴과 CJK가 함께 쓰일 때 생기는 크기감과 굵기 차이를 미세하게 조정해, 어느 한쪽이 튀지 않고 자연스럽게 읽히도록 맞췄습니다. 9가지 굵기와 wdth 축을 통한 Expanded & Condensed 너비 조절, Variable을 지원해 다양한 화면 밀도와 인터페이스 조건에 유연하게 대응합니다.
자세한 배경과 OpenType 기능, Inter 및 Pretendard와의 차이점은 이곳에서 확인하실 수 있습니다.
전체 글리프를 하나의 가변 폰트로 로드합니다.
<link href="https://cdn.jsdelivr.net/npm/interlude-ui/dist/css/interlude.css" rel="stylesheet">이 CSS는 세 가지 font-family를 정의합니다.
Interlude Variable— 가변 (opsz 14–32, wght 100–900, wdth 75–125)Interlude— 정적 본문용 (opsz 14)Interlude Display— 정적 제목용 (opsz 32)
페이지에서 실제로 사용하는 글리프만 로드하며, CJK 폰트의 용량 문제를 해결합니다.
<link href="https://cdn.jsdelivr.net/npm/interlude-ui/dist/dynamic-subset/interlude-variable-dynamic-subset.css" rel="stylesheet">body { font-family: "Interlude Variable", sans-serif; }npm install interlude-ui// app/layout.tsx
import { Interlude, InterludeDisplay } from "interlude-ui/font";
export default function RootLayout({ children }) {
return (
<html className={`${Interlude.variable} ${InterludeDisplay.variable}`}>
<body>{children}</body>
</html>
);
}/* globals.css */
body {
font-family: var(--font-interlude), sans-serif;
}
h1, h2, h3 {
font-family: var(--font-interlude-display), sans-serif;
}개별 import도 가능합니다:
import { Interlude } from "interlude-ui/font/sans";
import { InterludeDisplay } from "interlude-ui/font/display";@import "tailwindcss";
@import "interlude-ui/tailwind";<div class="font-sans">본문 Body</div>
<h1 class="font-display font-opsz-display">제목 Heading</h1>Dynamic Subset용 @font-face를 로드하고, @theme로 --font-sans / --font-display 토큰과 optical size 유틸리티(font-opsz-text, font-opsz-display)를 등록합니다.
@font-face 규칙이 정상적으로 적용되도록, 이 import는 CSS 파일의 가장 위에 두는 것을 권장합니다.
또한 Vite나 Next.js 같은 번들러는 폰트 경로를 자동으로 처리하지만, Tailwind standalone CLI 환경에서는 import된 폰트 URL이 제대로 재작성되지 않을 수 있습니다. 이런 경우, CDN의 CSS를 직접 불러와주세요.
<link href="https://cdn.jsdelivr.net/npm/interlude-ui/dist/dynamic-subset/interlude-variable-dynamic-subset.css" rel="stylesheet">권장하는 font-family 조합은 아래와 같습니다.
font-family: "Interlude Variable", "Interlude",
-apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
"Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";Interlude Variable은 하나의 파일에 Text opsz=14 와 Display opsz=32 를 모두 포함합니다.
/* 본문 (기본, opsz=14) */
body {
font-family: "Interlude Variable", sans-serif;
}
/* 제목/Hero (opsz=32) */
h1 {
font-family: "Interlude Variable", sans-serif;
font-variation-settings: 'opsz' 32;
}Static 폰트에서는 별도 패밀리로 분리되어 있습니다:
Interlude— 본문용Interlude Display— 제목용
- Interlude — UI, 본문에 최적화 (optical size 14)
- Interlude Display — Display, Hero에 최적화 (optical size 32)
| Axis | Tag | Range | Default |
|---|---|---|---|
| Optical Size | opsz |
14–32 | 14 |
| Weight | wght |
100–900 | 400 |
| Width | wdth |
75–125 | 100 |
- 라틴, 키릴, 그리스 문자 계열 (Inter 기반)
- 11,172자 한글 음절 (Pretendard 기반)
- 184자 히라가나 + 가타카나 (Pretendard 기반)
- 7,138자 CJK 통합 한자 (Pretendard 기반)
- CJK 기호·호환·반각/전각 문자 (Inter & Pretendard 혼합)
Glyphs 4에서 src/Interlude.glyphspackage 소스를 열고 File → Export → Variable → TrueType → TTF + WOFF2로 fonts/에 내보냅니다.
폰트 검증, Dynamic Subset, 패키징 등이 필요한 경우 Makefile로 아래와 같은 후처리를 진행해주세요.
python3 -m venv .venv
. .venv/bin/activate
python3 -m pip install -r requirements.txt
make check # 커밋된 네이티브 폰트 검증
make dist # 웹·npm 배포 파일
make package # 정적 TTF 54개·TTC·릴리스 ZIP까지 생성- Inter by @rsms
- Pretendard by @orioncactus
1.3부터 Glyphs 소스에서 직접 윤곽·마스터·앵커·기능을 편집합니다. 글리프를 수정할 때는 12개 마스터의 호환성을 유지하고, 소스와 네이티브 Export 파일을 함께 검증해주세요. Issues와 Pull Request를 환영합니다.