#kreativweb 4 2014

.

Praktisk e-publisering for alle Nr. 4 – desember 2014

FONTER

Webfonter Side 4

5 tips for god lesbarhet på skjerm Side 6

Serif og Sans serif – 10 kombinasjoner Side 7

7 "sikre" fonter for presentasjoner Side 8

10 alternativer til Comic Sans Side 10

Lag en font av håndskriften din Side 11

Kontrast Side 12

Helvetica – alternativer Side 14

Gammeldagse skrivemaskinskrifter Side 16

Småplukk Side 22: Hvilken font er du?

Kniping/sperring med "letter-space" Typografers foretrukne fonter Typografiens historie på 5 minutter Fonttrender for 2015

2

kreativweb nr. 1 Nr. 4 – desember 2014

Retro er in.

Det er noe med meg og gamle skrivemaskinskrifter. Jeg elsker svart/hvitt-filmer av eldre dato der journalister med hatt og sneip hakker løs på Underwood-ene sine.

Courier New blir ikke helt det samme, men det var lenge den eneste fonten som fantes hvis vi ville ha en skrivemaskinskrift på nettsiden. Med @font-face har vi fått mulighet til å bygge inn fonter som vi tidligere måtte fremstille som bilder.

Retroskrifter og @font-face + Google Fonts er to av trendene for 2015. Google Fonts har nå over 600 gratis skrifter. En annen populær skriftleverandør er FontSquirrel. Eller prøv Letterhead Fonts hvis du liker design fra 1930-, 40-, 50- eller 60-tallet.

Titusenvis av fonter gjør det ikke akkurat lett å velge. Hvilke skrifter passer sammen?

I dette nummeret får du noen vanlige kombinasjoner. Du får også alternativer til Comic Sans – noe for din neste presentasjon?

God lesning!

Solveig Hansen redaktør PS! "Font", "skrift" og "skrifttype" brukes om hverandre i dette magasinet.

#kreativweb er en del av TransOnlines språk- og e-publiseringsblogg Redaktør: Solveig Hansen: soalveig.hansen@transonline.no Forsidebilde: iStock Artiklene må ikke viderepubliseres uten tillatelse.

3

Utvalget blir stadig større.

Typografisk anatomi

Websikre fonter

Åpen og lukket font

Muligheten @font-face gir til å bygge inn fonter på nettsiden, gjør at du ikke lenger er begrenset til de "sikre" fontene som finnes på de fleste datamaskiner. Du kan koble nettsiden til fontfiler på webserveren slik at nettleseren laster ned fontene du har definert i CSS-filen, sammen med nettsiden.

Dette er viktigere enn før fordi nettbrett, smarttelefoner og PC-er kan ha forskjellige systemfonter. Vær imidlertid oppmerksom på at altfor mange innebygde skriftfiler kan gjøre nettsiden tregere.

Webfonter er optimalisert med tanke på leselighet og kontrast på skjermen. De kan for eksempel være åpne og ha større xhøyde. Også vinklene og kurvene kan være annerledes.

4

Hvis du ikke bygger inn fonter, må fontene du bruker på nettsiden, også være installert på leserens datamaskin for at teksten skal vises med riktig skrift. Windows og Mac har sine egne standardfonter som finnes på alle datamaskiner. De kalles for websikre fonter. Typiske websikre fonter som Arial, Verdana og Tahoma er hensiktsmessige nok hvis du ikke har spesielle designbehov.

Vanlige webfonter: Arial / Mac: Helvetica Times New Roman / Times Verdana Georgia Impact Lucida Console / Monaco Lucida Sans / Lucida Grande Palatino Tahoma/Geneva Comic Sans Trebuchet Courier New

@font-face Med CSS-funksjonen @font-face kan du fri deg fra de websikre fontene og bygge inn de skrifttypene du vil på nettsidene dine, og leserne trenger ikke å ha disse skriftene installert. Du lagrer dem på webserveren, og de lastes som nevnt inn samtidig med nettsiden.

Koden i CSS-filen ser omtrent slik ut: @font-face{ font-family: 'MyWebFont'; src: url('WebFont.eot'); src: url('WebFont.eot?#iefix') format('embedded-opentype'), url('WebFont.woff') format('woff'), url('WebFont.ttf') format('truetype'), url('WebFont.svg#webfont') format('svg'); }

@font-face støttes av Chrome, Firefox, Internet Explorer, Opera og Safari.

Fontformater: WOFF/WOFF2 (Web Open Font Format) er raskere enn for eksempel OTF (OpenType) og TTF (TrueType) og er i ferd med å bli standarden for alle nettlesere.

SVG/SVGZ (Scalable Vector Graphics (Zip)) er et vektorformat. Det gir mindre filstørrelse, noe som gjør formatet ypperlig for mobilbruk. Støttes ikke av Internet Explorer og Firefox.

EOT (Embedded Open Type) støttes bare av eldre versjoner av Internet Explorer.

OTF/TTF har ofte vært ulovlig kopiert, og dette var en av grunnene til at WOFF ble utviklet. Støttes av alle nettlesere.

Les mer om @font-face og hvilke nettlesere som støtter hva, på w3schools.com.

FontSquirrel, som har et godt utvalg av gratis skrifter, har en tjeneste som genererer CSS-koden for deg.

I stedet for å laste opp fontene til din egen server, kan du la nettsiden hente dem fra eksterne skriftleverandører, for eksempel abonnementstjenesten TypeKit eller Google Fonts. Google Fonts har per i dag over 600 gratis webfonter.

Lisenser og leverandører Lisensene og prisene kan være forskjellige for webfonter og trykkfonter. Lisensvilkårene definerer tillatte bruksområder for en font. Her er noen fontleverandører: FontSquirrel Fonts.com MyFonts Fontspring Google Fonts UrbanFonts DaFont Lær mer fra eksperter: 15 eksperttips for valg av webfonter En font er bare en font, eller? Bouvet går metodisk til verks når de skal velge skrifttyper.

5

❶ Serif og sans serif Det er lettere å lese seriffløse bokstaver på skjerm, spesielt ved små skriftstørrelser. Bruk seriffskrift i overskrifter for kontrastens skyld.

❷ Ikke bruk for mange skrifttyper Bruk gjerne en hel skriftfamilie med mange varianter: fet, kursiv, tynn, tykk, script osv.

❸ Bruk luft mellom linjene Og rundt teksten. Ikke vær redd for hvite flater.

❹ Venstrejuster teksten Blokkjustering (rett venstre- og høyremarg) kan skape store ordmellomrom. Teksten på leserens skjerm ser ikke nødvendigvis ut som på din.

❺ God kontrast Velg lys, nøytral bakgrunn for mørk skrift, og omvendt.

Unngå tungt mønster som generell bakgrunn for tekst. Hvis du vil bruke en "urolig" bakgrunn, kan du eventuelt skrive inn teksten i en lys boks oppå bakgrunnen.

Les mer: Typografi på web

6

Hvilke skrifttyper passer sammen i overskriften og brødteksten? En tommelfingerregel er å velge en seriffskrift og en skrift uten seriffer for å

skape kontrast, og eksperimentere med størrelse, tykkelse osv.

❶ Georgia og Verdana

❻ Frutiger Bold og Minion

❷ Helvetica Bold og Garamond

❼ Minion Bold og Myriad

❸ Bodoni og Futura

❽ Gill Sans Bold og Garamond

❹ Franklin Gothic og Baskerville

❾ Clarendon og Trade Gothic

❺ Caslon Bold og Univers Light

❿ Avenir og Minion

Her er noen tips:

Kilde: Stepto & Son Design 7

Du kjører ofte presentasjoner og vil holde deg til "sikre" fonter du vet finnes på alle datamaskiner. Hvilke fonter skal du velge, og hvilke går godt sammen?

Lag en liste over aktuelle fonter, og kombiner dem, for eksempel serif og sans serif. Eller kanskje du bare vil bruke én skrifttype? Skap kontrast ved å bruke forskjellige skriftattributter.

Eksempler på standardskrifter: Book Antiqua Century Gothic Franklin Gothic Garamond Georgia Palatino Linotype Verdana Illustrasjon: twobeeat, FreeDigitalPhotos.net

8

Georgia/Georgia

Lorem ipsum dolor Lorem ipsum dolor sit amet, omnesque officiis imperdiet ea sea. Ea natum tempor partiendo per, ius omnis eruditi ex, an.

Century Gothic / Century Gothic

Lorem ipsum dolor Lorem ipsum dolor sit amet, omnesque officiis imperdiet ea sea. Ea natum tempor partiendo per, ius omnis eruditi ex, an.

Garamond/Garamond

Lorem ipsum dolor Lorem ipsum dolor sit amet, omnesque officiis imperdiet ea sea. Ea natum tempor partiendo per, ius omnis eruditi ex, an.

Georgia/Verdana

Lorem ipsum dolor

Garamond/Verdana

Lorem ipsum dolor

Lorem ipsum dolor sit amet, omnesque officiis imperdiet ea sea.

Ea natum tempor partiendo per, ius omnis eruditi ex, an.

Lorem ipsum dolor sit amet, omnesque officiis imperdiet ea sea.

Ea natum tempor partiendo per, ius omnis eruditi ex, an.

Franklin Gothic / Book Antiqua

Franklin Gothic / Garamond

Lorem ipsum dolor

Lorem ipsum dolor

Lorem ipsum dolor sit amet, omnesque officiis imperdiet ea sea. Ea natum tempor partiendo per, ius omnis eruditi ex, an.

Lorem ipsum dolor sit amet, omnesque officiis imperdiet ea sea. Ea natum tempor partiendo per, ius omnis eruditi ex, an.

Palatino Linotype / Century Gothic

Lorem ipsum dolor Lorem ipsum dolor sit amet, omnesque officiis imperdiet ea sea. Ea natum tempor partiendo per, ius omnis eruditi ex, an.

Kilde: Nick Smith, Advance Your Slides – End Bad PowerPoint

Test fontkombinasjoner med The Web Font Combinator 9

Hvis du googler "most hated font", er det Comic Sans som topper søkeresultatene. Comic Sans ble opprinnelig laget for å imitere tegneserieskrift for programvaren Microsoft Bob, men mange bruker den i presentasjoner, invitasjoner og andre dokumenter der de vil ha et uformelt "håndskriftpreg" – sist sett i et nobelforedrag om vår fantastiske hjerne.

Pen er den ikke. Det finnes mange andre skrifttyper som er bedre egnet. Her er ti som kan lastes ned gratis.

10

Lag din egen font av håndskriften din på PaintFox. Det er bare å skrive ut en mal der du fyller ut de tegnene du vil ha med, skanne den inn og laste den opp, så får du et fontsett i løpet av sekunder. Det er tøft med sin egen font i fontlisten.

"The quick brown fox"-setningen brukes til å vise hvordan tegnene i en font ser ut. Den inneholder alle bokstavene i det engelske alfabetet.

Det kalles for et pangram.

11

Illustrasjon: Stuart Miles, FreeDigitalPhotos.net

12

❷ Serif i overskrift, sans serif i brødtekst (eller omvendt) Georgia er en serif-skrift.

Arial er en sans serif-skrift.

Den gylne regelen for kontrast er at elementene må være helt forskjellige – eller de må være helt like. Hvis noe ser nesten likt ut, ser det ut som om du har bommet litt. En 10-punkts og en 11-punkts skrift danner ingen kontrast. Det gjør ikke svart og mørkebrunt heller.

Kontrast gjør det lettere å lese teksten. Leserne leser ikke nødvendigvis alt linje for linje. De skanner siden, og du kan bruke kontrast til å lede leseren gjennom innholdet og fremheve det som er viktig. ❶ Skriftstørrelse

Dette er en overskrift som vises godt Lorem ipsum dolor sit amet, usu ubique scripta definitiones an, mutat iuvaret in sea. Vocent persecuti cu mea, aliquip detraxit ne cum. Sit no novum luptatum posidonium, paulo sanctus ut.

Liten skrift her skaper også kontrast

Dette er en overskrift Lorem ipsum dolor sit amet, usu ubique scripta definitiones an, mutat iuvaret in sea. Vocent persecuti cu mea, aliquip detraxit ne cum. Sit no novum luptatum posidonium, paulo sanctus ut.

Dette er en overskrift Strekk bokstavene i høyden for titler og overskrifter.

❸ Farge Kontrastfarger kan brukes til å skille mellom lenker og annen tekst og trekke leserens oppmerksomhet mot et viktig punkt. Dette er en lenke.

Viktig! Les denne meldingen.

Ton ned tekstfargen for å vise at noe er deaktivert eller klikket på: Uklikket lenke | Klikket

❹ Store/små bokstaver Når du bruker samme font for overskrift og brødtekst, kan du for eksempel skrive overskriften med store bokstaver. Unngå å bruke bare store bokstaver i brødteksten, fordi det gjør teksten mindre leservennlig.

❺ Understrek = lenke God designskikk tilsier at understreking er forbeholdt lenker. Bruk kursiv for å fremheve noe. Men: Det er strengt tatt ikke nødvendig å understreke lenker. Du kan bruke en kontrastfarge i stedet.

❻ Skrifttykkelse Fet skrift fremhever også tekst, men hvis du bruker fet skrift på store blokker med tekst, forsvinner både fremhevingseffekten, kontrasten og leseligheten.

13

Helvetica fikk sin egen dokumentar i anledning 50-책rsjubileet i 2007.

14

Sveitsergrotesken Helvetica (1957) er en av verdens mest brukte fonter. Den er stilren, allsidig, lettleselig, mye brukt i firmalogoer og det offentlige rom – og så nøytral at den ikke trekker oppmerksomheten bort fra budskapet den skal kommunisere.

Opprinnelig het den Neue Haas Grotesk, men navnet ble endret til Helvetica, etter Confoederatio Helvetica (derav CH), som er det latinske navnet for Konføderasjonen Sveits.

Hvis du ønsker en ren sans serif-skrift med litt mer personlighet, kan du for eksempel velge Akzidenz Grotesk ("Helveticas bestefar" fra 1898), den moderne Proxima Nova (2005) eller noen av de andre alternativene til Helvetica på Creative Bloq.

15

16 Bilde: iStock

Se flere skrivemaskinskrifter p책 FontSquirrel.

Kingthings Trypewriter

Typewriter New Roman.

My Old Remington.

Lorem ipsum dolor sit amet, cum in tantas partem complectitur, in iudico regione vis. Te menandri perpetua mel. Cum nobis adolescens expetendis no. Oporteat ocurreret temporibus mel an.

Lorem ipsum dolor sit amet, munere percipitur quo ut, ad sea sint labitur neglegentur, stet lorem liberavisse ne ius.

17

Creative Bloq har laget en liste over flotte retroskrifter, inkludert Zebrazil ...

18

... og graffitiskrifter, inkludert Stylin' BRK.

19

Ekstra, ekstra! Flotte fonter i gammel stil. Kilde: lisamoorefield.com 20

Art Deco, 1930, 1940, 1950, 1960 p책 Letterhead Fonts 21

Test en font i forskjellige størrelser på Google Fonts.

Hvilken font er du?

Helvetica? Comic Sans?

Ta quizen

Kniping/sperring

Typografers foretrukne fonter

Vil du ha større eller mindre mellomrom mellom tegnene i overskriften på nettsiden? Juster avstanden med "letterspacing" i CSS-filen. Eksempler:

Hvis du bare kunne velge åtte skrifttyper, hvilke ville du plukke ut? Magasinet 8 Faces har spurt typografier.

h1 { letter-spacing: 2px; } h2 { letter-spacing: -3px; } CSS letter-spacing Property (W3Schools) Improve the Look of Your Headlines Using Letter-Spacing

Slik ser topplisten ut: Georgia Gotham FF Scala Futura Gill Sans Garamond Caslon (Adobe Caslon) Akzidenz Grotesk Alternate Gothic Baskerville Helvetica

Typografiens historie med Ben Barrett-Forrest på 5 minutter. Artig.

22

Håndskrift, flatt, hipster, retro: Noen fonttrender for 2015.

Kilde: Presentation Panda

Les mer om typografi og fonter: Typografi.no (norsk) FontBlogg (norsk) Fontology Choosing web fonts: 15 expert tips Typography rules and terms that every designer must know Mest populære webfonter på FontSquirrel 23

"You can say, 'I love you,' in Helvetica.

And you can say it with Helvetica Extra Light if you want to be really fancy. Or you can say it with the Extra Bold if it's really intensive and passionate, you know, and it might work."

– Massimo Vingelli (italiensk designer, som også samarbeidet med Gary Hustwit om Helvetica-dokumentaren)

kreativweb

TransOnlines språk- og e-publiseringsblogg 24