Syv Google Webfonts du ikke må gå glipp av

Ikke gå glipp av noen av disse syv Google Webfontene!

For noen år tilbake kunne vi velge mellom Verdana, Arial og Times New Roman når vi skulle designe nettsteder. Designerne rev seg i håret og noen kunder gikk så langt som å vurdere Arial som gjennomgangsfont i bedriftens grafiske profil for å få det visuelle likt på papir og skjerm. I dag er font-hverdagen på nett noe ganske annet – mye takket være Google Webfonts.

Her er syv Google Webfonts jeg bruker ofte og som kan gi nettsidene dine (og designprofilen din) et løft:


1. Roboto (Grotesk/sans-serif)

Roboto: En gratis Helvetica Neue

Når du skal herme Helvetica Neue har du bare en ting å gjøre: Å ty til Roboto. Det finnes også andre som er ganske like, men variasjonen til Roboto gir deg mulighet for light’e titler og lesbare paragrafer med ekte bold og italic.

— Ligner på Helvetica
— Perfekt til kontrastfylte titler

 


2. Raleway (Grotesk/sans-serif)

Raleway

Raleway, spesielt i store bokstaver og fet utgave, gir meg skikkelig 2015-følelsen. Den er mer moderne enn Roboto og er litt bredere i rumpa. Raleway er en god erstatning for Avenir eller en moderne utgave av Century Gothic.

— Ligner på Avenir
— Perfekt til store, fete titler i appcaps

 


3. Playfair Display (Serif)

Playfair Display

Da jeg oppdaget Playfair Display for noen år siden ble jeg usaklig glad. Den er så amerikansk avis’ete, så macho og tøff, samtidig som den er femi og elegant. I fet/kursiv-versjon er den dekorativ, i black-variant er den bastant og selvsikker og i light-versjon er den en god erstatning for Bodoni.

— Ligner på Bodoni
— Perfekt til den selvsikre overskriften

 


4. Merriweather (Serif)

Les Pynt, av Torgrim Eggen

Merriweather er den bedre lesbare versjonen av Playfair Display. Mens Playfair er en god Bodoni-erstatning er Merriweather mykere i kantene og egner seg bedre i brødtekster. Den har også en stor variasjonsmulighet i tykkelser. En god lesbar mobiltekst får du ved å kjøre Merriweather i font-size: 16px og line-height 20px. Test og se.

Prøv uansett alltid å holde deg til 40–60 tegn i bredden for god lesbarhet.

— Ligner på Palatino og Stone Serif
— Perfekt til brødtekst på retinaskjerm

 


5. Nothing You Could Do (Håndskrift)

Håndskrift

For å i større grad få brukeren til å forstå hvor han skal klikke neste gang, har jeg god erfaring med å bruke håndskrevne hjelpetekster og piler i samme stil. Da er Nothing You Could Do en fin font å bruke.
Men husk at slike hjelpetekster blir irriterende om de blir der for alltid. Og ikke bruk denne fonten som tittel eller brødtekst på nettsiden din, er du snill.

— Ligner på håndskrift
— Perfekt til hjelpetekster

 


6. Crete Round (Slab Serif)

Crete Round

Det er ikke så ofte jeg bruker Slab-fonter for tiden, men jeg måtte ha med en i listen, og Crete Round løfter alltid et nettsted. Slabfontene fungerer godt i blant annet lister, fordi linjene i skrifttypen gjør en liste oversiktlig.
Husk også at flere av fontene over har slab-versjoner, som kan brukes sammen med serif eller grotesk-versjonen.

— Ligner på Museo Slab
— Perfekt til lister

 


7. Montserrat (Grotesk/sans-serif)

Montserrat

Til slutt: Fonten som lett kan beskrives som favorittfonten min: Montserrat. Den er så tro mot grunnformene, samtidig som den er så moderne. Bakdelen med fonten er derimot at den kun er tilgjengelig i regular og bold … noe som egentlig gjør den uegnet til brødtekster – som trenger kursiv.
Samtidig er det enkelheten som gjør den så fristende å bruke, fordi den tvinger meg til å holde det enkelt.
Last ned Montserrat og begynn å bruke. Gjerne som en all-caps-tittel i hvitt på en frisk bakgrunnsfarge.

— Ligner på Gotham og Avenir
— Perfekt til en enkel burgermeny på mobil

 


Hva er din favoritt Google Webfont?

Forfatter: Johannes

Grunnlegger og seniordesigner i Brainify, med 21 års erfaring som designer, konseptutvikler, prosjektleder, forretningutvikler og innholdsprodusent for kunder som Vårt Land, Redd Barna, Posten, Aker Solutions og Norad i tillegg til mange mindre bedrifter og frivillige organisasjoner.

Legg igjen en kommentar

Fyll inn i feltene under, eller klikk på et ikon for å logge inn:

WordPress.com-logo

Du kommenterer med bruk av din WordPress.com konto. Logg ut / Endre )

Twitter-bilde

Du kommenterer med bruk av din Twitter konto. Logg ut / Endre )

Facebookbilde

Du kommenterer med bruk av din Facebook konto. Logg ut / Endre )

Google+-bilde

Du kommenterer med bruk av din Google+ konto. Logg ut / Endre )

Kobler til %s