10 fantastiske Google Font-kombinationer tendens til i 2020

En liste over trendy skrifttyper, der er håndplukket fra Google-skrifttyper, der parrer godt sammen, og hvordan du installerer dem på dit websted.


Bedste Google Fonts kombinationer

Webstedstypografi plejede at være en mere mystificerende designpraksis end den er i dag. Den komplicerede proces med at dekorere en webside med brugerdefinerede skrifttyper krævede engang konvertering og indlejring af fontfiler, der skulle være vært på brugerens server, og valget af tilgængelige skrifttyper var begrænset til brugerens egen samling eller viden om typografi uden for standardsystemfonterne. Som et resultat så de fleste websteder næsten identiske i deres indholdsformatering, som var afhængige af mange overbrugte og verdslige websikre skrifttyper.

Det hele ændrede sig i 2010 med frigivelsen af Google-skrifttyper, et open source-projekt, der giver mulighed for langt lettere implementering af brugerdefinerede skrifttyper på websteder. Installation af disse skrifttyper på dit eget websted er heldigvis en proces, der er hurtig og let, men du skal være opmærksom på, at ikke enhver skrifttypekombination i Googles bibliotek er en opskrift på typografisk succes. Med de rigtige skrifttilkoblinger og brugenhensyn kan dit online brand imidlertid udstråle professionalisme, skønhed og læservenlighed uden behov for dyre tilpassede skrifttyper. I denne artikel viser jeg dig, hvordan du udfører alt dette.

En liste over 10 trendende Google Font-kombinationer

Lad os komme til det! I ingen særlig rækkefølge er her 10 af de bedste Google Font-kombinationer, der i øjeblikket er trend:

1. Åben sans kondenseret + åben sans

Trending Google Font Combination - Open Sans Kondenseret og Open Sans

Her er en nem kombination, der udfører vidundere til næsten enhver anvendelig anvendelse. Åben Sans er en af ​​- hvis ikke de – mest alsidige skrifttyper i hele samlingen af ​​Google-skrifttyper. Det er ekstremt let at læse i store tekstblokke, mens det stadig er slående nok til overskrifter.

Enkel. Sofistikeret. Velkendt. Du kan ikke gå galt!

Virkelig brug

Jeg kan ikke forudse noget scenario hvor Åben Sans ville være et dårligt valg. Medmindre du specifikt leder efter en serif-font, tror jeg, at denne vil tjene mest enhver forretning, blog, destinationsside eller webapp perfekt.

2. Oswald + EB Garamond

Trending Google Font-kombination - Oswald med EB Garamond

Oswald er en fantastisk skrifttype til overskrifter uanset fontvægt eller brug af hætter. Dens kondenserede natur hjælper det med at få opmærksomhed og pop, men det skaber også en behagelig unik tekst som dit hovedkrops skrifttype.

EB Garamond er en elegant opdatering af den klassiske font fra Garamond. Direkte genkendelig og tidløs i udseende udstråler denne skrifttype en markant professionalisme i din typografi.

Virkelig brug

Denne parring fungerer godt for fagfolk, der beskæftiger sig med avancerede klienter, såsom advokater, ejendomsmægler eller endda eksklusive butikker. Alsidigheden af Oswald og det klassiske udseende EB Garamond lave en fantastisk produktbeskrivelsestekst, hvor det er vigtigt at fremhæve en vare af premium kvalitet.

3. Montserrat + Merriweather

Trending Google Font-kombination - Montserrat med Merriweather

Montserrat er en favorit blandt designere på grund af dens alsidighed og enkelhed, og Merriweather parres vidunderligt med sin kontrastfulde stil og lette læsbarhed. Du er velkommen til at udveksle dem som overskrifter eller afsnitstekst – de fungerer begge godt som begge sider!

Virkelig brug

Denne særlige kombination er en dejlig balance mellem moderne og klassisk design. Som sådan kunne dens forskellige anvendelsesmuligheder understøtte mange typer virksomheder. Personligt føler jeg, at disse skrifttyper ville gøre det godt for enhver form for online nyhedskilde eller forlagsbureau.

4. Roboto tynd + Roboto regelmæssig

Trending Google Font-kombination - Roboto Thin med Roboto Regular

Det Roboto font-family er en personlig favorit, og det er også en, vi bruger her på Sådan kommer du online. Ekstremt alsidig med en lang række fontvægte er der praktisk talt ingen begrænsning for, hvad skrifttypen kan bruges til. Moderne og geometrisk, men alligevel på en eller anden måde forbliver venlig og pålidelig, er Roboto et vidunder af form og funktion.

Virkelig brug

Her er en anden parring, som du bliver hårdt presset til at finde en dårlig brug for. Mens Roboto fungerer for næsten alt, jeg synes, det er især godt for tech-start-ups, moderne små virksomheder eller enhver type brand med øje for fremtiden.

5. Raleway + Roboto-plade

Populære kombinationer af Google-skrifttyper - Raleway med Roboto Slab

Det er vores ven Roboto igen! Denne gang ser vi dog på serif-variationen, Roboto plade. Det er en skrifttype, der er lige så alsidig som sin fætter, men alligevel lidt mere klassisk i stil. Når det er parret med det karakteristiske og dristige Raleway, vi har et fantastisk match af ren og raffineret typografi.

Virkelig brug

Raleway er en af ​​disse skrifttyper, der skrig raffinement. Når det bruges som en overskrift på alle hætter, synes jeg det fungerer smukt til luksusartikler som smykker, designertøj eller lignende eksklusive e-handelsprodukter. Roboto plade understøtter det godt med enkel og tilgængelig beskrivende tekst.

De arbejder begge om hverandre. Prøv forskellige vægtvariationer for begge skrifttyper i overskrifter og brødtekst, og se, hvilken parring der fanger dit brand bedst.

6. Playfair Display + Source Sans Pro

Trending Google Font-kombination - Playfair-skærm med Source Sans Pro

Ifølge dens designer, Playfair Display blev inspireret af brevformerne i det 18. århundrede under overgangen fra spænder til stålspidser. Det er ikke nogen overraskelse, at denne skrifttype udstråler den gamle verdens charme, men med et moderne spin.

Kilde Sans Pro skubber tingene lidt længere ind i fremtiden og skaber en spændende kombination, der er udsmykket, mens den stadig er utilitaristisk.

Virkelig brug

Playfair Display tilføjer et personligt touch til noget som en tagline eller produktbeskrivelse. Hvis du har en chance for at bruge dets ampersand- eller valutasymboler, vil du straks se, hvorfor det er det perfekte valg til et produkt eller en tjeneste, der er centreret omkring luksus og udseende. Kilde Sans Pro holder teksten jordet i en moderne og ren præsentation.

7. Fjalla One + Noto Sans

Trending Google Font-kombination - Fjalla One med Noto Sans

Fjalla One er muligvis ikke det mest alsidige af skrifttyper, men en ting det gør ekstremt godt er at skabe overskrifter, der kræver opmærksomhed. Små eller store, små bogstaver eller alle kasketter. Disse bogstaver er hypnotiske, uanset hvad du gør med dem.

Noto Sans sigter mod at være en virkelig universel skrifttype, hvor den, uanset sproget, kan vises uden formateringsfejl for brugere over hele verden. Skriftens æstetik er passende, lige så alsidig som dens nytte.

Virkelig brug

Blogs eller destinationssider ville være dejlige til denne sammenkobling – eller virkelig noget med lange tekstflader, der kræver mærkbare underoverskrifter for at opdele indhold. Den universelle tilpasningsevne af Noto Sans gør det også til et godt valg, hvor det er en prioritering at nå et internationalt publikum.

8. Alegreya + Lato

Trending Google Font-kombination - Alegreya med Lato

Alegreya har en vis appel, der føles meget ”jordnær” og venlig over for mig. Der er ingen foregivelse om dens personlighed; hvad du ser, er hvad du får.

Lato kunne give Åben Sans et løb for sine penge som mester for all-purpose skrifttyper i Googles bibliotek.

Sammen skaber de en kombination, der er sjov, let at læse og pragmatisk.

9. PT Sans Narrow + PT Sans

Trending Google Font-kombination - PT Sans Smal med PT Sans

En anden moderne indtagelse af en gammel verdens styling, PT Sans og dets brødre, PT Sans Narrow, afgive en øjeblikkelig og umiskendelig erklæring, når du er parret sammen.

Virkelig brug

Enten skrifttype fungerer lige så godt som en overskrift eller brødtekst; den bestemte parring, du vælger, afhænger af arten af ​​dine ord – selvom jeg har en tendens til at foretrække PT Sans Narrow i kortere burst.

Tænkt som et “meget vigtigt værktøj til moderne digital kommunikation”, synes det mest velegnet til – men bestemt ikke begrænset til – at bruge disse skrifttyper til tech-startups, softwareprogrammer eller andre digitale virksomheder.

10. Amatic SC + Josefin Sans

Trending Google Font-kombination - Amatic SC med Josefin

Okay, denne er bestemt mere på den lethjertede side. Naturligvis fungerer denne kombination ikke for alle, men begge er den finurlige karakter Amatic SC og Josefin Sans skab noget, der helt sikkert skiller sig ud – lige så længe du er forsigtig!

Virkelig brug

Hvis du er en sjovt kunstner, musiker eller entertainer, kan denne skrifttype være afgørende for at fange din unikke personlighed. Afhængig af den overordnede tone og emne, kan denne kombination også fungere for en nicheblog.

Et råd: Brug ikke Amatic SC som din hovedteksttekst. Du vil gøre dine læsere vanvittige.

Bonus: 5 af vores foretrukne premium-skrifttyper

Vi ved, at denne artikel handler om de bedste, trendy Google-skrifttyper, men vi ønskede også at nævne et par af vores foretrukne premium-skrifttyper som en bonus. Premium-skrifttyper er naturligvis ikke gratis – men de giver dit websted et mere unikt og tilpasset design. Disse skrifttyper er ikke populære eller tendenser og er faktisk det modsatte fra dem, vi har nævnt ovenfor. Dette er dog godt for dem, der ønsker et tilpasset og personlig design til deres brand og klarer sig godt, når de bruges til logoer eller endda kreative overskrifter:

Bonus 1: Mega Craft Bundle X

Bonus 2: Valentine’s Bundle

Bonus 3: The Cool Font Bundle

Bonus 4: The Little Graphics Bundle

Bonus 5: Jaloux

HURTIGTIPS: Premium-skrifttyper giver designere en chance for at opnå et tidløst design og anbefales stærkt til logoer og brandidentitet.

Hvorfor skal du bruge Google-skrifttyper?

Velkommen til hvad mange webdesignere betragter som deres bedste ven. Når jeg taler fra erfaringen, kan jeg fortælle dig, at jeg sjældent indlejrer tilpassede fontfiler på websteder længere. Google-skrifttyper er nu næsten udelukkende det første og sidste sted, jeg henvender mig til for et websteds typografi. Her er hvorfor:

  • Det er helt gratis. Ligegyldigt hvor mange skrifttyper du vælger, eller hvor mange websteder du bruger dem på. Du betaler aldrig en krone.
  • Fra marts 2018 er der over 850 skrifttyper i biblioteket. Chancen er, at du finder den rigtige stil, der passer til dit brand.
  • Det er hurtig. Da skrifttyperne hostes på Googles servere, komprimeres filerne intelligent og designet til at indlæses hurtigt.
  • Det er let. En simpel kopi-og-indsæt i en HTML-fil, og du er færdig.
  • Det er organiseret. Alle skrifttyper er kategoriseret og kan søges i en database. Ikke mere skure gennem rodede undermapper på din computer for at finde den perfekte skrifttype.
  • Nævnte jeg det gratis? Det er gratis!

Sådan installeres Google-skrifttyper

Der kræves ingen hovedpine her. Bare gå til Google-skrifttyper og find den eller de skrifttyper, du har brug for.

Når du vælger dine skrifttyper, tilføjes de kumulativt til en samling i bunden af ​​siden. Når du er færdig med din søgning, skal du klikke på den nederste fane, og et vindue med integreret vejledning vises.

Tilføjelse af stilarter

Herfra kan du vælge at inkludere ekstra styling som kursiv, fed, fed kursiv osv. Klik bare på CUSTOMIZE fanen og vælg de stilarter, du tror, ​​du har brug for.

For eksempel er her, hvordan jeg vil vælge begge fast og fremhævet tekst til skrifttypen Khula.

Tilføjelse af skrifttype i Google-skrifttyper

Integrering af standarden eller @Import?

Du vil bemærke, at du har to muligheder for at integrere skrifttyperne på dit websted: ved hjælp af en standard der skal bruges på dit websteds HTML fil eller a @import url der skal inkluderes i dit websteds CSS fil. Så hvilken skal du bruge?

Generelt er den bedste mulighed at kopiere og indsætte linje ind i din HTML-fil. Dine skrifttyper indlæses typisk hurtigere på denne måde i stedet for at vente på, at CSS-filen indlæses, og denne metode har også lidt bedre support til (meget) gamle browsere.

Hvor skal man sætte koden

Du vil kopiere og indsætte den kodelinje, Google giver dig, i sektion af din HTML-fil. Så ved hjælp af Khula-skrifttypen, jeg valgte ovenfor, vil den se sådan ud:

HURTIGTIPS: Du kan også specificere skrifttyper ved at skrive dem ud i url’en adskilt med kommaer. For eksempel: “https://fonts.googleapis.com/css?family=Khula:fed, kursiv, fedkursiv

Brug af skrifttypen i dit stilark

Nu kalder du simpelthen skrifttypen som normalt inden for din CSS kode. Til demonstrationsformål kan din hovedoverskrift og afsnitstekst se sådan ud:

h1 {
font-familie: ‘Khula’, sans-serif;
fontvægt: 700;
skriftstørrelse: 48px;
}
p {
font-familie: ‘Khula’, sans-serif;
fontvægt: 400;
skriftstørrelse: 16px;
}

HURTIGTIPS: Sørg for at medtage en dropback-font som ‘serif’, ‘sans-serif’ eller en lignende websikker font i den sjældne begivenhed, at din Google Font ikke indlæses.

Rådgivning om parring af dine skrifttyper

Beslutning om hvilke skrifttyper, der skal grupperes sammen, kan undertiden være en vanskelig kunstnerisk balance at slå. På den ene side vil dit valg af font være mest effektivt, når der er nok af kontraster i stilarter; hver skrifttype på dit websted skal skille sig ud fra de andre og tjene en begrundelse for dens anvendelse. På den anden side ønsker du ikke, at dine skrifttyper strayter for langt fra hinanden stilistisk, hvilket kan give det indtryk, at de blev valgt tilfældigt.

HURTIGTIPS: Tænk over, hvad følelser eller idé en bestemt skrifttype fremkalder. Prøv at parre den med en anden skrifttype, der fremkalder den samme følelse eller idé. Det handler om at finde de rigtige skrifttyper, der taler til dit unikke brand. Du ved det iboende, når en skrifttype føles som dit brand, eller om det giver blandede signaler.

Serif og Sans-Serif

En velprøvd metode er at parre en serif-font med en sans-serif-en. Deres stilarter har en tendens til at kontrastere godt sammen, hvilket giver en let sondring mellem overskrifter og afsnit.

Eksperimentering er nøglen

Når jeg vælger skrifttyper til et nyt websted, kan jeg lide at downloade alle mulige indstillinger for Google Font til min computer og lege med dem i et tekstbehandlingsdokument. Knusning med forskellige størrelser og vægte og sammenligning af kombinationer side om side er en effektiv måde at bestemme den bedst mulige parring. Ved at tage dig tid til at eksperimentere, kan du endda opdage, at du bruger en tynd variation af en given skrifttype giver bedre overskriftstekst, end hvis du skulle bruge en helt separat skrifttype. (Den enkleste løsning er ofte den bedste.)

Konklusion

Google-skrifttyper er en stærk ressource for DIY-brugere, der ikke ønsker at betale for dyre tilpassede skrifttyper på deres websted. Men med stor kraft kommer stort ansvar: typografi kræver omhyggelig tanke for, at det kan udføres godt, og ikke alle skrifttyper derude er en vinder. Vi håber, at denne guide hjælper dig med at styre dig i den rigtige retning og inspirerer dig til at finde den perfekte fontparring for at fange dit brand’s personlighed.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me