#kreativweb 4 2014
Post on 07-Apr-2016
216 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
top related