Linjehøyde og bokstavavstand
Kontroller lesbarheten med leading-*-verktøy for linjehøyde og tracking-*-verktøy for bokstavavstand.
Linjehøyde og bokstavavstand 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 linjehøyde er viktig
Linjehøyde er avstanden mellom linjene. For liten avstand føles trangt, mens for stor avstand føles spredt. Riktig linjehøyde gjør lang tekst merkbart enklere å lese.
Tailwinds leading-*-verktøy
Angi den med leading-*-verktøyene: leading-tight (1.25), leading-normal (1.5), leading-relaxed (1.625), leading-loose (2.0). Navnet stammer fra eldre trykkerifag.
<p class="leading-tight">Tight: good for headings</p>
<p class="leading-normal">Normal: default for most text</p>
<p class="leading-relaxed">Relaxed: comfortable for body text</p>
<p class="leading-loose">Loose: for spacious editorial layouts</p>Leading for overskrifter og brødtekst
Bruk leading-tight for overskrifter, siden stor tekst allerede har god plass, og leading-relaxed for brødtekst, som trenger mer luft. leading-normal er et trygt standardvalg.
<h1 class="text-4xl font-bold leading-tight text-gray-900">
A Two-Line Heading That
Stays Tightly Together
</h1>
<p class="text-base leading-relaxed text-gray-600 mt-4">
Body paragraph text benefits from more line spacing.
It makes long passages easier to follow line by line.
</p>Faste leading-verdier
Tailwind har også fast leading: leading-3 til leading-10 angir nøyaktige høyder i piksler. Bruk dette i tabeller eller kompakte grensesnitt der du trenger presis avstand.
<p class="leading-3">Very tight (12px)</p>
<p class="leading-5">Compact (20px)</p>
<p class="leading-7">Comfortable (28px)</p>
<p class="leading-10">Spacious (40px)</p>Introduksjon til bokstavavstand
Bokstavavstand, eller tracking, er avstanden mellom tegnene. Tett tracking føles moderne i store overskrifter, mens stor avstand passer for korte etiketter som merker og tagger.
Tailwinds tracking-*-verktøy
Styr den med tracking-*: fra tracking-tighter og tracking-tight, via normal, til tracking-wide og tracking-widest. Negative verdier trekker tegnene sammen, positive verdier sprer dem.
<p class="tracking-tighter">Tighter: editorial large headings</p>
<p class="tracking-normal">Normal: default body text</p>
<p class="tracking-wide">Wide: comfortable subheadings</p>
<p class="tracking-widest">Widest: UI labels and badges</p>Tracking for store visningsoverskrifter
Store visningsoverskrifter trenger nesten alltid tracking-tight eller tracking-tighter. Ved store størrelser føles standardavstanden løs, og en tettere avstand ser mer gjennomarbeidet ut.
<!-- Without tracking adjustment -->
<h1 class="text-6xl font-bold">Feels Loose</h1>
<!-- Professional: tighter tracking at large sizes -->
<h1 class="text-6xl font-bold tracking-tight">Feels Cohesive</h1>Tracking for UI-etiketter
For UI-etiketter med versaler kan De prøve text-xs font-semibold uppercase tracking-wider text-gray-500. Den ekstra avstanden motvirker at versaler kan føles trange.
<!-- Dashboard section label -->
<span class="text-xs font-semibold uppercase tracking-wider text-gray-500">
Recent Activity
</span>
<!-- Badge -->
<span class="bg-green-100 text-green-700 text-xs font-semibold uppercase tracking-wider px-2 py-1 rounded-full">
Active
</span>Kombinere leading og tracking
Leading og tracking fungerer svært godt sammen. Et sitat kan bruke leading-relaxed tracking-wide for et luftig uttrykk, mens en måleetikett kan bruke tracking-widest leading-none.
<!-- Pull quote style -->
<blockquote class="text-2xl italic font-light leading-relaxed tracking-wide text-gray-600">
'Design is intelligence made visible.'
</blockquote>
<!-- Dashboard label style -->
<p class="text-xs font-bold uppercase tracking-widest leading-none text-gray-500">
Revenue MTD
</p>Verktøy for ordavstand
Tailwind har også ordavstand: word-spacing-tight, normal og wide justerer avstanden mellom ord. De trenger det sjelden, hovedsakelig for blokkjustert tekst eller visningstekst.
<p class="word-spacing-wide text-gray-700">
Extra space between each word in this sentence.
</p>Praktisk: stiler for blogginnlegg
Et gjennomarbeidet blogginnlegg: text-4xl font-bold leading-tight for tittelen, text-xl font-light for undertittelen, text-lg leading-relaxed for brødteksten og max-w-prose for linjebryting.
<article class="max-w-prose mx-auto px-4">
<h1 class="text-4xl font-bold leading-tight tracking-tight text-gray-900 mb-2">
Article Title
</h1>
<p class="text-xl font-light leading-snug text-gray-500 mb-8">
A compelling subtitle for the article.
</p>
<p class="text-lg leading-relaxed text-gray-700">
The body of the article content goes here.
</p>
</article>Rask sjekk
Rask sjekk! Se hvordan avstanden falt på plass. 📏
Oppsummering av leksjonen
Flott! leading-* angir linjehøyde, tracking-* angir bokstavavstand, og overskrifter liker tett tracking mens brødtekst liker luftig leading. Neste tema: justering og dekorasjon.
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 «Linjehøyde og bokstavavstand» gratis?
Ja – hele teksten i «Linjehøyde og bokstavavstand» 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 «Linjehøyde og bokstavavstand»?
Kontroller lesbarheten med leading-*-verktøy for linjehøyde og tracking-*-verktøy for bokstavavstand. 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 «Linjehøyde og bokstavavstand»?
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
- Skriftstørrelse og skriftvekt
- Tekstfarge og gjennomsiktighet
- Linjehøyde og bokstavavstand
- Tekstjustering og dekorasjon