Responsiv typografi og avstand
Juster skriftstørrelser og avstander ved ulike breakpoints for å bevare lesbare og proporsjonale design på alle enheter.
Responsiv typografi og avstand er en gratis leksjon i Tailwind CSS Academy på CoddyKit. Dette er leksjon 3 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Tailwind CSS Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Tailwind CSS Academy inneholder totalt 4 leksjoner.
Hvorfor typografi må skaleres
En overskrift som ser elegant ut med 48px på en stasjonær skjerm, blir overveldende på en telefonskjerm på 375px. Omvendt blir brødtekst på 14px, som er behagelig på mobil, liten og vanskelig å lese på en stor 4K-skjerm. Responsiv typografi løser dette ved å definere ulike skriftstørrelser for ulike visningsbredder, slik at teksten er lett å lese på alle enheter. Tailwind gjør dette enkelt med responsive verktøy for tekststørrelse.
<!-- Hero headline: grows with screen size -->
<h1 class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-bold leading-tight">
Build Beautiful UIs
</h1>Responsive skriftstørrelser
Tailwinds text-*-verktøy passer naturlig sammen med responsive prefikser. En typisk overskriftsskala starter med text-2xl på mobil og øker trinnvis til text-5xl eller mer på stasjonære skjermer. Brødtekst kan gå fra text-sm på mobil til text-base på stasjonære skjermer. Det viktigste er å velge behagelige startstørrelser for de minste enhetene og deretter øke dem gradvis.
<!-- Typography scale across breakpoints -->
<div class="space-y-6 p-6 max-w-4xl">
<!-- Display heading: large jump from mobile to desktop -->
<h1 class="text-3xl md:text-5xl lg:text-7xl font-black tracking-tight">
Display Heading
</h1>
<!-- Section heading -->
<h2 class="text-xl md:text-2xl lg:text-3xl font-bold">Section Heading</h2>
<!-- Body copy -->
<p class="text-sm md:text-base lg:text-lg text-gray-700 leading-relaxed max-w-prose">
Body copy scales from small on mobile to base on tablet to large on desktop for comfortable reading at every size.
</p>
<!-- Caption / meta -->
<p class="text-xs md:text-sm text-gray-500">Caption text</p>
</div>Responsiv linjehøyde
Linjehøyde påvirker lesbarheten forskjellig ved ulike tekststørrelser. Stor visningstekst trenger tettere linjehøyde (leading-tight eller leading-none) for å se helhetlig ut, mens brødtekst har fordel av rikelig med mellomrom (leading-relaxed eller leading-loose). Ved store bruddpunkter endrer overskrifter i visningstekst ofte linjehøyden: leading-tight md:leading-none unngår uheldig stabling av en overskrift over to linjer når den blir én linje på bredere skjermer.
<!-- Leading adapts with font size -->
<h1 class="text-3xl leading-snug md:text-5xl md:leading-tight lg:text-7xl lg:leading-none font-black">
This Long Headline Wraps
</h1>
<p class="text-sm leading-normal md:text-base md:leading-relaxed lg:text-lg lg:leading-loose text-gray-600 max-w-prose mt-4">
Paragraph text uses relaxed line-height for comfortable reading across all screen sizes.
</p>Responsiv bokstavavstand
Bokstavavstand (tracking) har også fordel av responsive justeringer. Tett bokstavavstand kan se rotete ut i liten tekst, mens større bokstavavstand kan få kompakte overskrifter til å virke luftigere. Mønsteret tracking-tight md:tracking-tighter gjør bokstavavstanden enda tettere når skriftstørrelsen øker på stasjonære skjermer. Dette er en profesjonell typografisk konvensjon for stor visningstekst.
<!-- Letter spacing tightens as font size grows -->
<h1 class="text-3xl tracking-normal md:text-5xl md:tracking-tight lg:text-7xl lg:tracking-tighter font-black">
Brand Name
</h1>
<!-- Uppercase labels: wider tracking for legibility -->
<p class="text-xs md:text-sm font-semibold uppercase tracking-widest text-gray-500">
CATEGORY LABEL
</p>Responsiv tekstjustering
Tekstjustering er en av de mest virkningsfulle responsive endringene. Hero-seksjoner og funksjonsbeskrivelser er vanligvis sentrert på mobil (der skjermen er smal og sentrering skaper visuell balanse), men venstrejustert på stasjonære skjermer (der lange linjer med sentrert tekst blir vanskelige å lese og virker løsrevet). Mønsteret text-center md:text-left bruker denne vanlige konvensjonen.
<!-- Center on mobile, left-align on desktop -->
<div class="flex flex-col md:flex-row gap-8 items-center p-8">
<div class="md:w-1/2 text-center md:text-left">
<p class="text-sm font-semibold uppercase tracking-widest text-blue-500 mb-2">New Release</p>
<h2 class="text-3xl md:text-4xl font-bold mb-4">Tailwind CSS v4</h2>
<p class="text-gray-600 max-w-prose md:max-w-none">
The next generation of utility-first CSS.
</p>
<button class="mt-6 bg-blue-600 text-white px-6 py-3 rounded-lg">
Read the Docs
</button>
</div>
<div class="md:w-1/2">
<div class="aspect-video bg-gradient-to-br from-blue-400 to-indigo-600 rounded-2xl"></div>
</div>
</div>Responsiv innvendig marg for seksjoner
Innvendig marg i en seksjon angir luftrommet mellom UI-blokker. Vanlig praksis er kompakt innvendig marg på mobil (py-10 px-4) og rikelig med innvendig marg på stasjonære skjermer (lg:py-24 lg:px-8). Den indre beholderen får sin egen begrensning av den horisontale innvendige margen via max-w-7xl mx-auto, mens den ytre seksjonen kan ha en bakgrunn som strekker seg over hele bredden. Denne todelte tilnærmingen til innvendig marg er grunnlaget for de fleste sidelayouts.
<!-- Two-layer padding: outer section + inner container -->
<section class="bg-gray-50 py-10 px-4 sm:py-14 sm:px-6 lg:py-20 lg:px-8">
<!-- Inner container constrains content width -->
<div class="max-w-6xl mx-auto">
<h2 class="text-2xl sm:text-3xl lg:text-4xl font-bold text-center mb-6 lg:mb-12">
Our Services
</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-white p-6 rounded-xl shadow-sm">Service 1</div>
<div class="bg-white p-6 rounded-xl shadow-sm">Service 2</div>
<div class="bg-white p-6 rounded-xl shadow-sm">Service 3</div>
</div>
</div>
</section>Responsivt mellomrom mellom elementer
Vertikal rytme — mellomrommet mellom overskrifter, avsnitt og seksjoner — bør være proporsjonalt større på bredere skjermer. Ved å bruke Tailwinds space-y-* med responsive prefikser: space-y-4 md:space-y-6 lg:space-y-8 økes avstanden mellom stablede barn ved større bruddpunkter. Dette opprettholder det visuelle hierarkiet når elementene får større avstand på bredere skjermer.
<!-- Vertical spacing scales with screen width -->
<article class="max-w-prose mx-auto px-4 py-8">
<div class="space-y-4 md:space-y-6 lg:space-y-8">
<h1 class="text-2xl md:text-3xl font-bold">Article Title</h1>
<p class="text-gray-700 leading-relaxed">
First paragraph. The space between elements grows as the screen gets wider.
</p>
<h2 class="text-xl md:text-2xl font-semibold">Section Heading</h2>
<p class="text-gray-700 leading-relaxed">
Second section content with proportional vertical spacing.
</p>
</div>
</article>Responsiv max-w for lesbarhet
Brødtekst bør begrenses til en lesbar linjelengde på brede skjermer. Uten en max-width kan tekst på en 1920px-skjerm strekke seg over mer enn 200 tegn per linje — langt mer enn det som er behagelig å lese. Bruk max-w-prose på tekstbeholdere. Det begrenser teksten til 65 tegn (65ch). På mobil brytes teksten naturlig før denne grensen nås, så max-w-prose fungerer i praksis responsivt uten prefiks for bruddpunkt.
<!-- max-w-prose for readable text at any viewport -->
<div class="px-4 py-8">
<h1 class="text-3xl font-bold mb-4">Long Form Content</h1>
<!-- Constrained to 65ch for reading comfort -->
<div class="max-w-prose">
<p class="text-gray-700 leading-relaxed mb-4">
This paragraph is constrained to a comfortable reading width of 65 characters
per line regardless of the viewport size. On mobile it wraps naturally.
On desktop monitors it stays narrow and readable.
</p>
<p class="text-gray-700 leading-relaxed">
Long form writing, documentation, and blog posts benefit enormously
from this constraint. Wide text is one of the most common readability
mistakes in web design.
</p>
</div>
</div>Responsiv skriftvekt og stil
Selv om det er mindre vanlig, kan også skriftvekt og stil være responsive. Et firmanavn eller et slagord kan vises med normal skriftvekt på mobil (mindre visuell tyngde og bedre gjengivelse i liten størrelse) og med fet skrift på stasjonære skjermer (der skriften gjengis skarpt i store størrelser). font-medium md:font-bold oppnår dette. Responsiv kursiv (md:not-italic) kan på samme måte normalisere dekorative stiler som bare trengs på små skjermer.
<!-- Responsive font weight and style -->
<div class="space-y-2 p-4">
<p class="font-medium md:font-bold text-xl">Company Name</p>
<p class="text-sm font-light md:font-normal text-gray-600">
Subheading text gets slightly heavier on larger screens
</p>
<!-- Label: thin on mobile, bold on desktop -->
<span class="text-xs font-thin sm:font-medium uppercase tracking-widest text-blue-500">
FEATURED
</span>
</div>Flytende typografi med Clamp
Selv om Tailwinds bruddpunkttilnærming dekker de fleste behov, gjør CSS clamp() det mulig å bruke virkelig flytende skriftstørrelser som skaleres kontinuerlig mellom et minimum og et maksimum uten faste sprang. Med Tailwinds syntaks for vilkårlige verdier: text-[clamp(1.5rem,5vw,3rem)] settes skriften til minst 1.5rem og høyst 3rem, mens den skaleres flytende med 5 % av visningsbredden imellom. Dette unngår plutselige størrelsessprang ved bruddpunktene og kan gi et mer gjennomarbeidet, magasinlignende uttrykk.
<!-- Fluid heading using CSS clamp -->
<h1
class="font-black tracking-tight leading-none"
style="font-size: clamp(2rem, 6vw, 5rem)"
>
Fluid Heading
</h1>
<!-- Same with Tailwind arbitrary value (JIT) -->
<p
class="text-[clamp(0.875rem,2.5vw,1.125rem)] text-gray-700 leading-relaxed max-w-prose"
>
Fluid body text scales from 14px at mobile widths to 18px at wide screens.
</p>Komplett responsiv artikkellayout
Her er en komplett, produksjonsklar artikkelheader som bruker alle teknikkene for responsiv typografi og avstand fra denne leksjonen. Overskriften, underoverskriften, metainformasjonen og brødteksten bruker alle responsiv størrelse, vekt, justering og avstand — og skaper en profesjonell leseopplevelse fra mobil til stasjonær skjerm uten en eneste linje egendefinert CSS.
<article class="px-4 py-10 sm:px-6 sm:py-14 lg:py-20">
<div class="max-w-3xl mx-auto">
<!-- Label -->
<p class="text-xs sm:text-sm font-semibold uppercase tracking-widest text-blue-500 mb-3">Tutorial</p>
<!-- Headline -->
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-black leading-tight sm:leading-snug mb-4">
Mastering Responsive Typography in Tailwind
</h1>
<!-- Subheadline -->
<p class="text-lg sm:text-xl text-gray-600 leading-relaxed max-w-2xl mb-6">
Learn how font sizes, spacing, and alignment adapt across breakpoints.
</p>
<!-- Meta -->
<div class="flex items-center gap-4 text-sm text-gray-400">
<span>June 21, 2024</span>
<span>•</span>
<span>5 min read</span>
</div>
</div>
</article>Kort kontroll
Test forståelsen Deres av konseptene i Tailwind CSS Mastery fra denne leksjonen.
Oppsummering av leksjonen
I denne leksjonen lærte De: text-3xl sm:text-4xl lg:text-6xl oppretter en responsiv overskriftsskala fra mobil til stasjonær skjerm, text-center md:text-left er standardmønsteret for responsiv tekstjustering i hero-seksjoner, og max-w-prose begrenser brødteksten til 65 tegn per linje for behagelig lesing uten behov for bruddpunkter. Neste tema er hvordan elementer vises og skjules responsivt.
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 30
- Leksjoner
- 120
Ofte stilte spørsmål
Er leksjonen «Responsiv typografi og avstand» gratis?
Ja – hele teksten i «Responsiv typografi og avstand» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Tailwind CSS Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Tailwind CSS Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Responsiv typografi og avstand»?
Juster skriftstørrelser og avstander ved ulike breakpoints for å bevare lesbare og proporsjonale design på alle enheter. Du øver på Tailwind CSS Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Tailwind CSS Academy?
Ingen tidligere erfaring er nødvendig. Tailwind CSS Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.
Hvor lang tid tar leksjonen «Responsiv typografi og avstand»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Tailwind CSS Academy-leksjonen?
Ja. Alle Tailwind CSS Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Tailwinds breakpoint-system
- Responsive oppsett med flex og grid
- Responsiv typografi og avstand
- Vise og skjule elementer responsivt