$ tools/fonts

폰트 페어 생성기

Google Fonts에서 헤딩과 본문 폰트를 골라 함께 실시간 미리보기, CSS 복사. 빠른 시작을 위한 프리셋.

$ 프리셋

# 제목 폰트

# 본문 폰트

$ 미리보기

</> 코드

$ 폰트 페어 생성기 사용 방법

프리셋 페어를 선택하는 것부터 시작하세요 — 이는 함께 잘 작동하는 시험을 거친 조합입니다. 또는 커스텀: 드롭다운에서 제목과 본문 폰트를 선택하고(모두 Google Fonts에서), 크기와 굵기를 조정하고 미리보기가 실시간으로 업데이트되는 것을 보세요. 기사, 히어로, 카드 미리보기 사이를 전환하여 페어가 다른 컨텍스트에서 어떻게 동작하는지 확인하세요. 만족스러우면 import 또는 CSS를 복사하여 프로젝트에 붙여넣으세요.

좋은 폰트 페어링의 조건

최고의 페어링은 충돌 없이 대비를 만듭니다. 일반적인 패턴은 제목에 세리프 또는 디스플레이 폰트와 본문에 깔끔한 산세리프를 조합하는 것입니다. 제목은 주의를 끌고 본문은 가독성을 유지합니다. 너무 비슷한 두 폰트를 페어로 만드는 것은 피하세요 — 눈을 가늘게 뜨고 구분이 안 되면 제목에 더 개성 있는 것을 선택하세요.

앱에 중요한 이유

App Store 스크린샷, 랜딩 페이지, 인앱 UI 모두 일관되고 잘 페어링된 타이포그래피의 혜택을 받습니다. 선택하시는 폰트가 톤을 설정합니다 — 장난스럽고, 전문적이고, 미니멀하고, 대담합니다. 일찍 페어링을 올바르게 하면 나중에 재디자인 작업을 절약할 수 있습니다. 이 도구로 빠르게 실험한 다음 정확한 CSS를 프로젝트로 가져오세요.

$ FAQ

무료인가요?

예 — 완전 무료, 가입 없음, 제한 없음. 완전히 브라우저에서 실행되며 Google Fonts에서 직접 폰트를 로드합니다.

이 폰트를 앱에서 사용할 수 있나요?

여기 모든 폰트는 Google Fonts의 것이며 오픈 소스입니다. 앱, 웹사이트, 인쇄물 — 어디서나 사용할 수 있습니다. 자세한 내용은 Google Fonts에서 각 폰트의 라이선스를 확인하세요(대부분 SIL Open Font License).

프로젝트에 폰트를 어떻게 추가하나요?

코드 섹션에서 <link> 태그 또는 @import 줄을 복사하여 HTML 또는 CSS에 추가하세요. 그런 다음 CSS 출력에 표시된 font-family 선언을 사용하세요.

왜 일부 굵기가 사용 불가로 표시되나요?

모든 Google Fonts가 모든 굵기를 지원하지는 않습니다. 굵기 칩은 선택한 폰트가 실제로 제공하는 굵기만 표시합니다.

더 많은 도구

LaunchShots가 마음에 드시나요?
평생 무료 — 시간을 아껴드렸다면 커피 한 잔 사주실 수 있어요.
후원하기 →
복사됨 ✓