10 Fler fantastiska Google typsnittskombinationer du kan kopiera

Förra gången vi skrev om Google Web Fonts var det ett ganska nytt program med en handfull typsnitt. Idag finns det nästan 500 teckensnittsfamiljer som är redo och väntar på att serveras till din webbplats helt gratis. Google har säkert gjort sitt märke på webtypografi och står som ett utmärkt alternativ till premium abonnemangstjänster.

Nackdelen med denna tillväxt är att det blir allt svårare att sikta genom biblioteket för att hitta de bästa valen. Vi har dock tillbaka och serverar en annan stor samling av Google Web Font-kombinationer som är mogna för att stjäla. Bara kopiera och klistra in vår kod, sedan tweak stilen för att passa dina behov och du kommer att vara bra att gå!

Bree Serif & Open Sans

HTML

CSS

h1 {font: 400 60px / 1.3 'Bree Serif', Georgia, serif; } p {font: 400 14px / 1.6 'Öppna Sans', Verdana, Helvetica, sans-serif; }

Bevan och Pontano Sans

HTML

CSS

h1 {font: 400 60px / 1.3 'Bevan', Georgia, serif; } p {font: 400 16px / 1.6 'Pontano Sans', Verdana, Helvetica, sans-serif; }

Abril Fatface & Average

HTML

CSS

h1 {font: 400 60px / 1.3 'Abril Fatface', Georgia, serif; } p {font: 400 17px / 1.6 'Average', Garamond, Georgia, serif; }

Playfair Display och Muli

HTML

CSS

h1 {font: 400 60px / 1.5 'Playfair Display', Georgia, serif; } p {font: 400 16px / 1.6 'Muli', Verdana, Helvetica, sans-serif; }

Sansita One & Kameron

HTML

CSS

h1 {font: 400 70px / 1.2 'Sansita One', Georgia, serif; } p {font: 400 17px / 1.6 'Kameron', Georgia, serif; }

Istok Web & Lora

HTML

CSS

h1 {font: 400 70px / 1.2 'Istok Web', Verdana, Helvetica, sans-serif} p {font: 400 16px / 1.6 'Lora', Georgia, serif; }

Pacifico & Arimo

HTML

CSS

h1 {font: 400 95px / 1.6 'Pacifico', Georgia, serif; } p {font: 400 16px / 1.6 'Arimo', Verdana, Helvetica, sans-serif; }

Nixie One & Ledger

HTML

CSS

h1 {font: 400 80px / 1.2 'Nixie One', Georgia, serif; } p {font: 400 15px / 1.6 'Ledger', Garamond, Georgia, serif; }

Cantata One & Imprima

HTML

CSS

h1 {font: 400 70px / 1.2 'Cantata One', Georgia, serif; färg: # 2f99ba; } p {font: 400 16px / 1.6 'Imprima', Verdana, Helvetica, sans-serif; bredd: 480px; färg: # 232525; }

Rancho & Gudea

HTML

CSS

h1 {font: 400 95px / 1.1 'Rancho', Georgia, serif; } p {font: 400 17px / 1.6 'Gudea', Verdana, Helvetica, sans-serif; }

Slutsats

Förhoppningsvis har du hittat flera typsnittskombinationer här som fungerar perfekt för några av de projekt du arbetar med. Var noga med att bokmärke denna sida och kom tillbaka nästa gång du behöver några idéer. Om du är intresserad av en del av logiken bakom hur man kopplar in teckensnitt, kolla in vår första artikel i den här serien.

Har du några bra Google Web Font-kombinationer som du vill dela? Lämna en kommentar nedan och låt oss veta! Också se till att länka till några levande exempel där du använder Google webbfonter.

Google-teckensnitt

Google Fonts är ett bibliotek med över 800 olika typsnitt, helt redo att vara inbäddade i ditt webbprojekt. Serien ser på vilka Google-teckensnitt och delar intressanta exempel och kombinationer av teckensnitt som kan ta ditt projekt till nästa nivå.