타이포그래피·색채
각 항목을 클릭하면 시각 예시·비교·원문을 볼 수 있습니다.
서체 Typeface
일관된 조형 원칙을 공유하는 글자 디자인 체계.
브랜드 글꼴·제품 상세페이지·UI 테마·인쇄물의 가독성과 색 체계를 정한다.
색 공간과 출력 조건을 구분한다. 글꼴 파일의 배포·임베딩 조건은 별도로 확인한다.
폰트 Font
서체를 특정 스타일·굵기 등으로 구현한 글꼴 리소스 또는 파일.
브랜드 글꼴·제품 상세페이지·UI 테마·인쇄물의 가독성과 색 체계를 정한다.
색 공간과 출력 조건을 구분한다. 글꼴 파일의 배포·임베딩 조건은 별도로 확인한다.
세리프 Serif
획 끝에 작은 돌출 장식이 있는 서체 분류.
브랜드 글꼴·제품 상세페이지·UI 테마·인쇄물의 가독성과 색 체계를 정한다.
색 공간과 출력 조건을 구분한다. 글꼴 파일의 배포·임베딩 조건은 별도로 확인한다.
산세리프 Sans Serif
획 끝의 세리프 장식이 없는 서체 분류.
브랜드 글꼴·제품 상세페이지·UI 테마·인쇄물의 가독성과 색 체계를 정한다.
색 공간과 출력 조건을 구분한다. 글꼴 파일의 배포·임베딩 조건은 별도로 확인한다.
고정폭 서체 Monospace
각 문자에 동일한 가로 폭을 할당하는 글꼴.
브랜드 글꼴·제품 상세페이지·UI 테마·인쇄물의 가독성과 색 체계를 정한다.
색 공간과 출력 조건을 구분한다. 글꼴 파일의 배포·임베딩 조건은 별도로 확인한다.
디스플레이 서체 Display Typeface
긴 본문보다 제목·포스터 등 큰 크기의 표현에 초점을 맞춘 서체.
브랜드 글꼴·제품 상세페이지·UI 테마·인쇄물의 가독성과 색 체계를 정한다.
색 공간과 출력 조건을 구분한다. 글꼴 파일의 배포·임베딩 조건은 별도로 확인한다.
커닝 Kerning
특정 두 글자 사이의 간격을 조정하는 작업.
브랜드 글꼴·제품 상세페이지·UI 테마·인쇄물의 가독성과 색 체계를 정한다.
색 공간과 출력 조건을 구분한다. 글꼴 파일의 배포·임베딩 조건은 별도로 확인한다.
트래킹 Tracking
문자열 전체의 자간을 균일하게 늘리거나 줄이는 조정.
브랜드 글꼴·제품 상세페이지·UI 테마·인쇄물의 가독성과 색 체계를 정한다.
색 공간과 출력 조건을 구분한다. 글꼴 파일의 배포·임베딩 조건은 별도로 확인한다.
행간 Leading
연속된 텍스트 줄의 기준선 사이 간격.
브랜드 글꼴·제품 상세페이지·UI 테마·인쇄물의 가독성과 색 체계를 정한다.
색 공간과 출력 조건을 구분한다. 글꼴 파일의 배포·임베딩 조건은 별도로 확인한다.
베이스라인 Baseline
글자의 몸체가 놓이는 기준선.
브랜드 글꼴·제품 상세페이지·UI 테마·인쇄물의 가독성과 색 체계를 정한다.
색 공간과 출력 조건을 구분한다. 글꼴 파일의 배포·임베딩 조건은 별도로 확인한다.
엑스하이트 x-height
소문자 x를 기준으로 보는 소문자 몸체의 높이.
브랜드 글꼴·제품 상세페이지·UI 테마·인쇄물의 가독성과 색 체계를 정한다.
색 공간과 출력 조건을 구분한다. 글꼴 파일의 배포·임베딩 조건은 별도로 확인한다.
대문자 높이 Cap Height
대문자의 기본 높이로, 베이스라인에서 위쪽까지의 거리.
브랜드 글꼴·제품 상세페이지·UI 테마·인쇄물의 가독성과 색 체계를 정한다.
색 공간과 출력 조건을 구분한다. 글꼴 파일의 배포·임베딩 조건은 별도로 확인한다.
가변 폰트 Variable Font
하나의 글꼴 파일에서 굵기·너비 등 지원 축의 값을 연속적으로 바꾸는 기술.
브랜드 글꼴·제품 상세페이지·UI 테마·인쇄물의 가독성과 색 체계를 정한다.
색 공간과 출력 조건을 구분한다. 글꼴 파일의 배포·임베딩 조건은 별도로 확인한다.
합자 Ligature
두 개 이상의 글자를 하나의 연결된 글리프로 표현한 형태.
브랜드 글꼴·제품 상세페이지·UI 테마·인쇄물의 가독성과 색 체계를 정한다.
색 공간과 출력 조건을 구분한다. 글꼴 파일의 배포·임베딩 조건은 별도로 확인한다.
위도·오펀 Widow and Orphan
문단이나 페이지 경계에서 한 줄 또는 짧은 단어가 외따로 남는 조판 문제.
브랜드 글꼴·제품 상세페이지·UI 테마·인쇄물의 가독성과 색 체계를 정한다.
색 공간과 출력 조건을 구분한다. 글꼴 파일의 배포·임베딩 조건은 별도로 확인한다.
베이스라인 그리드 Baseline Grid
여러 텍스트 블록의 기준선을 일정 간격으로 맞추는 격자.
브랜드 글꼴·제품 상세페이지·UI 테마·인쇄물의 가독성과 색 체계를 정한다.
색 공간과 출력 조건을 구분한다. 글꼴 파일의 배포·임베딩 조건은 별도로 확인한다.
색상 Hue
빨강·파랑처럼 색의 종류를 구분하는 속성.
브랜드 글꼴·제품 상세페이지·UI 테마·인쇄물의 가독성과 색 체계를 정한다.
색 공간과 출력 조건을 구분한다. 글꼴 파일의 배포·임베딩 조건은 별도로 확인한다.
채도 Saturation
색이 얼마나 선명하거나 무채색에 가까운지 나타내는 속성.
브랜드 글꼴·제품 상세페이지·UI 테마·인쇄물의 가독성과 색 체계를 정한다.
색 공간과 출력 조건을 구분한다. 글꼴 파일의 배포·임베딩 조건은 별도로 확인한다.
명도·밝기 Value / Lightness
색이 밝거나 어둡게 지각되는 정도. 색 모델에 따라 정의가 다르다.
브랜드 글꼴·제품 상세페이지·UI 테마·인쇄물의 가독성과 색 체계를 정한다.
색 공간과 출력 조건을 구분한다. 글꼴 파일의 배포·임베딩 조건은 별도로 확인한다.
보색 Complementary Colors
선택한 색상환에서 서로 반대쪽에 위치하는 색의 관계.
브랜드 글꼴·제품 상세페이지·UI 테마·인쇄물의 가독성과 색 체계를 정한다.
색 공간과 출력 조건을 구분한다. 글꼴 파일의 배포·임베딩 조건은 별도로 확인한다.
유사색 Analogous Colors
색상환에서 가까운 위치에 있는 색들을 조합한 배색.
브랜드 글꼴·제품 상세페이지·UI 테마·인쇄물의 가독성과 색 체계를 정한다.
색 공간과 출력 조건을 구분한다. 글꼴 파일의 배포·임베딩 조건은 별도로 확인한다.
단색 계열 배색 Monochromatic Palette
한 색상을 중심으로 명도·채도를 달리하는 배색.
브랜드 글꼴·제품 상세페이지·UI 테마·인쇄물의 가독성과 색 체계를 정한다.
색 공간과 출력 조건을 구분한다. 글꼴 파일의 배포·임베딩 조건은 별도로 확인한다.
강조색 Accent Color
주요 행동이나 중요한 요소에 제한적으로 사용해 주목시키는 색.
브랜드 글꼴·제품 상세페이지·UI 테마·인쇄물의 가독성과 색 체계를 정한다.
색 공간과 출력 조건을 구분한다. 글꼴 파일의 배포·임베딩 조건은 별도로 확인한다.
의미 기반 색 Semantic Color
오류·성공·주의처럼 상태 의미에 대응시킨 색.
브랜드 글꼴·제품 상세페이지·UI 테마·인쇄물의 가독성과 색 체계를 정한다.
색 공간과 출력 조건을 구분한다. 글꼴 파일의 배포·임베딩 조건은 별도로 확인한다.
RGB 색 모델 RGB
빨강·초록·파랑 빛의 가산 혼합으로 색을 표현하는 모델.
브랜드 글꼴·제품 상세페이지·UI 테마·인쇄물의 가독성과 색 체계를 정한다.
색 공간과 출력 조건을 구분한다. 글꼴 파일의 배포·임베딩 조건은 별도로 확인한다.
CMYK 색 모델 CMYK
청록·자홍·노랑·검정 잉크를 이용하는 인쇄 중심의 색 모델.
브랜드 글꼴·제품 상세페이지·UI 테마·인쇄물의 가독성과 색 체계를 정한다.
색 공간과 출력 조건을 구분한다. 글꼴 파일의 배포·임베딩 조건은 별도로 확인한다.
색역 Color Gamut
장치나 색 공간이 표현할 수 있는 색의 범위.
브랜드 글꼴·제품 상세페이지·UI 테마·인쇄물의 가독성과 색 체계를 정한다.
색 공간과 출력 조건을 구분한다. 글꼴 파일의 배포·임베딩 조건은 별도로 확인한다.
색상 프로파일 Color Profile
장치·색 공간 사이 색 재현을 관리하기 위한 특성 정보.
브랜드 글꼴·제품 상세페이지·UI 테마·인쇄물의 가독성과 색 체계를 정한다.
색 공간과 출력 조건을 구분한다. 글꼴 파일의 배포·임베딩 조건은 별도로 확인한다.
OKLCH 색 공간 OKLCH
지각적 명도·채도·색상 축으로 색을 표현하는 OKLab 계열 색 공간.
브랜드 글꼴·제품 상세페이지·UI 테마·인쇄물의 가독성과 색 체계를 정한다.
색 공간과 출력 조건을 구분한다. 글꼴 파일의 배포·임베딩 조건은 별도로 확인한다.
듀오톤 Duotone
두 색 또는 두 잉크 계열로 이미지의 명암을 표현하는 기법.
브랜드 글꼴·제품 상세페이지·UI 테마·인쇄물의 가독성과 색 체계를 정한다.
색 공간과 출력 조건을 구분한다. 글꼴 파일의 배포·임베딩 조건은 별도로 확인한다.
그레이디언트 Gradient
두 개 이상 색이나 투명도 사이를 연속적으로 변화시키는 표현.
브랜드 글꼴·제품 상세페이지·UI 테마·인쇄물의 가독성과 색 체계를 정한다.
색 공간과 출력 조건을 구분한다. 글꼴 파일의 배포·임베딩 조건은 별도로 확인한다.
Typography & Color
Open an entry for its visual reference, comparisons and source-language text.
Typeface 서체
A system of letter designs sharing consistent visual principles.
Defining typography, readability, and color systems for brands, product pages, interface themes, and print.
Distinguish color spaces from output conditions. Check font redistribution and embedding terms separately.
Font 폰트
A typeface resource or file implementing a particular style, weight, or related variation.
Defining typography, readability, and color systems for brands, product pages, interface themes, and print.
Distinguish color spaces from output conditions. Check font redistribution and embedding terms separately.
Serif 세리프
A typeface category with small finishing strokes at the ends of letter strokes.
Defining typography, readability, and color systems for brands, product pages, interface themes, and print.
Distinguish color spaces from output conditions. Check font redistribution and embedding terms separately.
Sans Serif 산세리프
A typeface category without serif finishing strokes.
Defining typography, readability, and color systems for brands, product pages, interface themes, and print.
Distinguish color spaces from output conditions. Check font redistribution and embedding terms separately.
Monospace 고정폭 서체
A font assigning the same horizontal advance width to each character.
Defining typography, readability, and color systems for brands, product pages, interface themes, and print.
Distinguish color spaces from output conditions. Check font redistribution and embedding terms separately.
Display Typeface 디스플레이 서체
A typeface intended primarily for large headings or posters rather than long body text.
Defining typography, readability, and color systems for brands, product pages, interface themes, and print.
Distinguish color spaces from output conditions. Check font redistribution and embedding terms separately.
Kerning 커닝
Adjusting the spacing between a particular pair of letters.
Defining typography, readability, and color systems for brands, product pages, interface themes, and print.
Distinguish color spaces from output conditions. Check font redistribution and embedding terms separately.
Tracking 트래킹
Uniformly increasing or decreasing spacing across a run of text.
Defining typography, readability, and color systems for brands, product pages, interface themes, and print.
Distinguish color spaces from output conditions. Check font redistribution and embedding terms separately.
Leading 행간
The distance between the baselines of successive lines of text.
Defining typography, readability, and color systems for brands, product pages, interface themes, and print.
Distinguish color spaces from output conditions. Check font redistribution and embedding terms separately.
Baseline 베이스라인
The reference line on which the main bodies of letters sit.
Defining typography, readability, and color systems for brands, product pages, interface themes, and print.
Distinguish color spaces from output conditions. Check font redistribution and embedding terms separately.
x-height 엑스하이트
The height of lowercase bodies, conventionally measured using the letter x.
Defining typography, readability, and color systems for brands, product pages, interface themes, and print.
Distinguish color spaces from output conditions. Check font redistribution and embedding terms separately.
Cap Height 대문자 높이
The nominal height of capital letters measured upward from the baseline.
Defining typography, readability, and color systems for brands, product pages, interface themes, and print.
Distinguish color spaces from output conditions. Check font redistribution and embedding terms separately.
Variable Font 가변 폰트
Font technology that allows continuous changes along supported axes within a single font file.
Defining typography, readability, and color systems for brands, product pages, interface themes, and print.
Distinguish color spaces from output conditions. Check font redistribution and embedding terms separately.
Ligature 합자
A single connected glyph representing two or more letters.
Defining typography, readability, and color systems for brands, product pages, interface themes, and print.
Distinguish color spaces from output conditions. Check font redistribution and embedding terms separately.
Widow and Orphan 위도·오펀
Typesetting problems in which a line or short word is isolated at a paragraph or page boundary.
Defining typography, readability, and color systems for brands, product pages, interface themes, and print.
Distinguish color spaces from output conditions. Check font redistribution and embedding terms separately.
Baseline Grid 베이스라인 그리드
A grid aligning text baselines across blocks at regular intervals.
Defining typography, readability, and color systems for brands, product pages, interface themes, and print.
Distinguish color spaces from output conditions. Check font redistribution and embedding terms separately.
Hue 색상
The property distinguishing color families such as red and blue.
Defining typography, readability, and color systems for brands, product pages, interface themes, and print.
Distinguish color spaces from output conditions. Check font redistribution and embedding terms separately.
Saturation 채도
A measure of how vivid a color is or how close it is to gray.
Defining typography, readability, and color systems for brands, product pages, interface themes, and print.
Distinguish color spaces from output conditions. Check font redistribution and embedding terms separately.
Value / Lightness 명도·밝기
How light or dark a color appears; the precise definition depends on the color model.
Defining typography, readability, and color systems for brands, product pages, interface themes, and print.
Distinguish color spaces from output conditions. Check font redistribution and embedding terms separately.
Complementary Colors 보색
Colors positioned opposite each other on the chosen color wheel.
Defining typography, readability, and color systems for brands, product pages, interface themes, and print.
Distinguish color spaces from output conditions. Check font redistribution and embedding terms separately.
Analogous Colors 유사색
A palette combining colors located near one another on the color wheel.
Defining typography, readability, and color systems for brands, product pages, interface themes, and print.
Distinguish color spaces from output conditions. Check font redistribution and embedding terms separately.
Monochromatic Palette 단색 계열 배색
A palette based on one hue with variations in lightness and saturation.
Defining typography, readability, and color systems for brands, product pages, interface themes, and print.
Distinguish color spaces from output conditions. Check font redistribution and embedding terms separately.
Accent Color 강조색
A color used selectively to draw attention to key actions or important elements.
Defining typography, readability, and color systems for brands, product pages, interface themes, and print.
Distinguish color spaces from output conditions. Check font redistribution and embedding terms separately.
Semantic Color 의미 기반 색
A color associated with a status meaning, such as error, success, or warning.
Defining typography, readability, and color systems for brands, product pages, interface themes, and print.
Distinguish color spaces from output conditions. Check font redistribution and embedding terms separately.
RGB RGB 색 모델
An additive color model combining red, green, and blue light.
Defining typography, readability, and color systems for brands, product pages, interface themes, and print.
Distinguish color spaces from output conditions. Check font redistribution and embedding terms separately.
CMYK CMYK 색 모델
A print-oriented color model using cyan, magenta, yellow, and black ink.
Defining typography, readability, and color systems for brands, product pages, interface themes, and print.
Distinguish color spaces from output conditions. Check font redistribution and embedding terms separately.
Color Gamut 색역
The range of colors a device or color space can represent.
Defining typography, readability, and color systems for brands, product pages, interface themes, and print.
Distinguish color spaces from output conditions. Check font redistribution and embedding terms separately.
Color Profile 색상 프로파일
Characterization data used to manage color reproduction between devices and color spaces.
Defining typography, readability, and color systems for brands, product pages, interface themes, and print.
Distinguish color spaces from output conditions. Check font redistribution and embedding terms separately.
OKLCH OKLCH 색 공간
An OKLab-family color space expressing color through perceptual lightness, chroma, and hue.
Defining typography, readability, and color systems for brands, product pages, interface themes, and print.
Distinguish color spaces from output conditions. Check font redistribution and embedding terms separately.
Duotone 듀오톤
A technique representing image tones using two colors or ink families.
Defining typography, readability, and color systems for brands, product pages, interface themes, and print.
Distinguish color spaces from output conditions. Check font redistribution and embedding terms separately.
Gradient 그레이디언트
A continuous transition between two or more colors or opacity values.
Defining typography, readability, and color systems for brands, product pages, interface themes, and print.
Distinguish color spaces from output conditions. Check font redistribution and embedding terms separately.