Overskriften på nettsiden din er for stor, brødteksten for liten, og ingenting ser ut som du hadde sett for deg. Du trenger kontroll over tekststørrelsen. Med font-size i CSS bestemmer du nøyaktig hvor stor teksten skal være. Men du møter raskt et valg: skal du bruke piksler, rem eller em? De fungerer ulikt, og valget påvirker hvor fleksibel nettsiden din blir på tvers av enheter og brukerinnstillinger.
Font-size med piksler: nøyaktig kontroll
Den enkleste måten å sette tekststørrelse på er med piksler (px). Du skriver et tall etterfulgt av px, og teksten blir akkurat den størrelsen. 16px gir deg standardstørrelsen nettlesere bruker for brødtekst. 32px gir dobbelt så stor tekst. Det er forutsigbart og lett å forstå.
Ulempen med piksler er at størrelsen er absolutt. Hvis en bruker har stilt inn nettleseren til å vise større tekst av synshensyn, vil pikselbaserte størrelser ignorere denne innstillingen. Teksten forblir den størrelsen du har definert, uansett hva brukeren foretrekker. For noe innhold kan det være greit, men for brødtekst kan det gjøre nettsiden vanskeligere å lese.
Rem: den relative enheten du bør kjenne
Enheten rem står for "root em" og er relativ til rot-elementets skriftstørrelse. På de fleste datamaskiner er standardstørrelsen 16 piksler. Det betyr at 1rem tilsvarer 16px, 2rem tilsvarer 32px, og 1.5rem tilsvarer 24px. Regnestykket er alltid standardstørrelsen ganget med rem-verdien. Du kan lese mer om måleenheter i CSS for å forstå hele bildet.
Fordelen med rem er at den respekterer brukerens innstillinger. Har noen satt nettleseren til 20px som standard, vil 2rem bli 40px i stedet for 32px. Teksten skalerer proporsjonalt, og nettsiden forblir lesbar. Moderne nettsider bruker rem for det meste av tekststørrelsen nettopp av denne grunn.
Forskjellen mellom rem og em
Mens rem alltid er relativ til rot-elementet, er em relativ til foreldreelementet. Setter du font-size til 1.5em på et element inni et annet element som allerede har 1.5em, blir resultatet 1.5 ganger 1.5, altså 2.25 ganger standardstørrelsen. Denne "kaskadeeffekten" gjør em vanskeligere å forutsi i dype HTML-strukturer. Rem unngår dette problemet fordi den alltid refererer tilbake til det samme utgangspunktet.
Keywords: en tredje mulighet
CSS har også innebygde nøkkelord for tekststørrelse: small, medium, large, x-large og flere. Medium tilsvarer standardstørrelsen på 16 piksler. Disse nøkkelordene brukes sjelden i praksis fordi de gir deg begrenset kontroll over nøyaktig størrelse. Men de kan være nyttige å kjenne til når du leser andres CSS-kode.
Sett font-size på riktig element
Tekststørrelse arves i CSS, akkurat som font-family. Setter du font-size på body, arver alle elementer inni body denne størrelsen. Overskrifter har derimot egne standardstørrelser definert av nettleseren, så de må ofte styles separat. En vanlig tilnærming er å bruke selektorer for å gi h1, h2 og andre overskriftsnivåer egne størrelser, mens brødteksten arver størrelsen fra body.
Piksler eller rem: hva bør du velge?
For de fleste prosjekter er rem det beste valget for font-size. Du får en fleksibel nettside som respekterer brukerinnstillinger, og beregningen er enkel så lenge du husker at 1rem tilsvarer rot-elementets størrelse. Piksler fungerer fint for elementer der du trenger en absolutt størrelse, for eksempel en liten etikett som alltid skal være 12px. Men for overskrifter og brødtekst gir rem deg en mer tilgjengelig nettside uten ekstra arbeid. Du finner en fullstendig oversikt over alle mulige verdier i MDN sin dokumentasjon om font-size.
Lær mer om font-size med video
Denne artikkelen bygger på en videoleksjon fra CSS-kurset på Utdannet.no. I videoen får du se hvordan du:
- Setter tekststørrelse med piksler, rem og keywords i praksis
- Bruker nettleserens utviklerverktøy for å sjekke hva den faktiske pikselstørrelsen blir
- Velger mellom piksler og rem basert på hva du bygger
