Typography Glossary

대부분의 글자가 올려지는 보이지 않는 기준선으로, 디센더는 베이스라인 아래로 내려온다.

베이스라인에서 소문자(예: 'x')의 높이로, 폰트의 체감 크기와 가독성에 영향을 주는 핵심 요소다.

'b', 'd', 'h', 'k', 'l'처럼 소문자에서 엑스 하이트 위로 올라오는 획의 부분이다.

'g', 'j', 'p', 'q', 'y'처럼 글자에서 베이스라인 아래로 내려오는 획의 부분이다.

베이스라인에서 'H'나 'I' 같은 평평한 대문자 꼭대기까지의 높이다.

글자 획에서 가장 굵은 부분과 가장 가는 부분의 차이로, 고대비 폰트(디도 등)는 극적인 굵기 변화를 보인다.

'fi'나 'fl'처럼 두 개 이상의 글자가 하나의 글리프로 결합된 형태로, 세리프 폰트와 코딩 폰트(예: Fira Code)에서 흔히 사용된다.

하나의 문자를 시각적으로 표현한 단위로, 하나의 문자가 여러 글리프(예: 일반체와 이탤릭체 'a')를 가질 수 있다.

'o', 'e', 'p'처럼 글자 내부에 완전히 또는 부분적으로 닫힌 공간으로, 'c'처럼 열린 카운터는 어퍼처라 부른다.

'b', 'd', 'p', 'q'처럼 글자 내부에 닫힌 카운터를 만드는 곡선 획으로, 서체마다 형태가 크게 다르다.

'l', 'b', 'd'의 수직선처럼 글자를 구성하는 주요 세로 획으로, 대부분의 서체 디자인에서 가장 굵은 획이다.

글자를 이루는 세로·가로·대각선·곡선 등 모든 선으로, 획의 대비는 서체 특성을 결정하는 핵심 요소다.

세리프 없이 끝나는 획의 끝 부분으로, 볼·비크·물방울·평면 등 다양한 형태가 있으며 서체 분류의 주요 식별자다.

'A', 'H', 'e', 'f'처럼 글자를 가로지르는 수평 획으로, 엑스 하이트 대비 위치가 가독성에 영향을 준다.

이탤릭체나 디스플레이 폰트에서 흔히 볼 수 있는 글자의 장식적으로 뻗은 획으로, 제목에 우아함과 개성을 더한다.

'c', 'e', 's'처럼 부분적으로 닫힌 카운터의 열린 부분으로, 어퍼처가 넓을수록 일반적으로 작은 크기에서 가독성이 높아진다.

글자 주요 획의 끝에 붙는 작은 장식 획으로, 타임스 뉴 로만 같은 세리프 폰트에는 있고 산세리프 폰트에는 없다.

세리프가 없는 서체로, 'sans'는 프랑스어로 '없음'을 의미하며 깔끔하고 현대적인 느낌으로 디지털 디자인에서 널리 쓰인다.

모든 글자가 동일한 가로 폭을 차지하는 서체로, 코드 에디터와 표 형식의 데이터에 필수적이다.

문자 집합의 전체 디자인 즉, 예술적 창작물을 가리키며, 특정 크기·굵기·스타일의 인스턴스인 '폰트'와 혼용되는 경우가 많다.

특정 굵기, 크기, 스타일로 구현된 서체의 한 인스턴스로, 예를 들어 'Inter Bold 16px'는 폰트이고 'Inter'는 서체다.

제목·포스터·로고처럼 큰 크기에서 사용하도록 설계된 서체로, 작은 크기의 본문 가독성에는 최적화되어 있지 않다.

이어지는 흘림체 필기를 기반으로 한 서체로, 격식 있는 캘리그래피 스타일부터 캐주얼한 브러시 스크립트까지 다양하다.

두껍고 블록 형태의 직사각형 세리프를 가진 서체로, 제목·UI 요소·브랜딩에서 강한 시각적 존재감을 발휘한다.

'w'가 'i'보다 넓듯이 글자의 형태에 따라 각 글자의 폭이 달라지는 서체로, 대부분의 폰트의 기본 방식이다.

1950년대에 등장한 균일한 획과 중립적인 외관을 가진 세련된 산세리프 스타일로, 현대 UI 디자인에서 지배적인 양식이다.

원·직사각형·삼각형 등 기하학적 형태를 기반으로 한 산세리프 서체로, 깔끔하고 현대적이지만 작은 크기에서는 차갑게 느껴질 수 있다.

르네상스 필기체에서 영감을 받아 유기적인 획 변화를 가진 산세리프 서체로, 기하학적 스타일보다 따뜻하고 가독성이 높다.

시각적으로 균일한 자간을 구현하기 위해 특정 글자 쌍 사이의 간격을 개별적으로 조정하는 것이다.

특정 글자 쌍을 대상으로 하는 커닝과 달리, 선택한 문자 범위 전체에 걸쳐 자간을 일괄적으로 조정하는 것이다.

베이스라인에서 다음 베이스라인까지 측정한 텍스트 줄 사이의 수직 거리로, 활판 인쇄 시 사용하던 납(lead) 조각에서 이름이 유래했다.

현재 폰트 크기와 동일한 타이포그래피 단위로, CSS에서 1em은 부모 요소의 폰트 크기와 같으며 상대적 크기 설정의 기준이 된다.

단어 사이의 거리를 제어하는 CSS 속성으로, 기본값은 폰트의 스페이스 문자 폭으로 정의된다.

디자인에서 텍스트와 요소에 숨 쉴 공간을 주는 의도적인 빈 공간으로, 가독성과 시각적 위계를 위해 매우 중요하다.

텍스트 한 줄의 길이로, 최적 가독성을 위해 보통 45~75자가 권장되며 너무 길거나 짧으면 읽기 편안함이 떨어진다.

같은 기본 디자인을 공유하되 굵기·너비·스타일이 다른 관련 폰트들의 집합으로, CSS의 font-family 속성에서 원하는 폰트를 지정한다.

글자 획의 두께로, 일반적으로 100(Thin)에서 900(Black)까지 범위를 가지며 Regular는 400, Bold는 700이다.

웹사이트에서 사용하도록 설계되거나 라이선스된 폰트로, CSS @font-face나 Google Fonts 같은 서비스를 통해 불러온다.

하나의 폰트 파일에 굵기·너비 등 다양한 변형 값의 전체 범위를 담은 폰트로, HTTP 요청 횟수와 파일 크기를 줄여준다.

Microsoft와 Adobe가 공동 개발한 폰트 형식으로, 리거처·대안 글리프·가변 축 등 고급 타이포그래피 기능을 지원한다.

저해상도 화면의 작은 크기에서 폰트 렌더링을 개선하기 위해 외곽선을 픽셀 격자에 맞추도록 폰트에 내장된 지침이다.

경계 픽셀을 혼합하여 렌더링된 텍스트의 거친 가장자리를 부드럽게 처리하는 기술로, CSS에서는 -webkit-font-smoothing: antialiased로 적용한다.

가장 보편적인 오픈소스 폰트 라이선스로, 무료 사용·수정·재배포를 허용하며 모든 Google Fonts는 OFL 또는 Apache 2.0을 사용한다.

Brotli로 압축된 웹 전용 폰트 형식 2.0으로, 웹에서 가장 효율적인 폰트 형식이며 WOFF보다 약 30% 작고 모든 최신 브라우저에서 지원된다.

다운로드 크기를 줄이기 위해 폰트 파일에서 사용하지 않는 글자를 제거하는 작업으로, 예를 들어 전체 유니코드 범위 대신 라틴 문자만 불러오는 방식이다.

@font-face의 CSS 디스크립터로, 폰트 파일에서 다운로드할 유니코드 문자 범위를 지정하여 브라우저가 자동으로 서브셋을 적용할 수 있게 한다.

리거처·소형 대문자·테이블형 숫자·스타일 대안 등 오픈타입 기능을 제어하는 CSS 속성으로, 간단한 경우에는 font-variant를 사용한다.

폰트 로딩을 프로그래밍 방식으로 제어하는 JavaScript API(document.fonts)로, 폰트 로드 여부 확인, 특정 폰트 사전 로드, 로드 이벤트 응답 등이 가능하다.

굵기·너비·기울기 및 사용자 정의 축 등 가변 폰트의 축을 직접 제어하는 CSS 속성으로, font-weight/font-stretch보다 하위 수준이다.

디자인에서 함께 사용할 두 가지 이상의 보완적인 폰트를 선택하는 작업으로, 보통 제목용 폰트와 본문용 폰트를 조합한다.

비율(예: 1.25, 1.333, 1.5)을 기반으로 폰트 크기를 조화롭게 단계적으로 설정한 체계로, 시각적 위계와 일관성을 만들어낸다.

크기·굵기·색상·간격을 활용해 독자가 중요도 순서에 따라 콘텐츠를 읽도록 안내하는 텍스트의 시각적 구조화 방식이다.

의도한 표시 크기에 맞춰 글자 형태의 세부 사항을 조정하는 것으로, 작은 텍스트는 더 넓은 자간과 굵은 획이 필요하고 큰 텍스트는 더 정교하게 다듬어질 수 있다.

미디어 쿼리·뷰포트 단위·CSS clamp()를 사용하여 다양한 화면 크기에 맞게 타이포그래피를 유동적으로 조정하는 방식이다.

텍스트 베이스라인과 요소 간격을 베이스라인 그리드에 맞춰 일관성 있게 정렬하여 페이지 전체의 시각적 조화를 만드는 것이다.

타입 크기를 설정하는 데 사용되는 비율(예: 1.25 단3도, 1.333 완전4도, 1.618 황금비)에 기반한 조화로운 수열이다.

폰트 굵기·크기·행간·자간에 의해 결정되는 페이지 내 텍스트 블록의 전체적인 시각적 밀도나 질감이다.

CSS clamp()를 사용하여 최소·최대 크기 사이에서 끊김 없이 부드럽게 크기가 변하는 타이포그래피로, 브레이크포인트 없이 구현 가능하다.

텍스트 줄 사이의 거리를 제어하는 CSS 속성으로, 본문 가독성을 위해 보통 1.5 또는 150%로 설정한다.

모든 글자 사이의 간격을 조정하는 CSS 속성으로, 양수 값은 글자를 벌리고 음수 값은 가깝게 붙인다.

웹 디자이너가 웹 페이지에 사용할 사용자 정의 폰트를 지정할 수 있게 해주는 CSS 앳룰(at-rule)로, 웹 타이포그래피의 근간이다.

CSS font-family에 지정하는 폰트의 우선순위 목록으로, 원하는 폰트를 사용할 수 없을 때 대체 폰트를 제공한다. 예: 'Inter, system-ui, sans-serif'.

운영체제에 기본 설치된 폰트로, 시스템 폰트(system-ui 스택) 사용 시 다운로드 시간이 없지만 브랜드 일관성이 희생된다.

웹 폰트가 로드되기 전에 대체 폰트가 잠시 표시되는 현상으로, font-display: swap으로 완화할 수 있다.

웹 폰트가 로드될 때까지 텍스트가 숨겨지는 현상으로, FOUT보다 사용자 경험이 나쁘며 font-display: swap으로 방지할 수 있다.

웹 폰트 로딩 중 표시 방식을 제어하는 CSS 디스크립터로, auto·block·swap·fallback·optional 값을 사용할 수 있다.

루트 요소의 폰트 크기(보통 16px)를 기준으로 하는 CSS 단위로, em보다 예측 가능하여 일관된 크기 설정에 적합하다.

1,900개 이상의 폰트 패밀리를 제공하는 Google의 무료 오픈소스 폰트 라이브러리로, 전 세계 CDN을 통해 서빙되는 가장 큰 무료 웹 폰트 컬렉션이다.

link rel="preload" as="font"를 사용하여 폰트 다운로드를 우선시함으로써 FOUT/FOIT를 줄이고 최대 콘텐츠풀 페인트(LCP)를 개선하는 기법이다.

폰트 로딩으로 인한 누적 레이아웃 이동으로, 웹 폰트가 대체 폰트를 치환할 때 메트릭 차이로 텍스트가 재배치되어 발생하는 Core Web Vitals 문제다.

텍스트 렌더링 품질을 제어하는 CSS 속성으로, auto·optimizeSpeed·optimizeLegibility·geometricPrecision 값을 사용하며 커닝과 리거처에 영향을 준다.

개별 글자를 서로 구별하기 쉬운 정도로, 서체 디자인 자체에 내재된 특성이다.

긴 본문을 편안하게 읽을 수 있는 정도로, 폰트 선택·크기·행간·행의 길이·색상 대비 등에 영향을 받는다.

충분한 색상 대비·확대 가능한 텍스트·명확한 위계·적절한 폰트 선택 등을 통해 모든 사용자가 콘텐츠를 이용할 수 있도록 하는 타이포그래피 실천이다.

텍스트에 적용되는 웹 콘텐츠 접근성 지침으로, 최소 명도 대비율(AA 4.5:1, AAA 7:1), 텍스트 확대 가능, 텍스트 이미지 사용 금지 등을 규정한다.

모호하지 않은 글자 형태·넉넉한 자간·글자를 안정적으로 고정하는 무거운 하단 등을 갖춰 난독증 독자의 가독성을 높이도록 설계된 폰트다.

전경 텍스트와 배경 색상 사이의 휘도 비율로, WCAG는 일반 텍스트에 AA 기준 4.5:1, 향상된 기준(AAA) 7:1을 요구한다.

요하네스 구텐베르크는 1440년경 활자 인쇄술을 발명하여 책의 대량 생산을 가능하게 하고 지식 접근을 민주화했다.

1957년 막스 미딩거가 디자인한 상징적인 네오 그로테스크 서체로, 현대 그래픽 디자인을 정의하고 세계에서 가장 유명한 폰트로 남아 있다.

1927년 파울 레너가 디자인한 기하학적 산세리프 서체로 바우하우스 모더니즘을 구현했으며, Poppins·Montserrat·Raleway 등 많은 서체에 영향을 주었다.

클로드 가라몬드(약 1530년)가 만든 영향력 있는 올드스타일 세리프 서체로, 현재까지도 활발히 사용되는 거의 500년 역사의 서체 디자인이다.

바우하우스 학교(1919~1933)는 기하학적 형태, 산세리프 선호, 형태는 기능을 따른다는 원칙으로 타이포그래피에 혁명을 일으켰다.

1950년대에 시작된 국제 타이포그래피 양식으로 그리드·비대칭 레이아웃·산세리프 서체를 강조했으며, 헬베티카가 그 대표 서체다.