Läsbarhet – en viktig faktor i design | Grafix Studio

Läsbarhet – en viktig faktor i design

En viktig faktor i din design

Din header är snygg och du har placerat alla dina element precis som du ska. Du utnyttjar de vita ytorna korrekt för att tydliggöra din designs grupperingar och din användare har inga problem med att scanna igenom sidan för att hitta det han/hon söker.

Du är så gott som färdig!…..Nästan iaf. Omedvetet så har du valt ett typsnitt till dina rubriker och din brödtext, men du vet kanske inte riktigt varför? Är du säker på att du valt rätt typsnitt till rubriken? Vi går igenom det här med typsnitt…

Serif och Sans-Serif

Man brukar dela in typsnitt i två kategorier: serif och sans-serif.

Serif – är namnet på de tvärstreck som avslutar den bokstavsstapel som utgör en bokstav eller ett tecken i en teckenuppsättning. Enkelt sagt så är det typsnitt som har ”fötter” eller en ”klack” vid kanterna. Serifer används för att skapa ett flöde i dina textstycken. Det blir lättare att följa texten eftersom seriferna skapar en ”osynlig linje” vilket gör dina besökare lättare kan följa längre texter.

Sans-Serif – En Sans-serif är helt enkelt ett typsnitt utan serifer. Exempelvis Arial eller Verdana.

Typsnitt

När ska du använda de olika typsnitten?

Det finns egentligen inga klara regler. Vad gäller läsbarhet så är det lättare att läsa ett serif typsnitt i längre texter, vilket gör att det lämpar sig för brödtext och paragrafer. Times New Roman är det vanligaste i det här fallet.

Vid rubriker är det därför vanligt att man använder -sans-serifer som Arial eller Trebuchet MS. Den ”klack” som finns i serifer kan vara något irriterande vid större font-storlek, vilket gör att sans-serifer lämpar sig bättre vid stora rubriker.

Undantagsfall

Det är mycket möjligt att din design inte tillåter att du använder Times New Roman som brödtext. Det kanske ser dåligt ut. Jag använder inte Times för det inte fungerade i mitt fall. Men jag testade, det bör även du göra.

Det finns även de som vänder på det och kör med Sans-serifer på brödtext med Serifer som rubriker. Det kan se bra ut i vissa fall, men då är det oftast rätt genomtänkt. Testa dig fram..

Radavstånd är avgörande

Förutom att sans-serifer gör det enklare att följa flödet i texten så är det lättare för ögat att fortsätta läsa vid en radbrytning om radavståndet är tillräckligt. Man säger inte exakt hur stort avstånd du ska ha för att det ska vara ”korrekt”, men ju större din font-storlek är desto mer får du öka på ditt radavstånd för att det ska vara läsbart.

Radasvstånd

Fler inlägg om Design

http://cynatic.org/ Andreas Johansson
Hrmm, har några funderingar angående din artikel här:
1. Två grupperna är väl ändå Sans-Serif och Antikva (Läste precis igenom typografisk handbok till en typografi-kurs)
2. Att använda serif (eller Antikva) som brödtext är något som inte lämpar sig för screen-reading; – Sans serif for online, serif for print.
3. Man brukar säga att 140% line-height är ganska lagom för en lättläst text på nätet.
http://cynatic.org Andreas Johansson
Hrmm, har några funderingar angående din artikel här:
1. Två grupperna är väl ändå Sans-Serif och Antikva (Läste precis igenom typografisk handbok till en typografi-kurs)
2. Att använda serif (eller Antikva) som brödtext är något som inte lämpar sig för screen-reading; – Sans serif for online, serif for print.
3. Man brukar säga att 140% line-height är ganska lagom för en lättläst text på nätet.
http://cynatic.org/ Andreas Johansson
Ahh, ett fel av mig serif är antikva .. bra att man har en kompis jämte som rättar ibland.
http://cynatic.org Andreas Johansson
Ahh, ett fel av mig serif är antikva .. bra att man har en kompis jämte som rättar ibland.
http://www.grafixstudio.se/ Antonio
@Andreas – Hade faktiskt ingen aning om att det ej lämpar sig för screen-reading. Har alltid varit fundersam över detta då de alltid sa till oss i skolan att använda serifer som brödtext.
De utelämna det här med scree-reading…
Har aldrig kört line-height i procent, tack för tipset!
http://www.grafixstudio.se/ Antonio
@Andreas – Hade faktiskt ingen aning om att det ej lämpar sig för screen-reading. Har alltid varit fundersam över detta då de alltid sa till oss i skolan att använda serifer som brödtext.
De utelämna det här med scree-reading…
Har aldrig kört line-height i procent, tack för tipset!
http://www.grafixstudio.se Antonio
@Andreas – Hade faktiskt ingen aning om att det ej lämpar sig för screen-reading. Har alltid varit fundersam över detta då de alltid sa till oss i skolan att använda serifer som brödtext.
De utelämna det här med scree-reading…
Har aldrig kört line-height i procent, tack för tipset!
http://cynatic.org/ Andreas Johansson
Att de sa till dig att använda serifer är troligen för att de är gamla grafiker … I print anses det misslyckat att använda sans-serf i ett verk (förutom posters). Har själv haft en del utdragna diskussioner med föreläsare inom grafisk design om ämnet.
Det finns inte så många resurser eller möjligheter att ”typografera” ens text via en blogg eller cms men det känns som att webben/screen-.reading bryter de flesta regler som finns vid print.
http://cynatic.org/ Andreas Johansson
Att de sa till dig att använda serifer är troligen för att de är gamla grafiker … I print anses det misslyckat att använda sans-serf i ett verk (förutom posters). Har själv haft en del utdragna diskussioner med föreläsare inom grafisk design om ämnet.
Det finns inte så många resurser eller möjligheter att ”typografera” ens text via en blogg eller cms men det känns som att webben/screen-.reading bryter de flesta regler som finns vid print.
http://cynatic.org Andreas Johansson
Att de sa till dig att använda serifer är troligen för att de är gamla grafiker … I print anses det misslyckat att använda sans-serf i ett verk (förutom posters). Har själv haft en del utdragna diskussioner med föreläsare inom grafisk design om ämnet.
Det finns inte så många resurser eller möjligheter att ”typografera” ens text via en blogg eller cms men det känns som att webben/screen-.reading bryter de flesta regler som finns vid print.
Pontus Johansson
”Vad gäller läsbarhet så är det lättare att läsa ett sans-serif typsnitt i längre texter, vilket gör att det lämpar sig för brödtext och paragrafer. Times New Roman är det vanligaste i det här fallet. ”
Inte är väl Times New Roman sans-serif? :P
Pontus Johansson
”Vad gäller läsbarhet så är det lättare att läsa ett sans-serif typsnitt i längre texter, vilket gör att det lämpar sig för brödtext och paragrafer. Times New Roman är det vanligaste i det här fallet. ”
Inte är väl Times New Roman sans-serif? :P
http://www.grafixstudio.se/ Antonio Riveras
Oj, ett mindre typo =)..Korrigerat!
http://www.grafixstudio.se/ Antonio Riveras
Oj, ett mindre typo =)..Korrigerat!
http://www.grafixstudio.se Antonio Riveras
Oj, ett mindre typo =)..Korrigerat!
http://www.miaholte.com/ mia
Veldig viktig det du tar opp her!
Og jeg trodde bruk av em var mer stabilt enn prosent på linjeavstand, men her er jeg på tynn is…
http://www.miaholte.com/ mia
Veldig viktig det du tar opp her!
Og jeg trodde bruk av em var mer stabilt enn prosent på linjeavstand, men her er jeg på tynn is…
http://www.miaholte.com mia
Veldig viktig det du tar opp her!
Og jeg trodde bruk av em var mer stabilt enn prosent på linjeavstand, men her er jeg på tynn is…
http://www.3do.se/ Sam Farhan
Vad vet ni om Univers då ? Har fått råd att använda det på alla broschyrer som brödtext. Och normaltviss Helvetica på förstycke/rubriker.
Personligen ville jag köra standard med Calibri på brödtext och Cambria på förstycke/rubriker.
ps. Jag har ingen större kunskap i detta.
http://www.3do.se/ Sam Farhan
Vad vet ni om Univers då ? Har fått råd att använda det på alla broschyrer som brödtext. Och normaltviss Helvetica på förstycke/rubriker.
Personligen ville jag köra standard med Calibri på brödtext och Cambria på förstycke/rubriker.
ps. Jag har ingen större kunskap i detta.
http://www.3do.se Sam Farhan
Vad vet ni om Univers då ? Har fått råd att använda det på alla broschyrer som brödtext. Och normaltviss Helvetica på förstycke/rubriker.
Personligen ville jag köra standard med Calibri på brödtext och Cambria på förstycke/rubriker.
ps. Jag har ingen större kunskap i detta.
http://cynatic.org/ Andreas Johansson
@mia tänk på om du sätter text-storlek till 0.9em, då är detsmidigaste sättet att få bra radavstånd att sätta line-height till 140%. Om du ändrar i framtiden behöver du bara ändra textstorlek, inte räkna ut linje-höjden.
http://cynatic.org Andreas Johansson
@mia tänk på om du sätter text-storlek till 0.9em, då är detsmidigaste sättet att få bra radavstånd att sätta line-height till 140%. Om du ändrar i framtiden behöver du bara ändra textstorlek, inte räkna ut linje-höjden.
Pingback: Olika stilar i webbdesign | Grafix Studio - webbdesign och grafik
http://www.miaholte.com/ mia
@Andreas Johansson; Det skjønner jeg, men jeg trodde kanskje det var større sjanse for at det ble vist feil i forskjellige nettlesere, spesielt når folk resizer…
http://www.miaholte.com/ mia
@Andreas Johansson; Det skjønner jeg, men jeg trodde kanskje det var større sjanse for at det ble vist feil i forskjellige nettlesere, spesielt når folk resizer…
http://www.miaholte.com mia
@Andreas Johansson; Det skjønner jeg, men jeg trodde kanskje det var større sjanse for at det ble vist feil i forskjellige nettlesere, spesielt når folk resizer…
http://www.eurostop-online.com/ Stefan Fellin Olsson
Mycket intressant läsning som många bör och kan ta lärdom av.
http://www.eurostop-online.com Stefan Fellin Olsson
Mycket intressant läsning som många bör och kan ta lärdom av.
Pingback: Detta är min preset.css | Grafix Studio - webbdesign och grafik
Pingback: Hur stolt är du som designer? | Grafix Studio - webbdesign och grafik
Pingback: Webbdesign som inte bör kodas | Grafix Studio - webbdesign och grafik
Pingback: Applikationsdesign i webbdesign? | Grafix Studio - webbdesign och grafik
Pingback: Designa utanför din stil | Grafix Studio - webbdesign och grafik
Pingback: Framtidsvisioner – vart är webben påväg? | Grafix Studio - webbdesign och grafik
Pingback: Ge din webbdesigner lite andrum | Grafix Studio - webbdesign och grafik
Pingback: 5 frågor en webbdesigner ska ställa | Grafix Studio - webbdesign och grafik
Pingback: 10px ovanför, 10px undertill…eller? | Grafix Studio - webbdesign och grafik
Pingback: Dagens publiceringsverktyg i två grupper | Grafix Studio - webbdesign och grafik
Pingback: Därför är programmerare bra kunder | Grafix Studio - webbdesigner och grafiker
Pingback: Du vet att du är en webbdesigner om… | Grafix Studio - webbdesigner och grafiker
Pingback: Krydda till din webbdesign | Grafix Studio - webbdesigner och grafiker