Rätt typsnitt och rätt teckenfärg
Valet av typsnitt, teckenfärg och teckenstorlek är viktigt. Det påverkar hur webbsidan upplevs och hur lätt informationen blir att ta till sig. Här är grunderna du behöver veta för att göra rätt val.
Två vanliga typsnittsfamiljer är serif och sans-serif. Seriffer är de tvär-streck som finns i ändarna på staplarna i till exempel typsnitt som Times New Roman. Typsnitt som tillhör familjen serif har dessa streck medan typsnitt som tillhör familjen sans-serif (utan seriffer) saknar dessa dekorativa tvär-streck.
Exempel:
Times New Roman – Arial
Times New Roman tillhör alltså typsnittsfamiljen serif medan Arial är ett exempel på ett typsnitt som tillhör typsnittsfamiljen sans-serif.
För brödtext i tryck anses serif-typsnitt vara läsligare. På webben där upplösningen är sämre och de små detaljerna inte framgår lika väl är ett typsnitt utan seriffer att föredra i många lägen, men med dagens nya högupplösta skärmar och mobiltelefoner kan vi snart bortse från detta och istället välja vilket typsnitt vi vill, sålänge de är anpassade för skärm.
Se till att du i din CSS anger flera typsnittsalternativ om besökaren inte har ditt förstahandsval installerat eller om det är problem att ladda hem typsnittet från typsnittsleverantören, till exempel:
body {
font-family: arial, verdana, ”trebuchet ms”, sans-serif;
}
Notera att namn på typsnitt som innehåller mellanslag anges inom citationstecken. Som sista alternativ bör du ange en typsnittsfamilj som används om inga av de föregående valen är tillgängliga.
Du kan till och med hitta förslag på typsnitt som passar att använda som alternativ baserat på ditt huvudval. Ett sådant exempel är CSS Font Stack.
Teckenstorlek
När det gäller teckenstorlek ska man tänka på att utseendet även beror på vilket typsnitt man väljer. Till exempel ser en teckenstorlek på 12 punkter större ut i typsnittet Arial än i Times New Roman.
Generellt rekommenderar man att teckenstorleken för brödtext är 10-12 punkter. Tänk på att liten text är ansträngande att läsa och att det kan skapa problem för t.ex. äldre personer med nedsatt syn.
Teckenfärg och kontrast
När det gäller teckenfärg gäller generellt att mörka färger passar bra för text och ljusa omättade färger bra som bakgrund. Framförallt gäller det att tänka på kontrasten mellan textfärgen och bakgrunden. Men även om kontrasten mellan två färger är hög kan läsbarheten vara låg. Till exempel är svart text på vit bakgrund mycket bättre än vit text på svart bakgrund eftersom kanterna på de vita bokstäverna upplevs suddiga mot en svart bakgrund och därmed minskar läsbarheten.
Du kan pröva om dina kombinationer av text- och bakgrundsfärg har tillräcklig konstrast och färgskillnad på http://snook.ca/technical/colour_contrast/colour.html.
Då många personer har någon form av färgblindhet kan det vara bra att viktiga delar i innehållet kan urskiljas på annat sätt än genom dess färg, till exempel genom att länkar även är understrukna.
Teckenfärg, teckenstorlek och typsnitt kan alla användas för att betona olika delar av innehållet men tänk på att inte mixa för många färger och typsnitt. Att använda alltför många färger och olika typsnitt gör att sidan upplevs som rörig och oprofessionell.
”When everything is highlighted, nothing is emphasized”
- Jakob Nielsen, Prioritizing web usability, p. 235
Ett citat av Jakob Nielsen om vikten att vara restriktiv i valet av färger, typsnitt, teckenstorlek får avsluta artikeln.
Relaterade artiklar
- Artikel