글꼴 크기 테스터이란?
아무 텍스트나 입력하면 8px부터 96px까지 모든 크기로 동시에 미리 볼 수 있습니다. px, rem, pt 단위를 전환하고 행간과 자간을 조정해 타이포그래피를 다듬어 보세요.
어떤 문장이든 붙여 넣으면 8 px 캡션부터 96 px 히어로까지 14가지 크기로 동시에 표시됩니다. 단위는 px, rem, pt 사이에서 전환하고, 줄 간격과 자간도 즉석에서 조정할 수 있습니다. 어떤 크기부터 가독성이 떨어지는지, 버튼 글자를 14 px 로 둘지 16 px 로 둘지 같은 결정도 CSS를 건드리기 전에 한눈에 확인할 수 있습니다.
사용 방법
- 1단계 — 테스트할 텍스트를 입력하거나 붙여넣습니다.
- 2단계 — 크기 범위와 단위(px, rem 또는 pt)를 조정하여 미리 봅니다.
- 3단계 — 모든 크기를 나란히 비교하여 디자인에 가장 적합한 옵션을 선택합니다.
사용 시기
- 내비게이션 라벨 크기를 정할 때: 가독성을 유지하면서 막대가 빽빽하지 않게 하기.
- 본문 14 px과 16 px를 나란히 비교해 디자인 팀의 의견 차이를 정리할 때.
- 디자이너가 px로 적어 준 값을 rem으로 환산해 사용자 글꼴 설정을 존중하게 할 때.
결과
내비게이션 라벨 테스트: 'Dashboard'를 입력하고 12px, 14px, 16px에서 비교하여 공간 낭비 없이 가장 읽기 쉬운 크기를 찾습니다.
자주 묻는 질문
- 웹 폰트 크기는 px, rem, pt 중 무엇으로 잡아야 하나요?
- 본문과 컴포넌트에는 rem을 권장합니다. 사용자가 설정한 루트 폰트 크기에 맞춰 함께 늘어나기 때문에 접근성에 유리합니다. 정확한 픽셀이 필요한 테두리나 아주 작은 아이콘에는 px를 남겨 두고, pt는 인쇄 시대의 단위라 화면에서는 피하는 편이 좋습니다.
- 본문 폰트 크기는 어느 정도가 적당한가요?
- 웹 본문의 사실상 기준은 16 px(1 rem)입니다. 캡션이나 보조 라벨 같은 부수적인 텍스트에 한해 14 px로 내리는 정도가 좋습니다. 주요 텍스트가 14 px보다 작은 사이트는 보통 접근성 감사에서 감점을 받고, 작은 화면의 사용자에게도 부담을 줍니다.
- 줄 간격이 가독성에 얼마나 영향을 주나요?
- 본문은 1.4에서 1.6 사이가 적당합니다. 더 좁히면 답답해지고, 너무 늘리면 문단 사이의 리듬이 깨집니다. 제목은 줄 자체가 짧기 때문에 1.1에서 1.2 정도로 좀 더 단단히 묶어도 무방합니다.
- 자간(tracking)은 언제 조절해야 하나요?
- 전체 대문자 라벨은 기본 커닝이 너무 빽빽해 보이므로 0.05 em 가까이 넓혀 주면 한결 편해집니다. 아주 큰 디스플레이 헤드라인은 –0.01에서 –0.02 em 정도로 살짝 조여 줍니다. 본문은 글꼴 디자이너가 이미 다듬어 두었으니 손대지 않는 편이 안전합니다.
- WCAG가 정말 최소 폰트 크기를 16 px로 정해 두었나요?
- WCAG는 엄격한 최솟값을 정해 두진 않았지만, 텍스트가 레이아웃을 깨지 않고 200%까지 확대돼야 한다고 요구합니다. 실무에서는 본문을 16 px에서 시작하고 상대 단위를 쓰면 자연스럽게 충족됩니다. 처음부터 너무 작게 잡으면 사용자가 직접 확대해야 하는데, 대다수는 그렇게까지 하지 않습니다.