De 15 Bedst Rangerede Google-Skrifttyper (Tips om Brug)

På det tidspunkt, hvor vi skriver denne artikel, er der 884 forskellige Google Font-familier tilgængelige gratis. Det er mange valgmuligheder! Derfor kan du være på udkig efter nogen, der hjælper dig med at finde den nål i en høstack, med en liste over de bedste Google Fonts.

Vi har det til dig, og så deler vi også nogle af de bedste fremgangsmåder til brug af Google Fonts på WordPress.

At vælge en skrifttype er mere end blot et æstetisk valg – det kan have en reel effekt på dit websteds afvisningsprocenter og konverteringsfrekvenser, især hvis du vælger en skrifttype, der er svær for dine besøgende at læse.

I bund og grund betaler det sig at tage lidt tid at vælge den bedste Google font-familie til dit websted, snarere end at bruge den første skrifttype, som du ser!

De 10 bedste Google-skrifttyper i henhold til folkemængdenes visdom

Så hvordan kommer du op med en liste over de bedste Google Fonts, når så meget af dette er subjektivt? Vi ønsker ikke, at hele denne liste skal være subjektiv, så vi går til dataene for at opbygge en liste over de bedste Google Fonts.

Dybest set bruger vi Google Fonts-analytics for at stole på folkemængdenes viden. Med over 23 billioner i total skrifttypevisninger har Google bare en lille smule data at trække fra. 😉

23 trillion total font views, and counting.

🤯https://t.co/g5dp3e622g pic.twitter.com/lePJIRgbIU

— Google Fonts (@googlefonts) August 7, 2018

Derefter går vi lidt ud over de rå popularitet tal og vælger nogle fremadgående skrifttyper, der vokser hurtigt. Parat? Lad os dykke ned i det…

1. Roboto

• Sans-serif
• Stil: 12
• Se skrifttype

Roboto Google font

Roboto er et sans-serif tilbud fra Christian Robertson, som blev udviklet af Google som systemskrifttype til Android. Det er nu massivt populært, kommer i 12 forskellige stilarter og giver flere fremtoninger på Google Fonts ‘analyser. For eksempel er Roboto den mest populære skrifttype. Men Roboto Condensed er også den sjette mest populære skrifttype, og Roboto Slab har også et udseende på nummer 13!

2. Open Sans

• Sans-serif
• Stil: 10
• Se skrifttype

Open Sans Google font

Open Sans er en sans-serif skrifttype udviklet af Steve Matteson. Google bruger Open Sans på nogle af sine hjemmesider såvel som i sine print- og webannoncer.

3. Lato

• Sans-serif
• Stil: 10
• Se skrifttype

Lato Google font

Lato er et andet populært sans-serif-tilbud, denne gang fra Łukasz Dziedzic.

4. Slabo 27px/13px

• Serif
• Stil: 2
• View Font

Slabo Google font

Slabo er en serif skrifttype udviklet af John Hudson af Tiro Typeworks. Hvad der er unikt med denne skrifttype er, at det er specielt designet til at blive brugt i en vis størrelse – enten 27px eller 13px afhængigt af dine behov.

5. Oswald

• Sans-serif
• Stil: 6
• Se skrifttype

Oswald Google font

Oswald er en sans-serif skrifttype, der oprindeligt blev udviklet af Vernon Adams.

6. Source Sans Pro

• Sans-serif
• Stil: 12
• Se skrifttype

Source Sans Pro Google font

Source Sans Pro er en sans-serif skrifttype fra Paul Hunt, der blev oprettet til Adobe og var Adobes første open source-font.

7. Montserrat

• Sans-serif
• Stil: 18
• Se skrifttype

Montserrat Google font

Montserrat er en sans-serif skrifttype fra Julieta Ulanovsky, der bor i det mononymiserede Montserrat-kvarter i Buenos Aires. Med 18 forskellige stilarter har du ret mange valgmuligheder.

8. Raleway

• Sans-serif
• Stil: 18
• Se skrifttype

Raleway Google font

Med 18 forskellige stilarter er Raleway en anden stor sans-serif skrifttype-familie, som oprindeligt blev oprettet af Matt McInerney. Hvis du kan lide Raleway og søger noget unikt, tilbyder Raleway Dots lignende styling med en prikket tilgang, som kan fungere for store overskrifter.

9. PT Sans

• Sans-serif
• Stil: 4
• Se skrifttype

PT Sans Google font

PT Sans blev udviklet til den offentlige typografier af russiske føderation og omfatter som sådan både latin og cyrilliske tegn. Der er også flere andre skrifttyper i PT familien, herunder nogle serif muligheder.

10. Lora

• Serif
• Styles: 4
• Se skrifttype

Lora Google font

Lora er en populær serif skrifttype, der er designet til at fungere godt både på din skærm og på print.

Bonus Fonter + Nyopkommende

Ved afstemning er de ti skrifttyper ovenfor, de mest populære Google Fonts. Men kun at vise de mest populære muligheder er ikke god service til store, fremadrettede skrifttyper, der ikke har fået eksponeringen til at dukke op på analyserne.

Her er nogle af vores favoritter, der ikke kom til udtryk øverst i analyserne.

11. Noto Sans / Serif

• Sans-serif or serif
• Stil: 4 each
• Se skrifttype

Noto Sans Google font

Noto er en Google-commissioned skrifttype, der kommer i både serif og sans-serif versioner. Det modtager regelmæssige opdateringer, og der er nu godt over 100 Noto-skrifttyper, med flere på vej hele tiden!

12. Nunito Sans

• Sans-serif
• Stil: 14
• Se skrifttype

Nunito Sans Google font

Nunito Sans er en sans-serif mulighed, der vokser hurtigt i popularitet (brugen er tredoblet siden sidste år).

13. Concert One

• Sans-serif
• Stil: 1
• Se skrifttype

Concert One Google font

Concert One er et afrundet groteskt skrifttype, der er en fantastisk mulighed til overskrifter.

14. Prompt

• Sans-serif
• Stil: 18
• Se skrifttype

Prompt Google font

Prompt er et sans-serif-tilbud fra det thailandske kommunikationsdesignfirma Cadson Demak.

15. Work Sans

• Sans-serif
• Stil: 9
• Se skrifttype

Work Sans Google font

Work Sans er en sans-serif skrifttype, der er optimeret til brug på skærme. Designerne anbefaler at bruge mellemvægtstyperne til alt fra 14px-48px.

Sådan oprettes de bedste Google Fonts-kombinationer

Hvis du troede, at forsøge at vælge en skrifttype fra Google Fonts, var svært, vent, indtil du forsøger at parre dem på dit websted! Heldigvis er dette ikke et problem, du selv skal løse, medmindre du vil. Der er et par måder at komme med de bedste Google Fonts-kombinationer.

For det første vil Google Fonts hjemmeside selv foreslå populære sammenkoblinger, hvis du ruller ned på siden:

Hvor du finder Google Fonts-par

Udover det, kan du også bruge et websted som Font Pair til at få flere forslag.

Bedste Fremgangsmåder til Brug af Google Fonts på WordPress

Når du har fundet de perfekte skrifttyper fra Google Fonts, er der nogle gode fremgangsmåder til brug af Google Fonts på WordPress.

Begræns antallet af skrifttyper, du bruger

Nogle af disse skrifttyper – som Montserrat og Raleway – kommer med 18 forskellige skrifttypevægte. Selvom det er godt at give dig valg, vil du ikke indlæse alle 18 valgte på dit WordPress-websted, fordi det vil bremse dine belastningstider nede. Dette er meget vigtigt!

For de fleste skrifttyper er en god tommelfingerregel at bruge 3 vægtdele som et maksimum:

• Regular
• Italic
• Bold

Mange WordPress-websteder, vi ser i dag, dropper endog kursiv og går bare med 2 forskellige skrifttypevægte. Hvis du selv indlejrer Google Fonts selv, kan du vælge præcis hvilke vægte der skal inkluderes fra fanen Tilpas på Google Fonts:

Sådan vælger du Google Fonts-stilarter

De fleste WordPress-temaer omfatter i dag nemme måder at vælge, hvilke Google-skrifttyper og vægte du vil bruge. Men ikke alle temaudviklere er fokuseret på ydeevne. Så i nogle tilfælde kan det være bedre at deaktivere Google Fonts i dit tema og tilføje dem selv.

Variable skrifttyper begynder også at blive populære og understøttes af alle moderne browsere. Disse er fedt, fordi det tillader en skrifttypefil til simpelthen at transformere med forskellige egenskaber. Der er dog ikke mange gratis skrifttyper at vælge imellem. Google har dog nogle få variable skrifttyper i Early Access.

Overvej hosting af Google Fonts lokalt

Som et alternativ til servering af skrifttyper fra Googles server kan du også være vært for skrifttyper lokalt, hvilket kan give præstationsfordele. Selvom du husker, at de fleste Google-skrifttyper sandsynligvis allerede er cachelagret i folks browsere. Så vi anbefaler at lave dine egne præstationsprøver.

Hvis du bruger en premium skrifttype, bortset fra Google-skrifttyper, som den “Brandon” skrifttype, vi bruger på vores Kinsta-websted, så skal man på alle måder hoste dem lokalt (og betjene dem fra din CDN) den bedste rute. For mere om dette emne, tjek vores indlæg om, hvordan man kan hoste skrifttyper lokalt.

Vælg en skrifttype, der får opdateringer

Skrifttyper er ligesom WordPress-plugins og temaer – Over tid modtager de opdateringer og forbedringer for at gøre dem endnu bedre. Og mens indsatsen ikke er så nær som med WordPress-plugins, kan det stadig være en fordel at vælge en skrifttype, der modtager regelmæssige opdateringer. Noto familien fra Google er en, der har fået regelmæssige opdateringer siden 2014.

Fordi de fleste skrifttyper på denne liste er populære, er det nok et godt bud på, at enhver skrifttype på denne liste vil modtage regelmæssige opdateringer og forbedringer. Og hvis du beslutter dig for at gå på listen, skal du sørge for, hvilken skrifttype du vælger, er populær nok til at få opmærksomhed er aldrig en dårlig ide.

Glem ikke tilgængelighed

Ifølge Verdenssundhedsorganisationen lever i 2017 en anslået 253 millioner mennesker med synshandicap: 36 millioner er blinde og 217 millioner har moderat til svær synshandicap.

Når du bruger Google Fonts, får du kontrol over, hvordan det ser ud med CSS, såsom farve og størrelse. Så glem ikke at følge Web Content Accessibility Guidelines (WCAG) 2.0. Dette sikrer, at dit indhold er let tilgængeligt for alle.

Følgende retningslinjer vil gøre indhold tilgængeligt for et bredere udvalg af mennesker med handicap, herunder blindhed og lav synede, døvhed og høretab, lærings forstyrrelser, kognitive begrænsninger, begrænset bevægelse, tale indskrænkninger, lysfølsomhed og kombinationer af disse.

En meget vigtig retningslinje er farvekontrast. På et ældre design af Kinsta-webstedet var vores skrifttype lidt for let, og besøgende gav udtryk for deres bekymringer, da det gjorde det svært at læse. Det sidste du vil gøre er at offentliggøre fantastisk indhold, bare for at få det til at blive en belastning for folks øjne!

fyi guide page font is a bit too light making it hard to read – darker font would be better 🙂

— George Liu (@centminmod) August 14, 2016

Du kan bruge et værktøj som Color Contrast Checker fra WebAIM for at se, om dine skrifttyper passerer de officielle anbefalinger. Nedenfor kan du se, at farverne på vores blogindlæg nu går igennem testen. 👍

Color contrast checker tool

Hvad er din foretrukne skrifttype af Google Fonts?

Google Font er fantastisk og bruges af millioner af hjemmesider på nettet hver dag. Følgende bedste praksis, som f.eks. Begrænsning af skrifttypevægte, og hosting af dem lokalt (i nogle tilfælde) og efter retningslinjer for tilgængelighed vil sikre en bedre samlet oplevelse for dine besøgende.

Nu over til jer alle – hvad er dine yndlings skrifttyper og skrifttypepar fra Google Fonts? Fortæl os det nedenfor i kommentarerne.