타이포그래피 테스터이란?
타이포그래피 테스터로 글꼴 속성을 실시간으로 조정하고 결과를 바로 확인할 수 있습니다. 글꼴 패밀리를 선택하고 크기, 굵기, 줄 높이, 자간을 조절한 뒤 CSS를 프로젝트에 바로 복사하세요.
이 테스터에서는 글꼴, 크기, 굵기(100~900), 행 높이, 자간, 단어 간격, 정렬, 텍스트 변환, 색상까지 모두 조정할 수 있습니다. 샘플 텍스트를 자유롭게 바꿔 가며 실제 헤드라인이나 본문을 미리 볼 수 있고, 아래 CSS 출력 패널을 한 번만 누르면 그대로 스타일시트나 styled component에 붙여 넣을 수 있습니다.
사용 방법
- 미리보기 영역에 샘플 텍스트를 입력하거나 붙여넣으세요.
- 타이포그래피 설정을 조정하세요: 글꼴 패밀리, 크기, 굵기, 줄 높이, 자간, 단어 간격.
- CSS 출력을 복사하여 프로젝트에서 타이포그래피 설정을 바로 사용하세요.
사용 시기
- 블로그 본문을 Inter 18px, 행 높이 1.6으로 맞춰 모바일에서 편하게 읽히는지 확인할 때.
- 긴 글을 16, 17, 18px로 각각 띄워 보고 어떤 크기가 가장 오래 읽게 하는지 비교할 때.
- 자간을 더 벌리면 대문자 버튼의 답답한 느낌이 해결되는지 시험할 때.
결과
웹 디자이너가 줄 높이 1.6, 자간 0.02em으로 18px Inter 글꼴을 테스트하고 블로그 스타일시트에 사용할 CSS를 복사합니다.
자주 묻는 질문
- 본문에 잘 어울리는 행 높이는?
- 16~18px의 긴 단락에서는 행 높이 1.5~1.7이 화면에서 가장 편하게 읽힙니다. 제목은 좀 더 좁힌 1.1~1.3 정도가 보기 좋습니다. 샘플 칸에 제목과 단락을 함께 넣고 나란히 비교해 보세요.
- 자간을 px가 아닌 em으로 받는 이유는?
- em은 글꼴 크기에 따라 함께 늘어나므로 0.02em이면 14px든 48px이든 비율이 같게 보입니다. px로 주면 한 크기에선 맞아도 다른 크기에선 어색해지는 일이 생깁니다.
- 웹에서 안전하게 쓸 수 있는 글꼴 굵기는?
- 최신 Google Fonts나 가변 글꼴은 100부터 900까지 지원하지만, 자체 호스팅 글꼴 중에는 400과 700만 포함된 경우가 많습니다. 굵기를 바꿔도 미리보기가 그대로라면 해당 굵기를 글꼴이 가지고 있지 않아 브라우저가 합성 스타일로 대체하는 것입니다.
- 페이지가 미리 불러오지 않은 글꼴도 테스트할 수 있나요?
- 내장 글꼴 메뉴에서 고르세요. 검색창과 산세리프 / 세리프 / 고정폭 / 시스템 필터가 있고, 고른 Google Fonts는 자동으로 불러옵니다. 「갤러리」 보기로 바꾸면 같은 예시 글을 모든 글꼴로 한 번에 볼 수 있고, 「비교」를 켜면 두 서체를 나란히 둘 수 있습니다. 사용자 글꼴 파일 업로드는 여기서 지원하지 않으며, 그 경우 사이트에 @font-face가 필요합니다.
- 출력된 CSS를 React나 Tailwind 프로젝트에 어떻게 옮기나요?
- CSS 복사 버튼을 누르면 각 속성을 표준 선언 형태로 가져옵니다. React에서는 styled-components 템플릿 리터럴에 그대로 붙여 넣거나 줄별로 camelCase 키로 바꾸면 됩니다. Tailwind에서는 크기와 굵기를 유틸리티 클래스에 매핑하고 자간·행 높이는 임의값 문법으로 유지하세요.