Web Typography Challenges
3 Apr 2018
Responsiv typografi
på webben
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.
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.
Ä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.
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