Responsiv typografi i CSS

Teksten på nettsiden din ser bra ut på mobilen. Men på en stor dataskjerm virker overskriftene små og brødteksten trangt satt. Responsiv typografi i CSS handler om å tilpasse tekststørrelsen til skjermen den vises på. Når besøkende åpner nettsiden på en 27-tommers skjerm, bør teksten være større og ha mer luft enn på en mobilskjerm. Med media queries og relative enheter får du tekst som skalerer naturlig.

Responsiv typografi med media queries i CSS

Den enkleste tilnærmingen til responsiv typografi er å bruke en media query som endrer tekststørrelsene ved et bestemt breakpoint. Du definerer grunnstørrelsene for mobil uten media query, og legger til større størrelser for brede skjermer. For eksempel kan du si at når skjermbredden er 1200 piksler eller mer, skal h2-elementer vises med font-size på 200 prosent og brødteksten med 125 prosent.

Ved å bruke prosent som måleenhet knytter du tekststørrelsen til forelderelementets størrelse. 200 prosent betyr dobbelt så stor som grunnstørrelsen. Det gjør det lett å holde proporsjoner mellom ulike overskriftsnivåer og brødtekst.

Linjehøyde gir lesbar tekst

Når teksten blir større, trenger den mer plass mellom linjene. Uten justert linjehøyde ser stor tekst klemt og vanskelig å lese ut. En line-height på 1,5 gir brødtekst god lesbarhet på brede skjermer. For overskrifter fungerer en linjehøyde på 1,2 til 1,3 bedre, siden store bokstaver trenger mindre relativ avstand.

Kombinerer du font-size med line-height og margin-bottom i en media query, får du tekst som ikke bare er riktig størrelse, men også har riktig avstand til elementene rundt seg.

Relative enheter fremfor piksler

Piksler gir en fast størrelse som ikke tilpasser seg noe. Med relative enheter som rem, em og prosent følger tekststørrelsen enten rotfont-størrelsen, forelderelementet eller en grunnverdi. Rem er knyttet til font-size på html-elementet, som vanligvis er 16 piksler. 1,5 rem gir da 24 piksler. Endrer du font-size på html-elementet i en media query, skalerer alle rem-verdier på hele siden automatisk.

Denne teknikken gjør responsive design enklere. I stedet for å oppdatere font-size på hvert element, endrer du en verdi og alt følger med. Det er spesielt nyttig på store nettsider med mange tekstelementer.

Clamp: typografi uten breakpoints

CSS-funksjonen clamp() lar deg definere en minimumsstørrelse, en foretrukket størrelse og en maksimumsstørrelse i en eneste regel. Den foretrukne størrelsen settes typisk med viewport-enheten vw, som er en prosent av nettleservinduets bredde. Teksten skalerer flytende mellom minimum og maksimum uten at du trenger media queries i det hele tatt.

Fordelen med clamp er glidende overgang. I stedet for at teksten hopper fra en størrelse til en annen ved et breakpoint, vokser den jevnt med vinduet. Ulempen er at syntaksen er mindre intuitiv, og du mister den eksplisitte kontrollen som media queries gir.

Viewport-enheter for flytende skalering

Enheten vw representerer en hundredel av nettleservinduets bredde. Setter du font-size til 5vw, blir teksten 5 prosent av vinduets bredde. Det betyr at teksten skalerer direkte med vindusstørrelsen. Problemet er at den kan bli altfor liten på smale skjermer og altfor stor på brede. Derfor brukes vw nesten alltid sammen med clamp eller en minimumsverdi.

En trygg tilnærming er å kombinere en fast verdi med en viewport-verdi, for eksempel calc(1rem + 1vw). Da har teksten alltid en minimumsstørrelse fra rem-verdien, pluss litt ekstra fra viewport-bredden. Du kan lese mer om viewport-enheter og clamp i MDN sin dokumentasjon om clamp().

Når bør du bruke responsiv typografi?

Ikke all tekst trenger å skalere. Brødtekst i artikler fungerer ofte godt med en fast rem-verdi og god responsiv layout som begrenser linjebredden. Der responsiv typografi virkelig utgjør en forskjell, er på store overskrifter, hero-seksjoner og tekst som skal fylle et visuelt areal. Bruk det bevisst der det gir bedre lesbarhet, ikke overalt for sakens skyld.