Praktisk e-publisering for alle

Nr 4 ndash desember 2014

F O N T E R

2

Webfonter Side 4

5 tips for god lesbarhet paring skjerm Side 6

Serif og Sans serif ndash 10 kombinasjoner Side 7

7 sikre fonter for presentasjoner Side 8

10 alternativer til Comic Sans Side 10

Lag en font av haringndskriften din Side 11

Kontrast Side 12

Helvetica ndash alternativer Side 14

Gammeldagse skrivemaskinskrifter Side 16

Smaringplukk Side 22

Hvilken font er du

Knipingsperring med letter-space

Typografers foretrukne fonter

Typografiens historie paring 5 minutter

Fonttrender for 2015

3

kreativweb er en del av TransOnlines spraringk- og e-publiseringsblogg

Redaktoslashr Solveig Hansen soalveighansentransonlineno

Forsidebilde iStock

Artiklene maring ikke viderepubliseres uten tillatelse

Nr 4 ndash desember 2014

kreativweb nr 1 Retro er in

Det er noe med meg og gamle skrivemaskin-skrifter Jeg elsker svarthvitt-filmer av eldre dato der journalister med hatt og sneip hakker loslashs paring 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 paring nettsiden Med font-face har vi faringtt mulig-het til aring bygge inn fonter som vi tidligere maringtte fremstille som bilder Retroskrifter og font-face + Google Fonts er to av trendene for 2015 Google Fonts har naring over 600 gratis skrifter En annen popu-laeligr skriftleverandoslashr er FontSquirrel Eller proslashv Letterhead Fonts hvis du liker design fra 1930- 40- 50- eller 60-tallet Titusenvis av fonter gjoslashr det ikke akkurat lett aring velge Hvilke skrifter passer sammen I dette nummeret faringr du noen vanlige kombi-nasjoner Du faringr ogsaring alternativer til Comic Sans ndash noe for din neste presentasjon God lesning

Solveig Hansen redaktoslashr

PS Font skrift og skrifttype brukes om hverandre i dette magasinet

2

Webfonter Side 4

5 tips for god lesbarhet paring skjerm Side 6

Serif og Sans serif ndash 10 kombinasjoner Side 7

7 sikre fonter for presentasjoner Side 8

10 alternativer til Comic Sans Side 10

Lag en font av haringndskriften din Side 11

Kontrast Side 12

Helvetica ndash alternativer Side 14

Gammeldagse skrivemaskinskrifter Side 16

Smaringplukk Side 22

Hvilken font er du

Knipingsperring med letter-space

Typografers foretrukne fonter

Typografiens historie paring 5 minutter

Fonttrender for 2015

3

kreativweb er en del av TransOnlines spraringk- og e-publiseringsblogg

Redaktoslashr Solveig Hansen soalveighansentransonlineno

Forsidebilde iStock

Artiklene maring ikke viderepubliseres uten tillatelse

Nr 4 ndash desember 2014

kreativweb nr 1 Retro er in

Det er noe med meg og gamle skrivemaskin-skrifter Jeg elsker svarthvitt-filmer av eldre dato der journalister med hatt og sneip hakker loslashs paring 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 paring nettsiden Med font-face har vi faringtt mulig-het til aring bygge inn fonter som vi tidligere maringtte fremstille som bilder Retroskrifter og font-face + Google Fonts er to av trendene for 2015 Google Fonts har naring over 600 gratis skrifter En annen popu-laeligr skriftleverandoslashr er FontSquirrel Eller proslashv Letterhead Fonts hvis du liker design fra 1930- 40- 50- eller 60-tallet Titusenvis av fonter gjoslashr det ikke akkurat lett aring velge Hvilke skrifter passer sammen I dette nummeret faringr du noen vanlige kombi-nasjoner Du faringr ogsaring alternativer til Comic Sans ndash noe for din neste presentasjon God lesning

Solveig Hansen redaktoslashr

PS Font skrift og skrifttype brukes om hverandre i dette magasinet

3

kreativweb er en del av TransOnlines spraringk- og e-publiseringsblogg

Redaktoslashr Solveig Hansen soalveighansentransonlineno

Forsidebilde iStock

Artiklene maring ikke viderepubliseres uten tillatelse

Nr 4 ndash desember 2014

kreativweb nr 1 Retro er in

Det er noe med meg og gamle skrivemaskin-skrifter Jeg elsker svarthvitt-filmer av eldre dato der journalister med hatt og sneip hakker loslashs paring 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 paring nettsiden Med font-face har vi faringtt mulig-het til aring bygge inn fonter som vi tidligere maringtte fremstille som bilder Retroskrifter og font-face + Google Fonts er to av trendene for 2015 Google Fonts har naring over 600 gratis skrifter En annen popu-laeligr skriftleverandoslashr er FontSquirrel Eller proslashv Letterhead Fonts hvis du liker design fra 1930- 40- 50- eller 60-tallet Titusenvis av fonter gjoslashr det ikke akkurat lett aring velge Hvilke skrifter passer sammen I dette nummeret faringr du noen vanlige kombi-nasjoner Du faringr ogsaring alternativer til Comic Sans ndash noe for din neste presentasjon God lesning

Solveig Hansen redaktoslashr

PS Font skrift og skrifttype brukes om hverandre i dette magasinet

4

Utvalget blir stadig stoslashrre

Muligheten font-face gir til aring bygge inn fonter paring nettsiden gjoslashr at du ikke lenger er begrenset til de sikre fontene som finnes paring de fleste datamaskiner Du kan koble nettsiden til fontfiler paring webserveren slik at nettleseren laster ned fontene du har defi-nert i CSS-filen sammen med nettsiden Dette er viktigere enn foslashr fordi nettbrett smarttelefoner og PC-er kan ha forskjellige systemfonter Vaeligr imidlertid oppmerksom paring at altfor mange innebygde skriftfiler kan gjoslashre nettsiden tregere Webfonter er optimalisert med tanke paring leselighet og kontrast paring skjermen De kan for eksempel vaeligre aringpne og ha stoslashrre x-hoslashyde Ogsaring vinklene og kurvene kan vaeligre annerledes

Websikre fonterHvis du ikke bygger inn fonter maring fontene du bruker paring nettsiden ogsaring vaeligre instal-lert paring leserens datamaskin for at teksten skal vises med riktig skrift Windows og Mac har sine egne standardfonter som finnes paring alle datamaskiner De kalles for websikre fonter Typiske websikre fonter som Arial Verdana og Tahoma er hensikts-messige 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 TahomaGeneva Comic Sans Trebuchet Courier New

Typografisk anatomi

Aringpen og lukket font

5

font-face Med CSS-funksjonen font-face kan du fri deg fra de websikre fontene og bygge inn de skrifttypene du vil paring nettsidene dine og leserne trenger ikke aring ha disse skriftene installert Du lagrer dem paring 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(WebFonteot)

src url(WebFonteotiefix)

format(embedded-opentype)

url(WebFontwoff)

format(woff)

url(WebFontttf)

format(truetype)

url(WebFontsvgwebfont)

format(svg)

font-face stoslashttes av Chrome Firefox Internet Explorer Opera og Safari Fontformater WOFFWOFF2 (Web Open Font Format) er raskere enn for eksempel OTF (OpenType) og TTF (TrueType) og er i ferd med aring bli standarden for alle nettlesere SVGSVGZ (Scalable Vector Graphics (Zip)) er et vektorformat Det gir mindre fil-stoslashrrelse noe som gjoslashr formatet ypperlig for mobilbruk Stoslashttes ikke av Internet Explorer og Firefox EOT (Embedded Open Type) stoslashttes bare av eldre versjoner av Internet Explorer OTFTTF har ofte vaeligrt ulovlig kopiert og dette var en av grunnene til at WOFF ble utviklet Stoslashttes av alle nettlesere Les mer om font-face og hvilke nettlesere som stoslashtter hva paring w3schoolscom

FontSquirrel som har et godt utvalg av gratis skrifter har en tjeneste som gene-rerer CSS-koden for deg I stedet for aring laste opp fontene til din egen server kan du la nettsiden hente dem fra eksterne skriftleverandoslashrer for eksempel abonnementstjenesten TypeKit eller Google Fonts Google Fonts har per i dag over 600 gratis webfonter

Lisenser og leverandoslashrer Lisensene og prisene kan vaeligre forskjellige for webfonter og trykkfonter Lisensvilkaringr-ene definerer tillatte bruksomraringder for en font Her er noen fontleverandoslashrer FontSquirrel Fontscom MyFonts Fontspring Google Fonts UrbanFonts DaFont Laeligr mer fra eksperter 15 eksperttips for valg av webfonter En font er bare en font eller Bouvet garingr metodisk til verks naringr de skal velge skrift-typer

5

font-face Med CSS-funksjonen font-face kan du fri deg fra de websikre fontene og bygge inn de skrifttypene du vil paring nettsidene dine og leserne trenger ikke aring ha disse skriftene installert Du lagrer dem paring 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(WebFonteot)

src url(WebFonteotiefix)

format(embedded-opentype)

url(WebFontwoff)

format(woff)

url(WebFontttf)

format(truetype)

url(WebFontsvgwebfont)

format(svg)

font-face stoslashttes av Chrome Firefox Internet Explorer Opera og Safari Fontformater WOFFWOFF2 (Web Open Font Format) er raskere enn for eksempel OTF (OpenType) og TTF (TrueType) og er i ferd med aring bli standarden for alle nettlesere SVGSVGZ (Scalable Vector Graphics (Zip)) er et vektorformat Det gir mindre fil-stoslashrrelse noe som gjoslashr formatet ypperlig for mobilbruk Stoslashttes ikke av Internet Explorer og Firefox EOT (Embedded Open Type) stoslashttes bare av eldre versjoner av Internet Explorer OTFTTF har ofte vaeligrt ulovlig kopiert og dette var en av grunnene til at WOFF ble utviklet Stoslashttes av alle nettlesere Les mer om font-face og hvilke nettlesere som stoslashtter hva paring w3schoolscom

FontSquirrel som har et godt utvalg av gratis skrifter har en tjeneste som gene-rerer CSS-koden for deg I stedet for aring laste opp fontene til din egen server kan du la nettsiden hente dem fra eksterne skriftleverandoslashrer for eksempel abonnementstjenesten TypeKit eller Google Fonts Google Fonts har per i dag over 600 gratis webfonter

Lisenser og leverandoslashrer Lisensene og prisene kan vaeligre forskjellige for webfonter og trykkfonter Lisensvilkaringr-ene definerer tillatte bruksomraringder for en font Her er noen fontleverandoslashrer FontSquirrel Fontscom MyFonts Fontspring Google Fonts UrbanFonts DaFont Laeligr mer fra eksperter 15 eksperttips for valg av webfonter En font er bare en font eller Bouvet garingr metodisk til verks naringr de skal velge skrift-typer

6

❶ Serif og sans serif Det er lettere aring lese seriffloslashse bokstaver paring skjerm spesielt

ved smaring skriftstoslashrrelser 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 vaeligr redd for hvite flater

❹ Venstrejuster teksten Blokkjustering (rett venstre- og hoslashyremarg) kan skape

store ordmellomrom Teksten paring leserens skjerm ser ikke noslashdvendigvis ut som paring din

❺ God kontrast Velg lys noslashytral bakgrunn for moslashrk skrift og omvendt

Unngaring tungt moslashnster som generell bakgrunn for tekst Hvis du vil bruke en urolig bakgrunn kan du eventuelt skrive inn teksten i en lys boks opparing bakgrunnen

Les mer Typografi paring web

7

Hvilke skrifttyper passer sammen i overskriften og broslashdteksten En tommelfingerregel er aring velge en seriff-skrift og en skrift uten seriffer for aring

❶ Georgia og Verdana

❷ Helvetica Bold og Garamond

❸ Bodoni og Futura

❹ Franklin Gothic og Baskerville

❺ Caslon Bold og Univers Light

skape kontrast og eksperimentere med stoslashrrelse tykkelse osv

Her er noen tips

❻ Frutiger Bold og Minion

❼ Minion Bold og Myriad

❽ Gill Sans Bold og Garamond

❾ Clarendon og Trade Gothic

❿ Avenir og Minion

Kilde Stepto amp Son Design

8

Du kjoslashrer ofte presentasjoner og vil holde deg til sikre fonter du vet fin-nes paring alle datamaskiner Hvilke fonter skal du velge og hvilke garingr godt sam-men Lag en liste over aktuelle fonter og kombiner dem for eksempel serif og sans serif Eller kanskje du bare vil bruke eacuten skrifttype Skap kontrast ved aring bruke forskjellige skriftattributter Eksempler paring standardskrifter

Book Antiqua Century Gothic Franklin Gothic Garamond Georgia Palatino Linotype Verdana

GeorgiaGeorgia

Lorem ipsum dolor

Lorem ipsum dolor sit amet omnesque officiis imperdiet ea sea Ea natum tem-por partiendo per ius omnis eruditi ex an Century Gothic Century Gothic

Lorem ipsum dolor

Lorem ipsum dolor sit amet omnes-

que officiis imperdiet ea sea Ea na-

tum tempor partiendo per ius omnis

eruditi ex an GaramondGaramond

Lorem ipsum dolor

Lorem ipsum dolor sit amet omnesque officiis imperdiet ea sea Ea natum tem-por partiendo per ius omnis eruditi ex an

Illustrasjon twobeeat FreeDigitalPhotosnet

9

Test fontkombinasjoner med

The Web Font Combinator

GeorgiaVerdana

Lorem ipsum dolor

Lorem ipsum dolor sit amet om-

nesque officiis imperdiet ea sea

Ea natum tempor partiendo per

ius omnis eruditi ex an Franklin Gothic Book Antiqua

Lorem ipsum dolor

Lorem ipsum dolor sit amet omnesque officiis imperdiet ea sea Ea natum tem-por partiendo per ius omnis eruditi ex an Palatino Linotype Century Gothic

Lorem ipsum dolor

Lorem ipsum dolor sit amet omnes-

que officiis imperdiet ea sea Ea na-

tum tempor partiendo per ius om-

nis eruditi ex an

GaramondVerdana

Lorem ipsum dolor

Lorem ipsum dolor sit amet om-

nesque officiis imperdiet ea sea

Ea natum tempor partiendo per

ius omnis eruditi ex an Franklin Gothic Garamond

Lorem ipsum dolor

Lorem ipsum dolor sit amet omnes-que officiis imperdiet ea sea Ea natum tempor partiendo per ius omnis eru-diti ex an

Kilde Nick Smith Advance Your Slides ndash End Bad PowerPoint

10

Hvis du googler most hated font er det Comic Sans som topper soslashke-resultatene Comic Sans ble opprin-nelig laget for aring imitere tegneserie-skrift for programvaren Microsoft Bob men mange bruker den i pre-sentasjoner invitasjoner og andre dokumenter der de vil ha et ufor-melt haringndskriftpreg ndash sist sett i et nobelforedrag om varingr fantastiske hjerne Pen er den ikke Det finnes mange andre skrifttyper som er bedre egnet Her er ti som kan lastes ned gratis

11

Lag din egen font av haringndskriften din paring

PaintFox Det er bare aring skrive ut en mal

der du fyller ut de tegnene du vil ha med

skanne den inn og laste den opp saring faringr

du et fontsett i loslashpet av sekunder Det er

toslashft med sin egen font i fontlisten

The quick brown fox-setningen brukes

til aring vise hvordan tegnene i en font ser

ut Den inneholder alle bokstavene i det

engelske alfabetet

Det kalles for et pangram

12

Illustrasjon Stuart Miles FreeDigitalPhotosnet

13

Den gylne regelen for kontrast er at elementene maring vaeligre helt forskjel-lige ndash eller de maring vaeligre 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 kon-trast Det gjoslashr ikke svart og moslashrke-brunt heller Kontrast gjoslashr det lettere aring lese teks-ten Leserne leser ikke noslashdvendigvis alt linje for linje De skanner siden og du kan bruke kontrast til aring lede leseren gjennom innholdet og frem-heve det som er viktig

❶ Skriftstoslashrrelse

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 ogsaring 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 hoslashyden for titler og over-skrifter

❷ Serif i overskrift sans serif i broslashdtekst (eller omvendt)

Georgia er en serif-skrift Arial er en sans serif-skrift

❸ Farge

Kontrastfarger kan brukes til aring 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 aring vise at noe er deaktivert eller klikket paring Uklikket lenke | Klikket

❹ Storesmaring bokstaver

Naringr du bruker samme font for overskrift og broslashdtekst kan du for eksempel skrive overskriften med store bokstaver Unngaring aring bruke bare store bokstaver i broslashd-teksten fordi det gjoslashr teksten mindre leservennlig

❺ Understrek = lenke

God designskikk tilsier at understreking er forbeholdt lenker Bruk kursiv for aring frem-heve noe Men Det er strengt tatt ikke noslashdvendig aring understreke lenker Du kan bruke en kontrastfarge i stedet

❻ Skrifttykkelse

Fet skrift fremhever ogsaring tekst men hvis du bruker fet skrift paring store blokker med tekst forsvinner baringde fremhevings-effekten kontrasten og leseligheten

14

Helvetica fikk sin egen dokumentar i anledning

50-aringrsjubileet i 2007

15

Sveitsergrotesken Helvetica (1957) er en av verdens mest brukte

fonter Den er stilren allsidig lettleselig mye brukt i firmalogoer og

det offentlige rom ndash og saring noslashytral at den ikke trekker oppmerksom-

heten 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 Konfoslashderasjonen Sveits

Hvis du oslashnsker 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 paring Creative Bloq

14

Helvetica fikk sin egen dokumentar i anledning

50-aringrsjubileet i 2007

15

Sveitsergrotesken Helvetica (1957) er en av verdens mest brukte

fonter Den er stilren allsidig lettleselig mye brukt i firmalogoer og

det offentlige rom ndash og saring noslashytral at den ikke trekker oppmerksom-

heten 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 Konfoslashderasjonen Sveits

Hvis du oslashnsker 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 paring Creative Bloq

15

Sveitsergrotesken Helvetica (1957) er en av verdens mest brukte

fonter Den er stilren allsidig lettleselig mye brukt i firmalogoer og

det offentlige rom ndash og saring noslashytral at den ikke trekker oppmerksom-

heten 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 Konfoslashderasjonen Sveits

Hvis du oslashnsker 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 paring Creative Bloq

16

Bilde iStock

17

Kingthings

Typewriter New Roman

Lorem ipsum dolor sit

amet cum in tantas

partem complectitur

in iudico regione

vis Te menandri per-

petua mel Cum nobis

adolescens expetendis

no Oporteat ocur-

reret temporibus mel

an

My Old Remington

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

Trypewriter

Se flere skrivemaskinskrifter paring FontSquirrel

18

Creative Bloq har laget en liste over flotte retroskrifter

inkludert Zebrazil

19

og graffitiskrifter

inkludert Stylin BRK

20

Ekstra ekstra Flotte fonter i gammel stil Kilde lisamoorefieldcom

21

Art Deco 1930 1940 1950 1960 paring Letterhead Fonts

22

Knipingsperring

Vil du ha stoslashrre eller mindre mellomrom mellom tegnene i overskriften paring nett-siden Juster avstanden med letter-spacing i CSS-filen Eksempler

h1 letter-spacing 2px

h2 letter-spacing -3px CSS letter-spacing Property (W3Schools)

Improve the Look of Your Headlines Using Letter-Spacing

Typografers foretrukne fonter

Hvis du bare kunne velge aringtte skrift-typer hvilke ville du plukke ut Maga-sinet 8 Faces har spurt typografier

Slik ser topplisten ut

Georgia Gotham FF Scala Futura Gill Sans Garamond Caslon (Adobe Caslon) Akzidenz Grotesk Alternate Gothic Baskerville Helvetica

Test en font i forskjellige stoslashrrelser paring Google Fonts

Hvilken font er du

Helvetica Comic Sans

Ta quizen

Typografiens historie med Ben Barrett-Forrest paring 5 minutter Artig

23

Les mer om typografi og fonter

Typografino (norsk)

FontBlogg (norsk)

Fontology

Choosing web fonts 15 expert tips

Typography rules and terms that every

designer must know

Mest populaeligre webfonter paring FontSquirrel

Haringndskrift flatt hipster retro Noen fonttrender for 2015

Kilde Presentation Panda

24

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 its really intensive and

passionate you know and it might

work

ndash Massimo Vingelli (italiensk designer som ogsaring samarbeidet med

Gary Hustwit om Helvetica-dokumentaren)

kreativweb TransOnlines spraringk- og e-publiseringsblogg