복사할 수 있는 10가지 멋진 Google 글꼴 조합

 복사할 수 있는 10가지 멋진 Google 글꼴 조합

John Morrison

복사할 수 있는 10가지 훌륭한 Google 글꼴 조합

보통의 남성은 Doritos의 어떤 맛이 하이네켄과 잘 어울릴지 고려합니다. 세련된 남성은 어떤 치즈가 자신이 선택한 와인과 잘 어울릴지 고려합니다. 물론 디자이너는 같은 페이지에서 어떤 두 글꼴이 멋지게 보일지 고려합니다.

오늘 우리는 Google Font API를 글꼴을 혼합하고 이상적인 조합을 찾기 위한 놀이터로 사용할 것입니다. 프로젝트에 적합하다고 생각되는 항목을 훑어보고 즉시 선택할 수 있습니다.

가장 좋은 점은? 사이트에서 이러한 글꼴을 구현하려면 코드를 복사하여 붙여넣기만 하면 됩니다. 완전히 무료이며 다운로드할 필요가 없습니다.

글꼴 살펴보기

Google 글꼴이 필요한 이유

웹 글꼴 게임은 몇 년 전에 방송되었습니다. 모두가 아이디어와 해결책을 가지고 있었지만 문제가 해결되었을 때 어떤 것이 그대로 남게 될지는 아무도 몰랐습니다. 내 생각에 이 논쟁은 끝났습니다. @font-face가 이겼습니다.

@font-face가 이기는 이유입니다. 첫째, 순수한 CSS 솔루션은 개발자가 참여할 수 있는 솔루션입니다. 다음으로, @font-face가 텍스트 선택과 복사 및 붙여넣기와 같은 작업을 완벽하게 지원한다는 사실은 사용성 전문가들이 그것을 좋아한다는 것을 의미합니다. 마지막으로 거의 모든 글꼴에 대해 @font-face 레시피를 쉽게 만들 수 있다는 사실은 디자이너가 선택할 수 있는 적절한 라이선스가 부여된 다양한 글꼴이 있기 때문에 이를 좋아한다는 것을 의미합니다. 당신이 얻을 경우좋아하는 무료 글꼴 조합. Google의 디렉토리에는 무시무시한 제안이 부족하지 않으므로 마음에 들지 않는 항목도 자유롭게 공유하세요!

개발자, 디자이너 및 사용성 관련 담당자는 Flash, JavaScript 및 이미지 기반 솔루션에 대한 게임이 끝났습니다.

이제 @font-face 세계에는 많은 경쟁자가 있습니다. 개인적으로 가장 좋아하는 솔루션은 FontSquirrel의 @font-face 키트를 사용하는 것입니다. 미리 빌드된 옵션 중 하나를 다운로드하거나 글꼴 파일을 업로드하여 사이트에서 나머지를 대량으로 처리할 수 있습니다.

그러나 , 이전에 Design Shack에서 이 솔루션을 여러 번 사용했기 때문에 오늘은 상황을 바꾸고 다른 것을 사용하고 싶었습니다. Google 글꼴 디렉토리는 무료이고 다양한 옵션이 있으므로 자연스럽게 적합해 보였습니다!

글꼴 결합을 위한 빠른 팁

시작하기 전에 몇 가지 기본 사항이 있습니다. 글꼴을 결합할 때 염두에 둘 수 있는 규칙입니다. 이것은 모든 경우에 따라야 하는 절대적인 것이 아니라 의심스러울 때 지켜야 할 몇 가지 지침일 뿐입니다.

서체 패밀리 사용

우선 가능한 한 단일 패밀리 내의 다양한 글꼴을 확인하십시오. 이러한 글꼴은 함께 작동하도록 세심하게 설계되었으므로 시각적 불일치를 일으키지 않고 글꼴을 변경하는 가장 안전한 방법입니다.

대비가 왕이다

다음으로, 두 개의 글꼴을 결합할 때 대비를 위해 가십시오. 밝은 산세리프체와 굵은 슬래브를 짝지어 보세요. 상당히 유사한 두 글꼴을 혼합하면 대비가 부족하여 약간 어긋난 것처럼 보입니다.두 가지 다른 서체의 의도된 인상이 아닌 타이포그래피. 디자이너와 비디자이너 모두에게 두 가지 독특한 스타일이 있음을 분명히 하십시오.

손쉬운 사용

또한 서체를 몇 개로 제한하십시오. 두 개로 버틸 수 있으면 하고, 없으면 세 개에서 멈춘다. 가장 경험이 많은 손을 제외하고는 다양한 글꼴이 디자인의 응집력을 파괴합니다. Photoshop에서 글꼴 메뉴를 처음 발견한 어린아이처럼 보이기 쉽습니다.

어떤 글꼴이 적합한지 생각해 보십시오

마지막으로 콘텐츠가 큰 역할을 하도록 하십시오. 당신의 글꼴 선택. 콘텐츠가 현대적이고 전문적이라면 이러한 특성을 나타내는 글꼴을 사용하십시오. 1700년대의 무언가처럼 보인다면 Helvetica Neue Ultra Light가 최선의 방법이 아닐 수도 있습니다.

글꼴!

이미 충분한 논의가 이루어졌으니 본론으로 들어가겠습니다. Google 글꼴 디렉토리로 이동하여 다음 옵션을 찾으십시오.

이전에 Google 글꼴 디렉토리로 작업한 적이 없더라도 걱정하지 마십시오. 가장 쉬운 맞춤 글꼴 솔루션입니다. 당신이 해야 할 일은 페이지 헤더에 링크를 놓은 다음 다른 것과 마찬가지로 CSS 글꼴 모음의 글꼴을 참조하는 것입니다. 아래의 각 글꼴 쌍에 필요한 모든 코드 스니펫을 제공하므로 복사하여 붙여넣기만 하면 됩니다!

Lobster &Cabin

Lobster는 내가 가장 좋아하는 스크립트 중 하나입니다. 가독성이 뛰어나면서도 대담하고 아름답습니다. 다른 스크립트에서는 쉽게 찾을 수 없는 속성입니다.

또한보십시오: 복사할 수 있는 10가지 멋진 Google 글꼴 조합

이 강력한 진술을 보완하기 위해 주의를 끌기 위해 경쟁하는 어떤 것도 원하지 않습니다. 대신 Cabin.

The HTML

또한보십시오: 2023년 최고의 프리미어 프로 프리셋 20개 이상 <와 같이 평범하고 단순한 것을 선택하십시오. 17>
1 2

CSS

1 2 3 4 5 6 7 8 9 10 11 h1 { 글꼴 - 가족 : '랍스터' , 조지아 , 타임즈 , 세리프 ; 글꼴 - 크기: 70px ; 선 - 높이 : 100px ; } p { font - family : 'Cabin' , Helvetica , Arial , sans-serif ; 글꼴 - 크기: 15px ; 선 - 높이 : 25px ; }

철도 & Goudy Bookletter 1911

Raleway는 매우 매력적인 글꼴이지만 너무 얇아서 항상 본문에서 가장 잘 작동하지는 않습니다. 이러한 이유로 머리글에 완벽한 글꼴이 되도록 가능한 한 크게 유지하는 것이 가장 좋습니다.

저는 Raleway와 꽤 화려한 구디 스타일 Goudy Bookletter 1911의 조합이 매우 고급스러운 한 쌍을 만든다고 생각합니다. 하지만 조심하세요. 이 특정 Goudy는 수많은 본문 카피에 비해 너무 복잡하고 그 안에 쓰여진 카피로 가득 찬 큰 페이지를 읽고 싶지는 않습니다. 이 조합은 아마도 최소한의 복사가 있는 시나리오에 가장 적합할 것입니다.

HTML

1 2

CSS

1 2 3 4 5 6 7 8 9 10 11 h1 { font - family : 'Raleway' , Helvetica , Arial , sans-serif ; 글꼴 - 크기: 50px ; 선 - 높이 : 70px ; } p { font - family: 'Goudy Bookletter 1911' , Georgia , Times , serif ; 글꼴 - 크기: 15px ; 선 - 높이 : 25px ; }

Allerta & Crimson Text

알레르타는 적당히 굵은 산세리프체로 개성이 있습니다. 지루하거나 미친 것을 원하지 않는다면 헤드라인과 본문 카피 모두에서 멋지게 보이는 좋은 중간 지점입니다.

Crimson Text는 세리프가 강하지만 두껍고 얇은 차이가 거의 또는 전혀 없는 직선적인 글꼴입니다. 이렇게 하면 작은 경우에도 상당한 가독성을 유지할 수 있습니다.

The HTML

1 2

CSS

1 2 3 4 5 6 7 8 9 10 11 h1 { 글꼴 - 가족: 'Allerta' , Helvetica , Arial , sans-serif ; 글꼴 - 크기: 50px ; 선 - 높이 : 55px ; } p { font - family: 'Crimson Text' , Georgia , Times , serif ; 글꼴 - 크기: 16px ; 선 - 높이 : 25px ; }

아르보 & PT Sans

좋은 슬랩 세리프 없이는 글꼴 선택이 완료되지 않습니다. Google 글꼴 디렉토리에는 이 중 몇 가지만 있으며 Arvo는 현재 가장 대담한 옵션 중 하나입니다. 나는 대부분의 캐릭터를 정말 좋아하지만 "S"가 약간 어색하다는 것을 인정합니다.

나는 이것을 또 다른 멋진 산스-세리프: PT Sans. 사용 가능한 여러 변형이 있지만 일반 버전이 본문 카피에 가장 적합합니다. 캐릭터가 둥글어서 친근한 느낌이 정말 좋습니다.

The HTML

1 2

CSS

1 2 3 4 5 6 7 8 9 10 11 h1 { font - family: 'Arvo' , Georgia , Times , serif ; 글꼴 - 크기 : 59px ; 선 - 높이 : 70px ; } p { font-family: 'PT Sans' , Helvetica , Arial , sans-serif ; 글꼴 - 크기: 16px ; 선 - 높이 : 25px ; }

댄스 스크립트 & Josefin Sans

스크립트는 특히 Lobster만큼 널리 적용되지 않을 때 제대로 구현하기 어렵습니다. 위의 예에 표시된 Dancing Script는 확실히 내가 좋아하는 스크립트는 아니지만 Google Font Directory에서 사용할 수 있는 더 나은 스크립트 중 하나입니다.

Dancing Script는 Lobster보다 훨씬 여성스럽기 때문에 페어링했습니다. 이 스타일을 더욱 발전시키기 위해 매우 얇은 산세리프체인 Joesfin을 사용합니다. 이 조합은 확실히 여성 왜곡이 있는 모든 제품이나 웹사이트에 적합합니다.

HTML

1 2

CSS

1 2 3 4 5 6 7 8 9 10 11 12 h1 { font - family : 'Dancing Script' , Georgia , Times , serif ; 글꼴 - 크기 : 59px ; 선 - 높이 : 60px ; } p { font - family : 'Josefin Sans' , Helvetica , Arial , sans-serif ; 글꼴 - 크기: 18픽셀 ; 선 - 높이 : 25px ; 여백 - 상단: 15px ; }

Allan & Cardo

원래 코믹한 폰트를 싫어하는데 Allan은 정말 눈에 띄고 매력적이에요. 나는 글꼴의 대담함과 이탤릭체 느낌을 좋아합니다.

오래된 스타일의 글꼴(Cardo)과의 페어링은 거의 시대의 충돌처럼 보이지만 함께 보이는 방식이 정말 마음에 들었습니다. 대신 가벼운 산세리프체를 자유롭게 선택하십시오.

The HTML

1 2

CSS

1 2 3 4 5 6 7 8 9 10 11 h1 { 글꼴 - 가족 : 'Allan' , Helvetica , Arial , sans-serif ; 글꼴 - 크기: 70px ; 선 - 높이 : 75px ; } p { font - family: 'Cardo' , Georgia , Times , serif ; 글꼴 - 크기: 18px ; 선 - 높이 : 25px ; }

몰렌고 & Lekton

Molengo와 Lekton은 함께 기술적인 느낌에 대한 구식 시도처럼 느껴집니다. 주로 후자의 타자기 느낌 때문입니다.

이 조합은 양피지 질감 배경과 함께 폴라로이드 효과가 있는 사진과 약간의 커피 얼룩이 있는 웹사이트에서 볼 수 있는 조합입니다.

HTML

1 2

CSS

1 2 3 4 5 6 7 8 9 10 11 h1 { font - family : 'Molengo' , Georgia , Times , serif ; 글꼴 - 크기: 56px ; 선 - 높이 : 80px ; } p { 글꼴 - 가족: 'Lekton' ,Helvetica , Arial , 산세리프 ; 글꼴 - 크기: 16px ; 선 - 높이 : 25px ; }

드로이드 세리프 & Droid Sans

위의 팁 중 하나는 한 가족 안에 머물 것을 제안했습니다. 나는 이것을 Droid Serif와 Droid Sans의 자연스러운 조합으로 여기에서 실행했습니다.

보시다시피 둘 다 서로를 완벽하게 보완하는 아름다운 서체입니다. Droid Serif가 본문 글꼴이고 Droid Sans가 헤더 글꼴이 되도록 쉽게 전환할 수 있습니다. 매우 인기 있는 특정 디자인 블로그에서 야생에서 Droid를 발견할 수 있습니다.

The HTML

1 2

CSS

1 2 3 4 5 6 7 8 9 10 11 h1 { 글꼴 - 가족: 'Droid Serif' , Georgia , Times , serif ; 글꼴 - 크기 : 49px ; 선 - 높이 : 65px ; } p { 글꼴 - 계열: 'Droid Sans' , Helvetica , Arial , sans-serif ; 글꼴 - 크기: 14px ; 선 - 높이 : 25px ; }

코빈 & Nobile

Cooper Black의 팬이라면 Corben은 훌륭한 무료 대안입니다. 이 뚱뚱하고 통통한 세리프체는 1920년대 느낌이 있어야 하는 모든 것에 적합합니다.

Nobile은 문자 형태가 세로로 늘어난 것처럼 보이는 보다 현대적인 글꼴입니다. 미니멀한 스타일링으로 대담한 헤드라인에 집중할 수 있습니다.

HTML

1 2

CSS

1 2 3 4 5 6 7 8 9 10 11 h1 { 글꼴 -가족: 'Corben' , Georgia , Times , serif ; 글꼴 - 크기 : 40px ; 선 - 높이 : 55px ; } p { font - family : 'Nobile' , Helvetica , Arial , sans-serif ; 글꼴 - 크기: 13px ; 선 - 높이 : 25px ; }

우분투 & Vollkorn

Ubuntu는 특히 현대적인 느낌을 주는 둥근 모양의 샌즈입니다. 여기서는 본문 텍스트와 대비를 더하기 위해 굵은 글꼴을 사용했습니다.

Vollkorn은 분명히 매우 다른 서체이며 오랜 과거를 반영합니다. 다시 말하지만, 서로 다른 기간의 글꼴을 혼합하는 것에 대해 항상 주의하십시오. 의도적이고 목적이 있는지 확인하세요!

The HTML

1 2

CSS

1 2 3 4 5 6 7 8 9 10 11 h1 { font - family : 'Ubuntu' , 헬베티카 , 굴림 , 산세리프 ; 글꼴 - 크기: 50px ; 선 - 높이 : 65px ; } p { font - family: 'Vollkorn' , Georgia , Times , serif ; 글꼴 - 크기: 16px ; 선 - 높이 : 25px ; }

즐겨찾기를 알려주세요!

이 문서는 북마크에 추가하고 막히거나 도움이 필요할 때마다 다시 참조할 수 있는 도구입니다. 작업 중인 웹사이트에 적합한 글꼴 조합입니다. 웹 글꼴과 브라우저 모두 먼 길을 왔으며 이러한 솔루션은 전반적으로 잘 작동해야 하지만 Google 글꼴이 로드되지 않는 경우 각각 적절한 백업 글꼴을 포함합니다.

아래에 댓글을 남겨주세요.

John Morrison

John Morrison은 노련한 디자이너이자 디자인 업계에서 다년간의 경험을 쌓은 다작 작가입니다. 지식을 공유하고 다른 사람으로부터 배우는 것에 대한 열정으로 John은 업계 최고의 디자인 블로거 중 한 명으로 명성을 쌓았습니다. 그는 동료 디자이너에게 영감을 주고 교육하는 것을 목표로 최신 디자인 트렌드, 기술 및 도구에 대해 연구하고 실험하고 글을 쓰는 데 시간을 보냅니다. 디자인 세계에서 길을 잃지 않을 때 John은 하이킹, 독서, 가족과의 시간 보내기를 즐깁니다.