10 fantastiske kombinationer af Google-skrifttyper, der er på vej i 2021

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

• Artikel af Jason Beever
• Opdateret: Tags: typografi, webdesign

Webstedstypografi var tidligere en mere mystisk designpraksis, end den er i dag. Den komplicerede proces med at udsmykke en webside med brugerdefinerede skrifttyper krævede engang konvertering og indlejring af skrifttypefiler, som skulle hostes på brugerens server, og valget af tilgængelige skrifttyper var begrænset til brugerens egen samling eller viden om typografi uden for standardsystemets skrifttyper. Som følge heraf så de fleste websteder næsten ens ud i deres indholdsformatering, som var afhængig af mange overanvendte og banale websikre skrifttyper.

Det hele ændrede sig i 2010 med udgivelsen af Google Fonts, et open source-projekt, der gør det muligt at implementere langt nemmere at implementere brugerdefinerede skrifttyper på websteder. Installation af disse skrifttyper på dit eget websted er heldigvis en proces, der er hurtig og nem, men du skal være opmærksom på, at ikke alle skriftkombinationer i Googles bibliotek er opskriften på typografisk succes. Med de rigtige skrifttypeparringer og overvejelser om brug kan dit online brand dog udstråle professionalisme, skønhed og læservenlighed uden at skulle bruge dyre tilpassede skrifttyper. I denne artikel viser jeg dig, hvordan du kan opnå alt dette.

En liste over 10 trendsættende kombinationer af Google-skrifttyper

Lad os komme i gang! I ingen bestemt rækkefølge er her 10 af de bedste Google Font-kombinationer, der trender i øjeblikket:

1. Open Sans Condensed + Open Sans

• Open Sans Condensed
• Open Sans

Her er en nem kombination, der virker vidunderligt til næsten enhver anvendelig brug. Open Sans er en af – hvis ikke den mest alsidige skrifttype i hele samlingen af Google Fonts. Den er ekstremt let at læse i store tekstblokke, samtidig med at den stadig er markant nok til overskrifter.

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

Brug i den virkelige verden

Jeg kan ikke forudse noget scenarie, hvor Open Sans ville være et dårligt valg. Medmindre du specifikt leder efter en serif-skrifttype, tror jeg, at denne skrifttype vil tjene de fleste virksomheder, blogs, landingssider eller webapps perfekt.

2. Oswald + EB Garamond

• Oswald
• EB Garamond

Oswald er en fantastisk skrifttype til overskrifter uanset skrifttykkelse eller brug af versaler. Dens kondenserede karakter hjælper den med at fange opmærksomheden og poppe op, men den giver også en behagelig unik tekst som hovedteksttype.

EB Garamond er en elegant opdatering af den klassiske Garamond-skrifttype. Denne skrifttype er øjeblikkeligt genkendelig og tidløs i sit udseende og udstråler en karakteristisk professionalisme i din typografi.

Brug i den virkelige verden

Denne parring fungerer godt til professionelle, der beskæftiger sig med high-end klientel, såsom advokater, ejendomsmæglere eller endda eksklusive butikker. Oswalds alsidighed og EB Garamonds klassiske udseende gør sig godt i produktbeskrivelsestekster, hvor det er vigtigt at fremhæve en vare af førsteklasses kvalitet.

3. Montserrat + Merriweather

• Montserrat
• Merriweather

Montserrat er en favorit blandt designere på grund af sin alsidighed og enkelhed, og Merriweather passer vidunderligt sammen med sin kontrastfyldte stil og lette læsbarhed. Du er velkommen til at udskifte dem som overskrifter eller afsnitstekst – de fungerer begge fantastisk som begge dele!

Real-World Use

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

4. Roboto Thin + Roboto Regular

• Roboto Thin
• Roboto Regular

Roboto-font-familien er en personlig favorit, og det er også en, som vi bruger her på How To Get Online. Den er ekstremt alsidig med et bredt udvalg af skrifttyper, og der er praktisk talt ingen begrænsninger for, hvad skrifttypen kan bruges til. Roboto er moderne og geometrisk, men forbliver på en eller anden måde venlig og pålidelig, og er et vidunder af form og funktion.

Real-World Use

Her er et andet par, som du vil være svært presset til at finde en dårlig anvendelse for. Mens Roboto fungerer til stort set alt, synes jeg, at det er særligt godt til nystartede teknologivirksomheder, moderne små virksomheder eller enhver form for brand med et øje for fremtiden.

5. Raleway + Roboto Slab

• Raleway
• Roboto Slab

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

Real World Use

Raleway er en af de skrifttyper, der skriger sofistikerethed. Når den bruges som en overskrift med lutter versaler, synes jeg, at den fungerer smukt til luksusvarer som smykker, designertøj eller lignende eksklusive e-handelsprodukter. Roboto Slab understøtter den godt med enkel og lettilgængelig beskrivende tekst.

De kan også begge fungere i flæng. Prøv forskellige vægtvariationer for begge skrifttyper i overskrifter og brødtekst, og se, hvilket par der bedst indfanger dit brand.

6. Playfair Display + Source Sans Pro

• Playfair Display
• Source Sans Pro

Ifølge dens designer er Playfair Display inspireret af bogstavformerne fra det 18. århundrede under overgangen fra fjerpenne til stålspidsede kuglepenne. Det er derfor ikke overraskende, at denne skrifttype udstråler gammeldags charme, men med et moderne spin.

Source Sans Pro skubber tingene en smule længere ind i fremtiden og skaber en spændende kombination, der er udsmykket, men stadig er anvendelig.

Anvendelse i den virkelige verden

Playfair Display tilføjer et personligt præg til noget som en tagline eller en produktbeskrivelse. Hvis du får mulighed 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. Source Sans Pro holder teksten fast i en moderne og ren præsentation.

7. Fjalla One + Noto Sans

• Fjalla One
• Noto Sans

Fjalla One er måske ikke den mest alsidige skrifttype, men en ting, den er ekstremt god til, er at skabe overskrifter, der kræver opmærksomhed. Små eller store, små bogstaver eller versaler, disse bogstaver er hypnotiske, uanset hvad du gør med dem.

Noto Sans har til formål at være en virkelig universel skrifttype, hvor den uanset sprog kan vises uden formateringsfejl for brugere i hele verden. Passende nok er skrifttypens æstetik lige så alsidig som dens anvendelighed.

Brug i den virkelige verden

Blogs eller landingssider ville være gode til dette par – eller virkelig alt med lange tekststykker, der kræver mærkbare underoverskrifter for at bryde indholdet op. Noto Sans’ universelle tilpasningsevne gør den også til et godt valg, når det er en prioritet at nå ud til et internationalt publikum.

8. Alegreya + Lato

• Alegreya
• Lato

Alegreya har en vis tiltrækningskraft, der føles meget “jordnær” og venlig for mig. Der er ingen prætentiøsitet omkring dens personlighed; det man ser, er det man får.

Lato kunne give Open Sans kamp til stregen som mesteren blandt alle skrifttyper i Googles bibliotek.

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

9. PT Sans Narrow + PT Sans

• PT Sans Narrow
• PT Sans

En anden moderne fortolkning af en gammeldags stil, PT Sans og dens brødre, PT Sans Narrow, giver et øjeblikkeligt og umiskendeligt udtryk, når de danner par sammen.

Brug i den virkelige verden

En af skrifttyperne fungerer lige godt som overskrift eller brødtekst; hvilket par du vælger, afhænger af ordets karakter – selv om jeg har en tendens til at foretrække PT Sans Narrow i kortere perioder.

Som et “meget vigtigt værktøj til moderne digital kommunikation” er det mest velegnet til – men bestemt ikke begrænset til – at bruge disse skrifttyper til nystartede teknologivirksomheder, softwareapplikationer eller andre digitale virksomheder.

10. Amatic SC + Josefin Sans

• Amatic SC
• Josefin Sans

Okay, denne her er bestemt mere til den lette side. Denne kombination vil naturligvis ikke fungere for alle, men den finurlige karakter af både Amatic SC og Josefin Sans skaber noget, der helt sikkert vil skille sig ud – så længe du er forsigtig!

Brug i den virkelige verden

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

Et godt råd: Brug ikke Amatic SC som din hovedtekst. Du vil drive dine læsere til vanvid.

Bonus: 5 af vores foretrukne premium-skrifttyper

Vi ved godt, at denne artikel handler om de bedste, trendy Google-skrifttyper, men vi ville også gerne nævne et par af vores foretrukne premium-skrifttyper som en bonus. Premium-skrifttyper er selvfølgelig ikke gratis – men de giver dit website et mere unikt og tilpasset design. Disse skrifttyper er ikke populære eller trendende og er faktisk det modsatte af dem, vi har nævnt ovenfor. De er dog gode til dem, der ønsker et tilpasset og personligt design til deres brand, og de passer godt til logoer eller endda kreative overskrifter:

Bonus 1: The Mega Craft Bundle X

Bonus 2: The Valentine’s Bundle

Bonus 3: The Valentine’s Bundle

Bonus 3: The Cool Font Bundle

Bonus 4: The Little Graphics Bundle

Bonus 5: Jealous

Hvorfor skal du bruge Google Fonts?

Velkommen til det, som mange webdesignere betragter som deres bedste ven. Jeg taler af erfaring og kan fortælle dig, at jeg sjældent indlejrer brugerdefinerede skrifttypefiler på websites længere. Google Fonts er nu næsten udelukkende det første og sidste sted, jeg henvender mig til, når det gælder typografi på et websted. Her er grunden:

• Det er helt gratis. Det er ligegyldigt, hvor mange skrifttyper du vælger, eller hvor mange websteder du bruger dem på. Du betaler aldrig en krone.
• Som i marts 2018 er der over 850 skrifttyper i biblioteket. Der er gode chancer for, at du kan finde den rigtige stil, der passer til dit brand.
• Det er hurtigt. Da skrifttyperne er hostet på Googles servere, er filerne intelligent komprimeret og designet til at blive indlæst hurtigt.
• Det er nemt. Du skal blot kopiere og indsætte den i en HTML-fil, og så er du færdig.
• Det er organiseret. Alle skrifttyper er kategoriseret og søgbar i én database. Du behøver ikke længere at gennemsøge rodede undermapper på din computer for at finde den perfekte skrifttype.
• Har jeg nævnt, at det er gratis? Det er gratis!

Sådan installerer du Google Fonts

Ingen hovedpine er nødvendig her. Du skal bare gå til Google Fonts og finde den eller de skrifttyper, du har brug for.

Når du vælger dine skrifttyper, bliver de kumulativt tilføjet til en samling nederst på siden. Når du er færdig med din søgning, skal du klikke på denne nederste fane, og et vindue med indlejringsinstruktioner vises.

Tilføjelse af stilarter

Herfra kan du vælge at inkludere yderligere styling såsom kursiv, fed, fed-italisk osv. Du skal blot klikke på fanen CUSTOMIZE og vælge de stilarter, du mener, du har brug for.

For eksempel er her, hvordan jeg ville vælge både almindelig og fed tekst for skrifttypen Khula.

Indlejring af standard eller @Import?

Du vil bemærke, at du har to muligheder for at indlejre skrifttyperne på dit websted: ved hjælp af et standard <link href>, der skal bruges i webstedets HTML-fil, eller en @import-url, der skal medtages i webstedets CSS-fil. Så hvilken skal du bruge?

Generelt set er den bedste løsning at kopiere og indsætte <link href>-linjen i din HTML-fil. Dine skrifttyper vil typisk blive indlæst hurtigere på denne måde i stedet for at vente på, at CSS-filen indlæses, og denne metode har også lidt bedre understøttelse af (meget) gamle browsere.

Hvor du skal sætte koden ind

Du skal kopiere og indsætte den kodelinje, som Google giver dig, i <head>-afsnittet i din HTML-fil. Så hvis du bruger Khula-skrifttypen, som jeg valgte ovenfor, vil det se således ud:

Brug af skrifttypen i dit stilark

Nu skal du blot kalde på skrifttypen som sædvanligt i din CSS-kode. Til demonstrationsformål kan din hovedoverskrift og din afsnitstekst se således ud:

Rådgivning om parring af dine skrifttyper

Det kan nogle gange være en vanskelig kunstnerisk balance at finde, når man skal beslutte, hvilke skrifttyper man skal gruppere sammen. På den ene side vil dit valg af skrifttyper være mest effektivt, hvis der er tilstrækkelig stor kontrast mellem stilene; hver enkelt skrifttype på dit websted skal skille sig ud fra de andre og tjene en berettigelse for dens brug. På den anden side ønsker du ikke, at dine skrifttyper stilistisk set skal afvige for meget fra hinanden, hvilket kan give indtryk af, at de er valgt tilfældigt.

Serif og Sans-Serif

En gennemprøvet metode er at parre en serif- og en sans-serif-skrifttype med en sans-serif-skrifttype. Deres stilarter har en tendens til at stå i god kontrast til hinanden og giver en nem sondring mellem overskrifter og afsnit.

Eksperimentering er nøglen

Når jeg skal vælge skrifttyper til et nyt websted, kan jeg godt lide at downloade alle mulige Google Font-indstillinger til min computer og lege med dem i et tekstbehandlingsdokument. At lege med forskellige størrelser og vægte og sammenligne kombinationerne side om side er en effektiv måde at finde frem til den bedst mulige kombination på. Hvis du tager dig tid til at eksperimentere, kan du måske endda opdage, at du ved at bruge en tynd variant af en given skrifttype får en bedre overskriftstekst, end hvis du bruger en helt separat skrifttype. (Den enkleste løsning er ofte den bedste.)

Slutning

Google Fonts er en effektiv ressource for gør-det-selv-folk, som ikke ønsker at betale for dyre brugerdefinerede skrifttyper på deres websted. Men med stor magt følger et stort ansvar: Typografi kræver nøje overvejelse, hvis det skal gø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 det perfekte skrifttypepar, der kan indfange dit brands personlighed.