개발자 도구
Font Pairing Tool
Pick two Google Fonts and preview them together as heading + body to find the perfect typographic combination
Heading Font
36px
Body Font
16px
Playfair Display • 36px
The quick brown fox jumps
Source Sans 3 • 16px
Great typography creates hierarchy and readability. The right font pairing can make your design feel intentional, polished, and professional.
The bold weight of the body font and the italic variant both inherit the font family choice.
CSS
/* Import */
@import url('https://fonts.googleapis.com/css2?family=Playfair%20Display:wght@400;600;700&family=Source%20Sans%203:wght@400;700&display=swap');
h1, h2, h3 {
font-family: 'Playfair Display', serif;
font-size: 36px;
font-weight: 700;
}
body, p {
font-family: 'Source Sans 3', sans-serif;
font-size: 16px;
line-height: 1.7;
}Popular Pairings
계속 탐색
추천 개발자 도구 도구…
JSON 포맷터
구문 강조 및 오류 감지로 JSON 형식화, 유효성 검사 및 압축
지금 써 보기
Base64 인코더/디코더
텍스트 또는 파일을 Base64로 인코딩하고 Base64 문자열을 읽기 가능한 텍스트로 디코딩
지금 써 보기
URL 인코더/디코더
URL 구성 요소 및 쿼리 문자열 매개변수 인코딩 및 디코딩
지금 써 보기
UUID 생성기
무작위 UUID(v1, v4) 생성 또는 여러 UUID 일괄 생성
지금 써 보기
해시 생성기
텍스트 또는 파일에서 MD5, SHA-1, SHA-256, SHA-512 해시 생성
지금 써 보기
정규식 테스터
실시간 일치 강조 표시로 정규식 테스트
지금 써 보기
JWT 디코더
JSON Web Token 디코딩 및 검사 — 헤더, 페이로드 및 서명 확인
지금 써 보기
HTML 포맷터
적절한 들여쓰기와 구문 강조로 HTML 코드 형식화 및 정리
지금 써 보기