폰트 페어링
폰트 페어링 도구는 제목과 본문용으로 엄선한 12가지 Google Fonts 조합을 미리 보여 주고, 직접 폰트를 섞어 볼 수 있으며, 해당 CSS @import를 복사해 줍니다.
The Art of Good Typography
Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing, and letter-spacing.
이 도구 소개
폰트 페어링 도구는 제목과 본문용으로 엄선한 12가지 Google Fonts 조합을 미리 보여 주고, 직접 폰트를 섞어 볼 수 있으며, 해당 CSS @import를 복사해 줍니다.
사용 방법
- 엄선된 조합 중 하나를 고르거나 제목과 본문 폰트를 직접 선택합니다.
- 랜덤 조합으로 여러 조합을 살펴봅니다.
- 제목과 문단 텍스트의 실시간 미리보기를 확인합니다.
- CSS @import 복사를 눌러 사이트에서 폰트를 불러옵니다.
알아두면 좋은 점
- 전형적인 조합은 Playfair Display와 Source Sans 3처럼 세리프와 산세리프를 대비시키는 것입니다.
- 조합에는 Montserrat + Merriweather, Raleway + Lato, Space Grotesk + Inter, DM Serif Display + DM Sans 등이 있습니다.
- 사이트의 폰트 패밀리를 두 개로 제한하면 페이지에 일관성이 생기고 다운로드 용량도 줄어듭니다.
- 미리보기는 선택한 폰트를 400과 700 굵기로 Google Fonts에서 불러옵니다.
- 폰트 URL에 display=swap을 추가하면 웹 폰트를 불러오는 동안 대체 텍스트가 표시됩니다.
모든 처리는 브라우저 안에서 이루어집니다. 입력한 내용은 업로드되거나 저장되지 않습니다.
자주 묻는 질문
어떤 폰트끼리 잘 어울리나요?
스타일은 대비되지만 비율이 비슷한 폰트끼리 대개 잘 어울립니다. 예를 들어 대비가 강한 세리프 제목에 깔끔한 산세리프 본문을 쓰는 식입니다. 여기의 엄선된 조합은 검증된 조합입니다.
웹사이트에는 폰트를 몇 개 쓰는 게 좋은가요?
제목용과 본문용 두 가지 패밀리면 대부분의 사이트에 충분합니다. 세 번째가 필요한 경우는 드뭅니다.
Google Fonts는 상업적으로 무료로 쓸 수 있나요?
네. Google Fonts 라이브러리의 폰트는 SIL Open Font License 같은 오픈 라이선스로 공개되어 상업적으로 사용할 수 있습니다.
사이트에 폰트를 어떻게 추가하나요?
복사한 @import를 CSS 맨 위에 붙여 넣거나 HTML head의 link 태그로 바꾼 다음, 제목과 본문에 font-family를 지정하세요.