Nyhetsbrev

Få artiklar, råd och tips om:

Web Typography Challenges

Responsiv typografi
på webben

av Frida Nyvall

Att uppnå perfekt typografi på webben har i mina ögon alltid verkat som sökandet efter den Heliga Graalen eller möjligtvis en trip till Alices Underland.

Innan webbsidor var responsiva, och innan folk använde både mycket smala och mycket breda skärmar för att tillgodogöra sig innehållet på samma webbplats, var den allmänna uppfattningen att alla visuella element på webbsidorna skulle vara ”pixelperfekta”.

Idén om ett ”pixelperfekt” utseende grundade sig förmodligen i att människor var vana vid tryckta medier som tidningar och affischer. De tryckta bokstäverna flyttade aldrig på sig, vilket gjorde att och text och bilder noggrant kunde passas in i en perfekt designad layout.

På webben är innehållet rörligt på många olika sätt, och som om det inte skulle vara nog – en webbsidas innehåll kan dessutom vara dynamiskt, eller skapat och redigerat av andra än professionella Art Directors.­

Vertikal rytm

En annan viktig skillnad mellan typografi i print och på webben, är att radavståndet beräknas från en annan startpunkt i tryck jämfört med på webbplatser. I tryckta medier är bokstäverna placerade på linjen längst ner där radavståndet börjar, som när man skriver för hand på ett linjerat papper. På webben centreras bokstäverna så att de befinner sig i mitten av radavståndets höjd.

Radavstånd i print och på webbsidor

Även om radavståndet fungerar annorlunda på webben jämfört med i tryck, kan det typografiska begreppet vertikal rytm fortfarande tillämpas. Knepet är att se till att höjden på och avstånden mellan varje stycke är multiplar av samma höjd som brödtextens radavstånd.(1)

För att underlätta läsbarhet bör radavståndet inte bara ta hänsyn till den vertikala rytmen, utan också justera för textens storlek.

  • Mindre text kräver proportionellt större radavstånd för att vara riktigt tydliga.
  • Större text (t.ex. rubriker) behöver på motsvarande sätt något mindre radavstånd.

Behåll rätt radlängd

En annan utmaning med webbtypografi är den stora variationen av skärmstorlekar. Hur kan samma text göras lika lättläst och läsbar på skärmar som varierar i storlek från mobiltelefoner till tv-skärmar?

Den allmänna rekommendationen för optimal läsbarhet är att ha cirka 45-75 tecken på varje rad(2). När en textparagraf blir bredare, borde därför också teckensnittsstorleken öka för att bevara antalet tecken per rad.

Om textstorleken och radavståndet börjar skala, betyder det att den vertikala rytmen också bör skalas proportionellt eftersom brödtextens radavstånd ändras.

Modulär skala

Att skapa en modulär skala för webbtypografi innebär i grunden att välja ett tal som representerar en skala (eller förhållande) och multiplicera numret med sig själv för varje rubrikstorlek. Webbsidorna modularscale.com och type-scale.com har praktiska verktyg för att välja en modulär skala.

Modulär skala

Rubriker som använder en modulär skala

Utmaningen är att en modulär skala som fungerar bra för stora skärmar kanske inte fungerar idealt för mindre skärmar, eftersom skillnaderna mellan rubrikernas textstorlek blir för överdrivna. De största rubrikerna ser helt enkelt för stora ut. En typisk skala med detta problem är skalan för det populära gyllene snittet.

Lösningen är att kunna använda en mobilvänlig modulär skala för små skärmar, och byta till en modulär skala som passar bättre för större skärmar när skärmstorleken ökar.

Utmaningen antages

Mycket har hänt och kommer sannolikt fortsätta hända i utvecklingen av webbteknologi. Med bredare webbläsarstöd för CSS tekniker som calc(), CSS Custom Properites och @supports regeln finns verktygen för att skapa responsiv webbtypografi utan att ta hjälp av olika SCSS eller JS- paket eller plugins.

Intresserad av vilka lösningar jag kom fram till? Sammanfattning finns i den mer kodfokuserade bloggposten ”Responsive Typography with CSS Custom Properties”.

Referenser

(1) Why is Vertical Rhythm an Important Typography Practice? av Zell Liew

(2) Size Matters: Balancing Line Length And Font Size In Responsive Web Design av Laura Franz för Smashing Magazine

Tags

Fler inlägg

img

Responsive Typography with CSS Custom Properties (CSS Variables)

img

CSS Variables or Custom Properties

img

Webbkalender 2017