✨ 타이포그래피 종합 연구 리서치 포털

글자에 목소리를 입히는
시각 인터페이스의 모든 것

타이포그래피(Typography)는 단순한 서체 선택을 넘어, 텍스트에 표정과 구조를 부여하여 정보의 명확한 전달과 감성적 브랜드 경험을 완성하는 디자인의 근본 예술이자 기술입니다.

🚀 실시간 조판 실험실 바로가기 📐 서체 해부학 탐색
500+
역사적 진화
1450년대 구텐베르크부터 가변 폰트까지
4대
핵심 서체군
Serif, Sans-serif, Slab, Display
3요소
공간 제어 시스템
Kerning, Tracking, Leading
4.5:1
WCAG 명도 대비
웹 접근성을 보장하는 본문 대비비
01. Type Anatomy & Metrics

서체 해부학 및 수직 기준선

모든 글자는 수학적·비례적 기준선 위에서 정교하게 조판됩니다. 마우스를 올리면 각 기준선과 부위별 역할을 확인할 수 있습니다.

서체 수직 기준선 구조도
🟢 베이스라인 (Baseline) 핵심 기준선

모든 글자가 나란히 얹히는 가장 바닥의 기준 수평선입니다. 줄바꿈과 행간 계산의 기준점이 됩니다.

🔵 X-하이트 (x-height) 가독성 핵심

소문자 'x'의 높이입니다. x-height가 높을수록 작은 크기나 모바일 화면에서 본문 판독성(Legibility)이 우수합니다.

🟠 캡 하이트 (Cap Height) 대문자 높이

베이스라인부터 대문자(H, K, E 등) 최상단까지의 높이입니다.

🔴 어센더 (Ascender) 상향 획

소문자(b, d, h, k, l)에서 x-height 선 위로 솟아오른 기둥 획입니다.

🟣 디센더 (Descender) 하향 획

소문자(g, j, p, q, y)에서 베이스라인 아래로 뻗어 내려가는 꼬리 획입니다.

02. Typeface Classification & Psychology

서체 4대 분류 체계 & 시각 심리학

서체는 사용자에게 무의식적인 신뢰와 감성을 전달합니다. 원하는 텍스트를 직접 입력하여 서체별 느낌을 실시간으로 비교해보세요.

세리프 (Serif / 명조)

전통 & 권위
Typography & 타이포그래피

획의 끝에 돌기(Serif)가 있어 시선 이동을 돕고 클래식하며 품격 있는 분위기를 자아냅니다.

대표 폰트: Garamond, Times New Roman, 바탕체, 나눔명조
주요 활용: 단행본 서적, 학술지, 럭셔리 브랜드 로고

산세리프 (Sans-serif / 고딕)

모던 & 명료
Typography & 타이포그래피

프랑스어 Sans(~없는)에서 유래하여 돌기가 없고 획 굵기가 균일하여 현대적이고 깔끔합니다.

대표 폰트: Helvetica, Inter, Pretendard, 본고딕(Noto Sans)
주요 활용: 디지털 웹/앱 UI, 테크 브랜딩, 공공 사이니지

슬랩 세리프 (Slab Serif)

강렬 & 견고
Typography & 타이포그래피

두껍고 각진 블록형 세리프를 지녀 높은 시각적 임팩트와 빈티지한 안정감을 줍니다.

대표 폰트: Rockwell, Clarendon, Courier Prime
주요 활용: 헤드라인 타이틀, 레트로 포스터, 코딩 에디터

스크립트 & 디스플레이

개성 & 감성
Typography & Typography

손글씨 캘리그래피 형태나 조형적 개성을 극대화한 서체로 감성적 주목도를 높입니다.

대표 폰트: Pacifico, Bickham Script, 장식 폰트
주요 활용: 브랜드 시그니처, 패키지 디자인, 청첩장
03. Hangeul Typography

한글 타이포그래피의 특수성과 진화

초성·중성·종성의 3벌 결합 구조를 가진 한글은 세계에서 유일하게 창제 원리와 글자 조형 구조가 기하학적으로 완벽히 설계된 문자입니다.

조형 구조 01

네모틀 서체 (Square Grid)

모든 글자가 일정한 가상의 사각형 안에 꽉 차도록 설계된 구조입니다. 줄 맞춤이 일정하고 시선의 흐름이 안정적이어서 장문 본문 가독성에 가장 최적화되어 있습니다.

대표 서체: 바탕체, 돋움체, 본고딕(Noto Sans CKR), 프리텐다드(Pretendard)
조형 구조 02

탈네모틀 서체 (Off-Square Grid)

자음과 모음 본래의 크기와 비례를 살려 글자마다 높낮이와 폭이 다르게 설계된 구조입니다. 1980년대 안상수 디자이너의 '안상수체'를 통해 한글 타이포그래피의 현대적 르네상스를 열었습니다.

대표 서체: 안상수체, 한결체, 공병우 타자기체
04. Interactive Typesetting Lab

실시간 조판 & 공간 실험실

슬라이더를 움직여 폰트 크기, 행간(Leading), 자간(Tracking), 정렬을 조절하고 실시간 가독성(CPL) 수치를 직접 확인해보세요.

폰트 크기 (Font Size) 16px
행간 비율 (Line Height) 1.65
자간 (Letter Spacing) 0em
텍스트 정렬 (Alignment)
타이포그래피는 단순한 문자 표현을 넘어, 인간의 인지 구조와 시각적 질서가 만나는 디자인의 핵심 뼈대입니다. 좋은 타이포그래피는 글의 맥락에 알맞은 서체와 적절한 행간(Leading 150~175%), 그리고 최적의 행 길이(한 줄당 30~50자)를 확보할 때 독자에게 피로감 없는 편안한 독서 경험을 선사합니다. 이곳의 텍스트를 직접 편집해보세요!
📏 한 줄당 글자 수 (CPL): 38 자 ✅ 최적 가독성 (30~50자 권장)
05. Font Pairing Studio

실패 없는 폰트 페어링 공식

서로 다른 두 서체를 결합할 때의 황금률은 '명확한 대조(Contrast)와 은근한 조화(Harmony)'입니다.

Preset 01: Editorial Classic
The Beauty of Classic Letters
세리프 헤더와 산세리프 본문의 결합은 전통적인 품격과 모던한 디지털 가독성을 동시에 만족시키는 가장 안전하고 우아한 조합입니다.
헤더: Playfair Display (Serif) | 본문: Pretendard (Sans)
Preset 02: Modern Tech
Next-Gen Digital Interface
기하학적 산세리프(Geometric)를 대제목에 사용하고 휴머니스트 산세리프를 본문에 매칭하여 미래지향적인 테크 브랜드 감성을 극대화합니다.
헤더: Montserrat Black | 본문: Inter Regular
06. 500-Year Historical Timeline

타이포그래피 500년 진화의 역사

1450년대 구텐베르크 금속활자부터 21세기 가변 폰트(Variable Font)까지의 역사적 이정표를 한눈에 살펴보세요.

1450년대
구텐베르크 금속활자 발명
손 필사본 시대를 종식시키고 지식의 대량 인쇄와 보급을 가능케 한 42행 성서 및 블랙레터(Blackletter) 활자 시대 개막.
16~18세기
올드 스타일 & 트랜지셔널 로만체
인문주의적 비례와 균형을 갖춘 가라몬드(Garamond)와 수학적 정밀함을 강조한 바스커빌(Baskerville) 서체 탄생.
19세기 후반
산업혁명과 산세리프의 등장
대량 소비와 광고 포스터를 위한 굵은 슬랩 세리프(Slab Serif) 및 장식 없는 그로테스크 산세리프 활자 유행.
20세기 중반
스위스 인터내셔널 스타일
기능주의, 엄격한 그리드 시스템, 명확한 객관성을 추구하며 헬베티카(Helvetica)와 유니버스(Univers) 서체 탄생.
21세기~현재
가변 폰트 & 디지털 UI 표준화
단일 파일로 모든 굵기와 너비를 제어하는 가변 폰트(Variable Font)와 본고딕(Noto Sans), 프리텐다드(Pretendard) 중심의 웹 타이포그래피.
07. Curated Media & Videos

엄선된 추천 영상 및 공식 학습관

전 세계 최고의 디자인 채널과 다큐멘터리에서 엄선한 타이포그래피 핵심 교육 영상들입니다.

입문 필수 튜토리얼
Beginning Graphic Design: Typography
서체 종류, 시각적 위계, 자간과 행간의 원리를 6분 만에 완벽히 이해하는 최고 평점 가이드.
YouTube에서 보기 ↗
디자인 다큐멘터리
Why this font is everywhere | Vox
대중문화, 앨범 커버, 식품 패키징을 점령한 서체 'Cooper Black'의 흥미진진한 문화사 탐구.
YouTube에서 보기 ↗
역사 스톱모션
A Brief History of Typography
291장의 종이 스톱모션 애니메이션으로 구텐베르크부터 디지털 서체까지의 역사를 다룬 명작.
YouTube에서 보기 ↗
08. Practical Tools & Quiz

실무 조판 체크리스트 & 타이포 퀴즈

디자인 배포 전 필수 검증 항목을 체크하고, 3문항의 미니 퀴즈로 학습 내용을 테스트해보세요.

📋 퍼블리싱 전 6대 검증 체크리스트

완벽한 조판을 위해 배포 전 직접 체크해보세요.

🎯 인터랙티브 타이포그래피 퀴즈

문제를 읽고 정답을 클릭해보세요.