🔤 폰트 테스트

내가 쓸 문장으로 폰트를 비교하고, 가변 축과 OpenType 기능을 바꿔 보며, 글리프 윤곽선과 폰트 정보까지 살펴봅니다. 폰트 파일은 브라우저 안에서만 읽고 서버로 보내지 않습니다.

폰트 불러오기

TTF·OTF·WOFF·WOFF2·TTC 파일을 끌어다 놓거나 눌러서 선택하세요. 여러 개를 한 번에 넣으면 나란히 비교합니다.

텍스트 테스트

예시 문장:

크기 48px줄 간격 1.4자간 0em

배경 반전

폰트를 불러오면 여기에 문장이 표시됩니다.

용어 설명

워터폴: 같은 문장을 작은 크기부터 큰 크기까지 쌓아 보여 주는 보기. 크기에 따라 인상이 어떻게 달라지는지 한눈에 비교합니다.
줄 간격: 글자 크기에 대한 줄 높이의 비율입니다. 1.4면 48px 글자의 줄 높이가 약 67px입니다.
자간 (tracking): 모든 글자 사이를 고르게 넓히거나 좁힙니다. em은 글자 크기에 대한 비율로, 0.1em은 글자 크기의 10%입니다.
가변 폰트 · 축: 굵기 같은 성질을 단계가 아니라 연속으로 바꿀 수 있는 폰트. 바꿀 수 있는 성질 하나하나가 축이며 네 글자 태그로 부릅니다 — wght 굵기, wdth 너비, opsz 광학 크기, slnt 기울기, ital 이탤릭.
이름 있는 인스턴스: ‘Bold’, ‘Condensed Light’처럼 축 값의 조합에 이름을 붙여 둔 것. 고르면 축 슬라이더가 그 값으로 맞춰집니다.
OpenType 기능: 폰트 안에 들어 있는 글자 대체·위치 조정 규칙. 고정폭 숫자, 작은 대문자, 스타일 세트처럼 켜야 나타나는 것과 커닝·표준 합자처럼 브라우저가 기본으로 켜는 것이 있습니다.
커닝: AV, To처럼 특정 글자 쌍의 간격을 따로 좁히거나 넓히는 조정. 자간과 달리 쌍마다 다릅니다.
합자 (ligature): fi, ffl처럼 여러 글자를 하나의 그림으로 이어 그린 것.
대체 글꼴 (fallback): 폰트에 없는 글자를 브라우저가 다른 폰트로 대신 그리는 것. 겉보기에는 지원하는 것처럼 보여서, 이 페이지는 없는 글자를 따로 경고합니다.

두 폰트 비교

A B

글자 겹쳐 보기 두 폰트를 같은 크기·같은 베이스라인에 겹칩니다 · 칸을 누르면 아래에서 크게 봅니다

문장 겹쳐 보기 텍스트 테스트 문장의 첫 줄 · 크기 설정을 따릅니다

수치 비교 5% 이상 차이 나는 값은 강조합니다

항목	A	B

문자 지원 비교

OpenType 기능 비교

용어 설명

em 1000 기준: 폰트마다 글자 크기를 나누는 칸 수(units per em)가 1000·1024·2048처럼 달라서, 값을 글자 크기 1000칸 기준으로 바꿔 비교합니다. 같은 크기로 썼을 때의 실제 비율입니다.
x 높이 비율: x 높이 ÷ 대문자 높이. 클수록 같은 글자 크기에서 소문자가 크고 시원해 보입니다(보통 0.65~0.75).
글자 겹쳐 보기: 두 글리프를 같은 글자 크기·같은 베이스라인에 겹쳐 그립니다. 색 점선 세로선은 각 폰트의 advance(다음 글자까지의 폭)이고, 색 점선 가로선은 각 폰트의 x 높이·대문자 높이입니다.
문장 겹쳐 보기: 같은 문장을 같은 크기로 같은 자리에 겹칩니다. 끝이 어긋나는 정도로 글자 폭 차이를, 위아래 어긋남으로 높이 차이를 봅니다.

글리프

글리프를 누르면 윤곽선과 점, 메트릭을 보여 줍니다.

용어 설명

글리프: 폰트 안에 들어 있는 그림 하나. 문자와 1:1이 아니어서, 합자나 대체 글자처럼 문자 번호가 없는 글리프도 있고 여러 문자가 한 글리프를 함께 쓰기도 합니다.
유니코드 (U+AC00): 문자마다 붙은 국제 표준 번호. ‘가’는 U+AC00입니다. 검색창에 글자나 이 번호를 넣으면 됩니다.
윤곽선 (contour): 글리프 모양을 이루는 닫힌 선 하나. ‘ㅇ’처럼 구멍이 있는 글자는 바깥과 안쪽 윤곽선이 따로 있습니다.
곡선 위의 점 (on-curve, ●): 윤곽선이 실제로 지나가는 점.
곡선 제어점 (off-curve, ○): 곡선을 끌어당겨 휘는 정도를 정하는 점. 선은 이 점을 지나지 않습니다. TrueType은 두 점 사이에 제어점 하나(2차 곡선), CFF는 둘(3차 곡선)을 씁니다.
베이스라인: 글자가 올라앉는 기준선. 모든 높이를 여기서부터 잽니다(0).
x 높이 (x-height): x·a·e 같은 소문자의 윗면 높이. 클수록 같은 크기에서 글자가 커 보입니다.
대문자 높이 (cap height): H·E 같은 평평한 대문자의 윗면 높이. O·A처럼 둥글거나 뾰족한 글자는 눈에 같은 크기로 보이도록 살짝 넘치게 그립니다. 라틴 글자 기준이라 한글 전용 폰트는 비워 두기도 합니다.
ascender · descender: 위로 솟는 획(b·d·h)과 아래로 내려가는 획(g·p·y)이 닿는 높이와 깊이. 줄 높이를 정할 때 쓰입니다.
advance (전진 폭): 이 글자를 그린 뒤 다음 글자까지 옮겨 가는 거리. 세로 점선 두 개 사이의 폭입니다.
LSB (왼쪽 여백): 글자 시작점(왼쪽 점선)에서 윤곽선 왼쪽 끝까지의 거리.
bbox (경계 상자): 윤곽선을 빈틈없이 감싸는 가장 작은 사각형의 좌표(왼쪽, 아래 ~ 오른쪽, 위).
폰트 단위: 글리프 좌표에 쓰는 단위. 글자 크기 전체(em)를 units per em만큼 나눈 칸이며, 화면 크기와 상관없이 고정되어 있습니다.

폰트 불러오기

텍스트 테스트

두 폰트 비교

글자 겹쳐 보기 두 폰트를 같은 크기·같은 베이스라인에 겹칩니다 · 칸을 누르면 아래에서 크게 봅니다

문장 겹쳐 보기 텍스트 테스트 문장의 첫 줄 · 크기 설정을 따릅니다

수치 비교 5% 이상 차이 나는 값은 강조합니다

문자 지원 비교

OpenType 기능 비교

글리프

폰트 정보

이름

메트릭

문자 지원

OpenType 기능