Trendwatch 2013 – Fokus på typografi

I årets trendrapport har jeg valgt å fokusere på tre store overliggende trender, og gå mer i dybden på dem. I tillegg hopper jeg raskt innom noen andre visuelle trender med litt mer eye candy mot slutten av rapporten. Det hele er delt opp i fire bloggposter  — her er del to.

header fokus pa typografi Trendwatch 2013 Fokus på typografi

Det er en tydelig overliggende trend med økt fokus på typografi og lesbarhet. I vårt forrige Trendwatch var designkollega Astrid inne på trenden med lek med typografi. Siden den gang har det utviklet seg mot en trend der det fokuseres på større og mer lesbar typografi, og en enda mer utstrakt bruk av fonter tilpasset skjermbruk.

 

zeldman manifest Trendwatch 2013 Fokus på typografi

Jeffrey Zeldman var en av deignerne som gikk i spissen for å få mer fokus på typografi og lesbarhet da han la ut sitt web design manifest for rundt ett år siden. Det har skjedd ganske mye det siste året. Det er ikke lenge siden normalen var tekststørrelser helt nede i 11 og 10 pixler – nå beveger normalen for brødtekst seg opp mot 16 pixler.

 

pocket readability instapaper Trendwatch 2013 Fokus på typografi

Det er en ganske stor forskjell, men en nødvendig endring. Godt lesbar tekst i rause størrelser gjør nettsider mye mer brukervennlige, og jeg tror virkelig ikke vi som designere vil at brukerne våre skal bli slitne av å lese tekst på nettsidene vi designer. Eller at de zoomer inn og ut (har du noen gang sett hvor forferdelig designet det ser ut når man bruker de notoriske knappene for å justere tekststørrelse på offentlige nettsider)? At de tyr til tjenester som Pocket, Readability og Instapaper for å orke å bruke en nettside? Eller at de rett og slett gir opp og unngår nettsiden du har designet, som ser kjempeflott ut, men som er uleselig for dem? Denne trenden kommer ikke til å bli umoderne om et par år (som trender ofte gjør), så det er ingen grunn til å ikke sette teksten på en god måte fra starten av og sette fokus på å gi alle en optimal leseopplevelse.

quote bnonn Trendwatch 2013 Fokus på typografi

Tar man hensyn til leseavstanden, altså at en skjerm normalt er lenger unna enn en bok, tilsvarer 16px på skjerm rundt 10-11 punkts tekst i en bok. Med mindre du designer eksklusivt for brukere mellom 15 og 25 uten noen form for synsproblemer sier det seg selv at det blir problematisk med artikler satt i 10 pixler. Og tro meg — når du først er vant til 16px brødtekst vil du aldri gå tilbake.

 

webfont tilbydere Trendwatch 2013 Fokus på typografi

Innenfor typografi er det også en trend med mer utstrakt bruk av fonter for skjermbruk. Det vil si, for de av oss som er gamle nok til å huske internett i sin spede begynnelse, er dette enda en trend som har dukket opp i en ny og bedre drakt (og ikke minst med bedre nettleserstøtte).  Utvalget av webfonter øker og øker, kvaliteten på fontene og visningen i nettlesere blir bedre, og pris- og lisensmodellene begynner å bli mer fornuftige enn de var til å begynne med.

 

typecast Trendwatch 2013 Fokus på typografi

I tillegg har det kommet flere gode verktøy som f.eks TypeCast for å jobbe med typografi for digitale flater (og ikke minst for bruk av baseline grid i digitale flater). Veldig gode nyheter for oss designere, og i tilfellet TypeCast enda et godt verktøy for samarbeid og overlevering mellom grafiske designere og front-end utviklere.

 

Noen eksempler på typografi-fokuserte nettsider

 

smashing magazine 320x240 Trendwatch 2013 Fokus på typografiSmashing Magazine var tidlig ute med et redesign med fokus på typografi og lesbarhet. Brødteksten er satt i 16 pixler, og stort sett all annen tekst er i samme størrelse eller større. De bruker webfontene Proxima Nova og Skolar.

 

 

 

boston globe 320x240 Trendwatch 2013 Fokus på typografiThe Boston Globe var en av de første nettavisene som “gikk resposive”, og setter brødtekst i 16 pixler. Mer tradisjonell bruk av systemfonter, med Georgia og Helvetica.

 

 

 

 

the next web 320x240 Trendwatch 2013 Fokus på typografi TheNextWeb har brødtekst og stort sett all annen tekst i 16 pixler eller større, og bruker webfonten Benton Sans.

 

 

 

 

information architects 320x235 Trendwatch 2013 Fokus på typografiArtiklene til Information Architects er velskrevne, veldesignede og teksten er satt i 21 pixler. Uvant til å begynne med, men en helt fantastisk leseopplevelse. De har også en fiffig løsning som viser deg hvor lang tid det tar å lese resten av artikkelen du er inne på. De bruker en egendesignet font som tilpasser seg skjermoppløsningen, såkalt responsiv typografi.

 

bleed 320x237 Trendwatch 2013 Fokus på typografi

Selv designbyrået Bleed fokuserer på typografi før man i det hele tatt får se noen av de flotte designjobbene de har gjort. Teksten her er satt i Helvetica, i hele 40 pixler.

 

 

 

orphanages 640x480 Trendwatch 2013 Fokus på typografi

Som meldt i forrige trendrapport brukes typografi også som et kraftig virkemiddel og designelement i seg selv. Inntoget av webfonter gjør vi kan eksperimentere mer og gjøre mye mer spennende med typografi – vi er ikke lenger avhengige av at fonter som ikke er websafe må gjøres om til grafikk eller må vises ved hjelp av flash-teknologi.

 

Neste saker fra Trendwatch

 
3. Emosjonelt design
4. Andre visuelle trender
Publisert