+ MENY
2011 feb 4
2

Textdesignens utseende för läsupplevelsen

I det här inlägget vill jag lyfta fram några saker som jag ofta tänker på när jag är ute och surfar och läser artiklar och blogginlägg nämligen textdesign och css för text.

Vad äre du skriver?!

När man som jag läser ett tiotal artiklar om dagen vill man gärna få en så bra läsupplevelse som möjligt och känna så mycket harmoni som möjligt i texten. Det finns för detta några mycket enkla inställningar och här listar jag de som jag själv ofta använder. Framförallt gäller det att designa rubriker, stycken och radavståndet för att få en fin läsupplevelse framför din dator.

Det går också alldeles utmärkt att fylla på i kommentarsfältet med mer tips!

1. Använd en bra bredd för content kolumnen:

När man läser på nätet vill man gärna få en relativt lik känsla som när man läser en bok eller en tidningsartikel. Själv tycker jag att contentkolumnen skall ligga på 450 – 550px. Bland det värsta jag vet är när bredden på content är runt 800px, då blir läsupplevelsen inget vidare.

2. Utnyttja margin och padding runt rubriker

Det är rätt ofta man märker inställningar på artiklar och blogginlägg där avståndet från text och rubrik, under och över är alltför litet eller precis likadant. Mitt tips är att utnyttja margin och padding bättre runt rubriker. Det bästa är om avståndet till texten ovanför en rubrik är större än avståndet under. Du ser hur detta kan se ut i denna lista där jag använder detta för att styla h4 taggen i detta tema som exempel.

3. Ställ in radavstånd och bokstavsutrymme

Ett annat bra tips för att förbättra läsupplevelsen är att ställa in radavstånd och bokstavsutrymme. Med hjälp av css inställningarna line-height; och letter-spacing kan du ställa in detta på precis det sätt du vill. Mitt råd är är att öka line-height från standarden 1.0em till något större, någonstans mellan 1.0-1.4 beroende på font och stil på övriga sidan.

4. Designa taggen <p> mer och använd bilder!

Det sista jag vill skicka ut är att inte glömma att designa styckena med taggen <p> på ett snyggt sätt. Det är rekommenderat att skriva cirka 5-8 rader i varje stycke och sedan ha ett utrymme tills nästa stycke. Detta gör det enklare att till sig texten och förbättrar enligt mig läsupplevelsen. Att ha hela sjok (kanske 20 rader) av text är inte något vidare bra. Så ställ in margin ovanför och under<p> taggen så att det känns luftigt och bra. Om man vill kan man även skjuta in varje stycke några millimeter från rubriken vilket också kan skapa en skönare läsupplevelse. En bild i början av inlägget eller i textflödet hjälper också upp läsupplevelsen avsevärt.

Detta var mina tips om att förbättra läsupplevelsen på nätet med hjälp av lite enkel webbdesign. Fyll gärna på med fler tips på vad du tycker är bra för textdesign!

Läs också:

2 Kommentarer

  1. Jim Westergren skriver:

    Bra artikel och kul att du länkar vidare till min artikel. Jag har retat mig på detta i ett antal år nu. Men de senaste åren har det blivit bra mycket bättre tycker jag. Till och med WordPress standardmall twentyten faller på en del punkter i min artikel. Det är väl lätt att stirra sig blind på teknik och glömma saker som typografi och läsvänlighet.

  2. websimon skriver:

    Jim: Tackar för det! Om jag själv skulle säga det jag stör mig på allra mest så är det nog alla forum och bloggar som har en enorm bredd på textflödena vilket bara gör allt jobbigt att läsa…

Comment