Fontstørrelse på web: pt, px, ems, % – hva skal du bruke og hva er forskjellen?

Mange lurer på hva de skal bruke når de definerer fontstørrelse på en webside. Det er mange valgmuligheter, selv holder jeg meg stort sett til punkter (pt), piksler (px), ems (em) og prosent (%).

Vil du lære om HTML, CSS, HTML5, CSS3, responsiv webdesign eller animasjon? Ta en titt på våre kurs:

• Innføring i HTML og CSS
• Kurs i HTML5 og CSS3
• Responsiv webdesign
• Ukeskurs i HTML, CSS og responsiv design
• Animasjon med CSS
• Kurs i Adobe Dreamweaver

Hva bør man så bruke?

Svaret er at det kommer an på hvilke enheter du retter deg mot. For skjermvisning vil jeg anbefale at du bruker ems (em) eller prosent (%). Dette fordi det lar brukeren skalere teksten i nettleseren. Bruker du piksler (px) vil ikke dette la seg gjøre i alle nettlesere (de fleste moderne nettlesere lar deg nå skalere tekst selv om fontstørrelsen er satt i piksler, men i eldre nettlesere kan dette være problematisk). Med andre ord, det er mer brukervennlig og du gjør sidene mer tilgjengelig ved å bruke ems eller prosent.

[adrotate banner=»6″]

Basert på dette vil jeg anbefale følgende:

• CSS for skjerm: bruk em eller %
• CSS for print: bruk pt

”Konvertering” av fontstørrelser

Tabellen nedenfor gir deg en pekepinn på hva antall punkter blir i piksler, ems og prosent. Dette er tilnærmelsesvis riktig, men husk at størrelsen blant annet kan avhenge av fonten som brukes, nettleser og operativsystem, og listen kan derfor ikke sees på som en fasit. Det er imidlertid et godt utgangspunkt.