Optimering af Tekst til Alle Skærme

Forestil dig dette: Du er på vej på den længe planlagte drømmerejse. Alt er booket hjemmefra på din bærbare computer – hotel, togrejser, det hele. Du skal bare møde op og nyde turen, ikke sandt? Da jeg ankom tidligt til min første togrejse i udlandet, opstod der dog et problem med min billet. Jeg skyndte mig ind på togselskabets hjemmeside på min telefon og blev mødt af en kæmpe væg af ulæselig tekst. Hjemmesiden var simpelthen ikke designet til små skærme, og jeg kunne ikke bruge den ordentligt.

Selvom du måske ikke har oplevet en lignende rejsekatastrofe, har næsten alle internetbrugere sandsynligvis stødt på problemer med hjemmesider, der ikke er responsive. I denne artikel vil jeg dele, hvordan du kan gøre dit websted brugervenligt med responsiv tekst. Lad os dykke ned i det.

Hvorfor bruge responsiv tekst?

I dag bruger vi internettet på et væld af enheder: bærbare computere, telefoner, stationære computere, tablets og endda smart-tv'er. Hver skærm har sin egen unikke størrelse. For at sikre, at dit indhold er læsbart og tilgængeligt for alle, uanset enhed, er det afgørende, at din tekst er responsiv. Dette betyder, at den er i stand til at ændre størrelse og layout for at passe til brugerens enhed.

Overvej et eksempel: Når jeg designer en side til en stationær computer, bruger jeg måske en skriftstørrelse på 32 pixels til mine <h2>-elementer. Det gør overskrifterne store nok til at skille sig ud fra brødteksten. Men hvis jeg bevarer den samme størrelse på en mobilskærm, vil de samme overskrifter se enorme ud og distrahere læserne. Det modsatte er også sandt – tekst, der ser perfekt læsbar ud på en smartphone eller tablet, kan være for lille til at læse på en stationær computer. Når vi vælger tekststørrelser, skal udviklere tænke kritisk over, hvor læsbare disse størrelser vil være på forskellige skærme.

Så, hvordan gør vi tekst responsiv? Vi skal foretage nogle ændringer i vores CSS, specifikt til font-size-egenskaben, som indstiller størrelsen af vores tekst. font-size-egenskaben accepterer pixelværdier, men der er bedre muligheder, vi kan bruge til at skabe responsiv tekst.

Relative vs. Absolute enheder

En af de hurtigste måder at skabe responsiv tekst på er at skifte fra absolute enheder til relative enheder. Du har sandsynligvis lært om relative og absolute enheder, da du lærte HTML, men lad os kort gennemgå hvert begreb.

Absolute enheder er måleenheder, der er faste; de ændrer sig ikke. Et offline eksempel på en absolut måleenhed ville være en meter – en meter tapet vil aldrig ændre sig. Absolute enheder i webudvikling inkluderer px (pixels), pt (points) og in (inches).

Relative enheder derimod, er størrelsesbestemt baseret på et overordnet element eller på størrelsen af visningsporten (dvs. skærmstørrelsen). Dette gør det muligt for dem at skalere jævnt op og ned, når skærmstørrelsen ændres. Hvis du vil designe websider med responsiv tekst, får du brug for relative enheder. Her er de mest almindelige relative enheder, du kan bruge til responsiv tekst:

De vigtigste relative enheder

Procent (%)

Du har måske set procent-enheden (%) før. Den indstiller størrelsen af et element til en procentdel af dets overordnede element. Hvis du indstiller en <img>-bredde til 50% og placerer den inde i en <div> med en bredde på 100px, vil billedet være 50 pixels bredt. Dette skyldes, at det er halvdelen af størrelsen (50%) af det 100-pixel overordnede <div>-element.

Skrifttyper fungerer på samme måde. Procent-enheden indstiller skrifttypen som en procentdel af det overordnede elements skriftstørrelse. Hvis jeg tildeler font-size: 50%; til et <span>, og derefter placerer det <span> inde i en <div> med en font-size på 32px, vil <span>-teksten være 16 pixels.

Viewport Width (vw) og Viewport Height (vh)

vw-enheden (viewport width) er relativ til bredden af visningsporten. Mere præcist er én vw lig med 1% af bredden af den aktuelle visningsport. Hvis du størrelsesbestemmer din tekst med denne enhed, vil teksten jævnt vokse og krympe, når du ændrer størrelsen på browservinduet, uanset hvor den befinder sig i din HTML-kode.

Jeg oplever, at brugen af vw alene har nogle bemærkelsesværdige ulemper. Der er ingen begrænsning for, hvor stor eller lille teksten kan vises. Det gør det svært at servere passende størrelse tekst til brugere, der besøger fra meget forskelligt størrelsesbestemte visningsporte.

Lad os sige, at du indstiller din font-size til 1.6vw. På en browser, der er 1000 pixels bred, vil teksten være en fin, læsbar 16 pixels stor. Men på en 300-pixel mobilskærm ville den samme tekst kun være omkring fem pixels, hvilket ikke er læsbart uden at zoome ind. Senere vil jeg vise, hvordan kombination af relative enheder kan afhjælpe dette.

Ligesom vw er vh (viewport height) relativ til højden af visningsporten. Denne enhed er underlagt de samme størrelsesproblemer som vw og bruges mindre hyppigt til tekst.

em

em-enheden er lig med skriftstørrelsen på det overordnede element. Hvis font-size for <body>-elementet er 16px, ville et underordnet afsnit med en font-size på 1em vise teksten som 16 pixels. Et underordnet afsnit med en font-size på 2em ville vise teksten som 32 pixels, dobbelt så stor som <body>'s skriftstørrelse.

em lader dig basere alle skriftstørrelser på din side relativt til ét element, såsom roden <html>- eller <body>-elementet. Så når størrelsen af det overordnede element ændres, vil al tekst indstillet med em-enheder ændre sig responsivt.

Selvom brugen af em-enheder lyder som en hurtig løsning på alle dine behov for responsiv skriftstørrelse, kan det blive svært at holde styr på dine tilsigtede skriftstørrelser, hvis du indstiller mange elementer med forskellige em-værdier. Husk: Én ændring i et overordnet element kan forstærkes på tværs af indlejrede underordnede elementer.

rem

rem-enheden (root em) ligner em. Men i stedet for at basere skriftstørrelsen på det overordnede element, er rem baseret på skriftstørrelsen af roden <html>-elementet. Hvis skriftstørrelsen for <html> er 16px, er al tekst, der bruger rem-enheder, størrelsesbestemt i forhold til den 16-pixel skriftstørrelse. Dette giver dig mulighed for at skalere tekst baseret på en enkelt værdi uden forstørrelsesproblemerne ved em.

rem er ofte den foretrukne enhed for mange udviklere, da den giver en mere forudsigelig og lettere at administrere skalering af tekst på tværs af et websted.

Nyttig sammenligning af relative enheder

Metode 1: Responsiv tekst med brudpunkter

Nu hvor vi forstår relative enheder, lad os se, hvordan vi kan implementere dem med to forskellige tilgange: responsiv tekst indstillet via brudpunkter og flydende tekst.

En tilgang til mobilvenlig tekst, og min personlige favorit, involverer indstilling af brudpunkter i CSS. Brudpunkter er specifikke visningsportbredder, der, når de nås, ændrer sidens layout på en eller anden måde. I vores tilfælde vil brudpunkter udløse en ændring i skriftstørrelsen.

1. Først skal vi oprette brudpunkter ved hjælp af medieforespørgsler, en funktion i CSS, der indsamler information om visningsenheden, herunder skærmstørrelse. Jeg anbefaler, at du starter med at indstille max-width medieforespørgsler for almindelige skærmstørrelser.
2. Definer derefter de tekststørrelser, du ønsker skal være forbundet med hver defineret medieforespørgsel. I koden ville medieforespørgslen for eksempel være for en telefon eller mobil enhed med en skærmstørrelse på 500px eller mindre.
3. Gentag denne proces så mange gange som nødvendigt for skærme af forskellige størrelser. Overvej størrelserne på de fleste tablets, bærbare computere, stationære computere og smart-tv'er.
4. Test disse brudpunkter ved at tilgå dit websted fra forskellige størrelser af visningsporte og forskellige enheder. Sørg for, at din tekst ser godt ud i enhver størrelse.

Mens denne tilgang er hurtig og nem, er den ikke perfekt. De enheder, dine brugere vil bruge til at tilgå dit websted, vil komme i alle former og størrelser. Der er ingen universel brudpunkt, der vil fungere perfekt for alle nuværende enheder. Desuden skal du overveje fremtidige enheder med nye skærmdimensioner.

Hvis du vil bruge denne tilgang, skal du regelmæssigt teste dine sider på tværs af forskellige skærme og justere dine brudpunkter i overensstemmelse hermed. Men brudpunkter er ikke din eneste mulighed.

Metode 2: Flydende tekst

I flydende webdesign indstilles størrelsen af sideelementer proportionalt med bredden af skærmen eller browservinduet. Mens brudpunkter kun ændrer skriftstørrelsen ved definerede trin, skalerer flydende tekst kontinuerligt, når skærmdimensionerne ændres for at passe til visningsenheden.

Hvis jeg bruger denne metode, behøver jeg ikke specificere skærmdimensioner i mine CSS-regler. Flydende tekst bruger vw-enheden. Som jeg allerede nævnte, kan brugen af vw alene forårsage problemer. Tekst kan vises i uoverskuelige størrelser (som min togbillet-hjemmeside). Men med tilføjelsen af lidt grundlæggende matematik kan vi lære at kontrollere vw's opførsel.

For at lave flydende tekst vil jeg kombinere vw- og rem-enheder ved hjælp af CSS's calc()-funktion. calc() lader os udføre aritmetiske operationer i CSS, selv mellem forskellige enheder. Sæt skriftstørrelsen på dit rodelement til 16px. Dette er standard. Nu kan du tilføje calc()-funktionen for at gøre tingene flydende. Med denne kode vil skrifttypen inde i et <p>-tag skalere én-til-én med visningsporten. Tilføjelsen af 1rem sikrer, at teksten altid vil være mindst 16 pixels, selv når visningsporten er nul pixels bred. Dette holder teksten i en læsbar størrelse på alle skærme. Som altid skal du sørge for at teste dit websted på tværs af en række forskellige størrelser af visningsporte og enheder for at sikre, at den flydende designtilgang giver dine brugere passende størrelse tekst.

Jeg vil advare dig om, at denne tilgang også kan have begrænsninger og kompromiser. I modsætning til brugen af brudpunkter vil dine skriftstørrelser være mere omtrentlige, og du vil have mindre granulær kontrol over, hvilke skriftstørrelser dine brugere ser. En anden udfordring med denne metode er, at jeg ikke har et loft for min skriftstørrelse, så bredere skærme kan føre til tekst, der er større end ønsket.

En bonus, tredje tilgang: At forene medieforespørgsler og flydende design

Nu hvor jeg har dækket både brudpunkter og flydende design, kan jeg fortælle dig om min foretrukne tilgang: at kombinere medieforespørgsler med flydende design. Jeg kan tilføje tre medieforespørgsler. Én indstiller en minimum skriftstørrelse, en anden en maksimum skriftstørrelse, og én midtimellem, der anvender flydende skalering.

Når visningsporten er mellem 400 og 1000 pixels bred, vil teksten skalere flydende. Ellers vil skriftstørrelsen være 1 rem på små skærme eller 1.75 rem på store skærme.

Med lidt justering vil denne metode fungere godt nok for de fleste hjemmesider. Vi skraber dog stadig kun overfladen af, hvad der er muligt med flydende tekst. Med mere matematik kan du være endnu mere præcis med din skriftstørrelse. Hvis du ønsker at dykke dybere ned i emnet flydende typografi, er der mange fremragende ressourcer online, men vær opmærksom på, at dette vil kræve mere indsats for at få det helt rigtigt.

Hvorfor responsiv tekst og skriftstørrelse betyder noget

Uanset hvilken metode du vælger, har dit websted brug for responsiv tekst for at være læsbar på tværs af enheder. Husk, at bedste praksis kan ændre sig, og at fremtiden kan bringe nye og uventede ændringer til webudvikling (og enhedsstørrelser). Responsiv tekst kan holde dig agil og hjælpe med at fremtidssikre dit websted.

Så for min næste vigtige togrejse regner jeg med, at udviklere som dig hjælper med at holde min mobile weboplevelse lige så læsbar som på min bærbare computer.

Ofte stillede spørgsmål om responsiv tekst

Hvorfor er responsiv tekst vigtig for min hjemmeside?
Responsiv tekst sikrer, at dit indhold er læsbart og brugervenligt på alle enheder, fra små smartphones til store desktop-skærme. Det forbedrer brugeroplevelsen og kan bidrage til bedre SEO, da søgemaskiner prioriterer mobilvenlige websteder.

Hvad er forskellen på absolute og relative enheder?
Absolute enheder (f.eks. px) har en fast størrelse, der ikke ændrer sig uanset skærmstørrelse. Relative enheder (f.eks. em, rem, vw, %) tilpasser sig dynamisk baseret på et referencepunkt som et forældrelement eller visningsportens størrelse, hvilket er afgørende for responsivt design.

Hvilken relativ enhed er bedst at bruge?
Der er ingen "bedste" enhed; det afhænger af konteksten. rem er populær for global tekstskalering, da den er baseret på roden og er forudsigelig. vw er god til flydende skalering. Ofte er en kombination af enheder og metoder (f.eks. rem med vw via calc() eller brudpunkter) den mest effektive løsning.

Hvad er brudpunkter, og hvordan bruges de?
Brudpunkter er specifikke skærmbredder, hvor du ændrer designet af din hjemmeside ved hjælp af CSS medieforespørgsler. For tekst kan de bruges til at definere forskellige skriftstørrelser for mobil, tablet og desktop, hvilket giver dig præcis kontrol over læsbarheden på forskellige enhedstyper.

Kan jeg kombinere flydende tekst og brudpunkter?
Ja, absolut! At kombinere flydende tekst (ved hjælp af vw og calc() for kontinuerlig skalering) med brudpunkter (for at definere minimums- og maksimumstørrelser eller specifikke ændringer ved bestemte skærmstørrelser) er en meget kraftfuld tilgang. Dette giver dig både fleksibilitet og kontrol over din typografi.

Hvis du vil læse andre artikler, der ligner Optimering af Tekst til Alle Skærme, kan du besøge kategorien Teknologi.