Typography Guidelines · v1.0
Linchpin·AI
번역이 달라집니다
DM Serif Display
Pretendard
JetBrains Mono
로고 · 한국어 · 코드
3가지 폰트 패밀리 가이드
폰트 시스템
Linchpin AI는 3가지 폰트를 목적에 따라 분리해서 사용해요. 로고·헤딩의 세련미(DM Serif), 한국어 가독성(Pretendard), 코드·수치의 정확함(JetBrains Mono)을 각각 담당해요.
Serif · 로고
DM Serif Display
google.com/fonts → DM Serif Display
Linchpin·AI
서비스 로고 (Linchpin·AI)
랜딩 페이지 히어로 제목
섹션 대제목 (serif 느낌이 필요한 곳)
숫자 강조 (크레딧, 통계)
Sans · 한국어 본문
Pretendard
github.com/orioncactus/pretendard
번역이
달라집니다
모든 한국어 본문 · UI 텍스트
영상 자막 · 인스타 카피
버튼 · 네비게이션 · 레이블
마케팅 임팩트 텍스트 (Black/Bold)
Mono · 코드·수치
JetBrains Mono
fonts.google.com → JetBrains Mono
00:01:23,456 → 00:01:27,890
타임코드 표시 (SRT 자막)
HEX 컬러 코드
API 키 · 코드 스니펫
번역 메모리 유사도 수치 (89%)

굵기(Weight) 가이드
Pretendard는 9가지 굵기를 지원해요. 아래 5가지만 사용하면 일관성을 유지할 수 있어요.
이름
굵기
예시 텍스트
사용처
Black
900
번역이 달라집니다
영상 임팩트 텍스트 영상
Bold
700
AI 번역, 한 번 맡기면
히어로 제목, 카드 제목
SemiBold
600
무료로 시작하기 →
버튼, CTA, 네비게이션 영상·웹
Medium
500
번역 메모리가 스타일을 기억해요
서브헤딩, 레이블
Regular
400
파일을 올리면 이전에 번역했던 말투·용어를 자동으로 불러와요.
본문 텍스트, 설명

타입 스케일
일관된 크기 체계를 사용해요. 중간 크기를 임의로 만들지 말고 아래 스케일을 따라주세요.
레벨
크기
예시
사용처
Display
64px
번역이 달라집니다
영상 임팩트 텍스트
H1
48px
AI 번역, 한 번 맡기면
랜딩 히어로 (DM Serif)
H2
32px
일반 AI 번역과 결정적으로 다른 점
섹션 제목
H3
20px
번역 메모리 자동 적용
카드 제목, 서브헤딩
Body
16px
파일을 올리면 이전 번역 스타일이 자동으로 이어져요.
본문 텍스트
Caption
13px
카드 등록 없이 · 가입 30초 · 5,000원 무료 지급
마이크로카피, 캡션

인스타 릴스 폰트 배치
6~7초 예고편 릴스 기준 각 장면에서 사용할 폰트와 굵기예요.
번역이
달라집니다
0~2초
Pretendard Black 900
타이프라이터 애니메이션
Linchpin·AI
AI TRANSLATION
2~4초
DM Serif Display Regular
로고 페이드인
AI 번역, 한 번 맡기면
번역이 쌓여가요
www.linchpinai.io
4~7초
DM Serif Display + Pretendard
사이트 화면 슬라이드인

조합 예시
DM Serif Display와 Pretendard가 함께 쓰일 때 어떻게 보이는지 확인해보세요.
랜딩 페이지 히어로
✦ 스타일을 기억하는 AI 번역
AI 번역, 한 번 맡기면
번역이 쌓여가요
파일을 올리면 이전에 번역했던 말투·용어·문체를
자동으로 불러와요.
카드 등록 없이 · 가입 30초
대시보드 (다크)
잔여 크레딧
5,000
번역 메모리 적용 중
TM 유사도
89%

이렇게 써주세요
폰트 사용 시 아래 원칙을 지키면 브랜드 일관성이 유지돼요.
✓ DO
로고는 항상 DM Serif Display 사용
한국어 본문은 Pretendard로 통일
임팩트 텍스트는 Pretendard Black (900)
타임코드·수치는 JetBrains Mono
영상 첫 장면: Pretendard Black + 다크 배경
영상 로고 장면: DM Serif + 다크 배경
✕ DON'T
Noto Sans KR로 로고 대체 (비슷해도 다름)
DM Serif를 본문 텍스트에 사용
굵기를 300 (Light) 이하로 쓰기
Pretendard + Noto Sans KR 동시에 사용
DM Serif에 Bold 속성 추가 (지원 안 됨)
임의의 굵기 (예: 450, 550) 사용

개발·디자인 도구용 코드
/* ── Google Fonts Import ── */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Pretendard CDN ── */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

/* ── CSS Variables ── */
--font-logo:   'DM Serif Display', serif;
--font-korean: 'Pretendard', 'Noto Sans KR', sans-serif;
--font-mono:   'JetBrains Mono', monospace;

/* ── 사용 예시 ── */
.logo        { font-family: var(--font-logo);   font-size: 19px; }
.hero-title  { font-family: var(--font-logo);   font-size: 48px; }
.body-text   { font-family: var(--font-korean); font-weight: 400; }
.btn         { font-family: var(--font-korean); font-weight: 600; }
.impact      { font-family: var(--font-korean); font-weight: 900; }
.timecode    { font-family: var(--font-mono);   font-weight: 500; }

/* ── Canva 입력용 ── */
로고:        DM Serif Display · Regular
임팩트:      Pretendard · Black (900)
CTA 문구:   Pretendard · SemiBold (600)
본문:        Pretendard · Regular (400)