Smashing Conference (#smashingconf ) dag 2 – vikten av vacker text

Simon Dahla

Marko Dugonjic @ Smashing Conference

Här följer anteckningar, tankar och reflektioner från de bästa talarna på Smashing Confernece – Oxford 2014 – dag 2, var inte riktigt lika vass som den första, men ändock full av massa ny kunskap.

Scott Kellum (@scottkellum) – Art Directing Posts, Sustainably

Under webbens tidiga dagar så var alla hemsidor byggda av webmasters, allt innehåll som skulle publiceras gick genom någon som kunde koda. Detta tillvägagångssätt är inte hållbart idag och vi har en uppsjö av olika webbpubliceringssystem (CMS) såsom WordPress, Drupal m.fl. där webbredaktörer inte behöver kunna koda för att lägga upp innehåll. Allt innehåll läggs i mallar och layouten visar ofta inte vad innehållet handlar om.

Detta är Scotts utgångspunkt. Han jobbar på the The Verge ett webbmagasin som gjort sig kända för sina välskrivna artiklar och för sitt unika sätt att presentera detta på. The Verge har utvecklat något de kallar för Art Directed Posts alltså innehåll som de ger lite mer kärlek genom att addera extra layoutelement eller utseendejusternigar – de har skapat ett layoutsystem för att kunna flytta runt innehållet inom ramen för sidmallen.

Detta är ett grepp de har tagit från det tryckta mediet för att öka antalet läsare. Scott visar oss ett par exempel han är extra nöjd över:

Dom har helt enkel byggt ut sitt eget CMS för att passa in för just deras egna behov och byggt ett modulärt system där bild och text kan presenteras på många olika kombinationer. Genom att bygga in detta i sitt CMS kan redaktörerna själva skapa sidor som känns genomarbetade utan att involvera designers eller utvecklare.

För de mer avancerade redaktörerna som jobbar på sajten har de lagt till en SASS editor, genom att ändra variabler för varje post får redaktörerna väldigt stor kontroll över hur deras innehåll presenteras.

Tools aren’t the magic – they enable the end result.

Scott menar att genom att när de ger sina bloggposter extra kärlek så får de:

  • fler läsare, då man är mer villig att läsa en visuellt tilltalande artikel kontra en ej visuellt tilltalande artikel
  • att genom ovanstående skapar extra trafik då man är mer villig att dela med sig av en snygg artikel
  • folk är villiga att läsa längre artiklar då artiklarna är snyggare

Dom märker tydligt att poster dom jobbat lite mer på når ut till en helt ny grupp läsare som vanligtvis inte är inne på sajten och läser.

Så: bryt upp längre texter med bild, citat, om möjligt använd flera olika typer av mallar för en text istället för att betrakta allt innehåll på samma vis.

Marko Dugonjic (@markodugonjic) – Responsive Web Typography

Problemet som Marko uttryckte det var att:

Articles on my phone starts looking a bit rubbish

Responsiva sajter har ofta bra, genomarbetat och korrekt typografi på sina sajter på stora och breda skärmar men att typografin inte responderar på ett adekvat sätt. Han menar att de standard verktyg som idag finns inte är tillräckliga.

I traditionell print-miljö så förändras inte typografin när den väl är satt, på webben så har man en rad parametrar att ta hänsyn till.

Hur du ska anpassa typografin på din webbplats beror på (och jag kommer inte ens ge mig i kast att försöka översätta dessa termer till svenska):

  • Reading distance
  • Viewport width (and height)
  • Content Hierarchy
  • Information Density
  • Pixel Density
  • Device Orientation
  • Screen Aspect Ratio

Jag hittade Typeplate under förra året, ett Github-projekt som gör ett bra försök till att lägga en bra start, en mall för hur man ska jobba med typografi i en responsiv miljö på ett bra och effektivt sätt. Projektet stödjer både vanlig CSS och SASS.

Reading distance

Storleken på texten är idag anpassad endast på hur stor skärm besökaren har, vi gör alltså en approximering var besökaren befinner sig, men den approximeringen är inte alltid korrekt.

Marko visar ett projekt där han har kopplat en webbkamera med ansiktsigenkänning för att mäta avståndet mellan skärmen och användaren och dynamiskt i realtid ändra storleken på texten. Jag är inte direkt övertygad om att det är rätt väg framåt men han gör sin poäng tydligare.

För att komma till rätta med problematiken så är den enda realistiska lösningen att testa typografin tills den ser förträfflig ut.

Viewport width

För optimal läsupplevelse bör man ha mellan 45-75 tecken per rad och för en flerkolumns-layout så gäller 40-50 tecken. Detta gör det problematiskt att visa fler än 40 tecken på t.ex. på en iPhone då texten annars kommer bli väldigt liten och grynig.

Detta kommer naturligt med teknikutvecklingen då nya typer av enheter har mer högupplösta skärmar.

Marko brukar lägga upp en sida/bloggpost på varje sajt med en dummytext för att testa, han lägger in en * efter varje 45-75 tecken och experimenterar sig fram.

Vi måste släppa pixel-baserade fontstorlekar och pixelbaserade media queries då de inte tar skärmstorlek i beräkning som en em-baserad fontstorlek gör. Han menar att detta är framtiden och detta är framtidssäkert.

Kortare rader behöver mindre mellanrum mellan linjerna och vise versa. Du vet att det är för tight när ”q” och ”d” börjar nudda varandra. Det finns en rad olika plugin till Chrome som kan hjälpa till med detta, annars finns det även js-lösningar eller en mer old school-lösning där man byter ut bakgrunden med horisontella linjer.

Det finns tre olika avstånd i text på webben:

  • Letter Space
  • Word Space
  • Line Space

Om man ökar ”line space”, behöver man förmodligen öka ”word space”. hdpi-enheter en något högre letter och word-spacing än vanliga enheter. Detta går att styra mha riktade media queries.

Bästa sättet att veta att man fått det rätt är att be någon läsa en text högt, om personen har kan läsa texten utan att tappa bort sig då har man lyckats.

Content Hierarchy

Det bästa sättet att få en tydlig hierarki mellan olika rubriker, brödtext etc. så kan man använda den traditionella typografiska skalan 16, 18, 21, 24, 36, 48, 60, 72 … För att göra detta med hjälp av em tipsar Marko om Modular Scale.

Spana in Tarzan and the Jewels of Opar för se ett bra exempel för hur man organiserar hierarki inbördes. Där använder de versaler, små versaler, kursiv och fet text för att komplettera och visa på inbördes hierarki i innehållet.

Information Density

Där det finns plats kommer folk att fylla det. Vi kan balansera detta genom att skapa ett intresse hos läsaren med hjälp av typografi. Genom att anpassa innehållet beroende på om vi har mycket eller lite information på sajten.

Mindre information:

  • Stilvariationer
  • Indenteringar
  • Vitt utrymme

Mer information:

  • Typografiska skalor
  • Grafiska element
  • Block av med tydliga stycken

Pixel density

Webbfonter börjar nu bli designade för små skärmar så att det fortfarande blir läsbart. I print har man länge jobbat med att ta fram typografi som går att trycka på billigare papper utan att tappa läsbarhet.

Det finns ett fåtal typsnitt som kommer i flera olika sub-weights och i olika skärningar beroende på skärmstorlek och trigga dessa beroende på olika media queries. Marko menar att detta är något vi kommer se mer av.

Device Orientation

Han visar på en problematik med att en skärm är uppbyggd av pixlar – en mobiltelefon i porträttläge så ligger pixlarna som den är designad för, för pixlarna i sig består av varsin RGB-komponent. Så om man vrider sin mobiltelefon i landskapsläge för att läsa en text så påverkar detta läsbarheten då betraktningsvinkeln av pixlarna på skärmen blir suboptimal då subpixel renderingen ändras. Detta påverkar speciellt text, men det finns typsnitt som är anpassade även för detta.

Marko ger tips på vidare läsning kring detta:

Även radlängden ändras, något man också kan bygga runt med media queries.

Screen Aspect Ratio

Att designa något för webb är svårt då man inte har några bra eller standardiserade förhållanden/proportioner som man har med papper (ett A4-papper är 2st A5-papper osv.). På webben får man alla tänkbara kombinationer då man aldrig vet på vilken typ av enhet läsaren kommer betrakta innehållet ifrån.

Standard paper sizes are beautifully aligned, the web is beautifully not!

För att fortsätta läsa in sig på ämnet och hur man kan ta det i beaktning: Designing With Context

Marko tipsade även om denna (off-topic) bloggpost kring Wireframes: A Good Communication Tool, a Poor Design Tool.

Han refererade även ett par gånger till denna video som behandlar ämnet:

Andrew Clarke (@Malarkey) – A Modern Designer’s Canvas

I huvudsak ett föredrag om verktyg och processer för desing. Men för att vara en god designer så handlar det mycket mer om än att bara kunna hantera verktygen, det handlar om attityder och tillvägagångsätt, menar Andrew.

Andrews föredrag var konferensens sista och kanske bästa föredrag, han har själv skrivit en bloggpost om sitt föredrag på Smashing Magazine.

Läs även

Conversionista is open for business in The Netherlands.
Conversionista is open for business in The Netherlands. Read more.