Tailwind CSS Academy · leksjon

Skriftstørrelse og skriftvekt

Bruk text-sm til text-9xl og font-thin til font-black for å kontrollere tekstens visuelle fremtredende karakter.

Leksjon 1 av 413 trinn

Skriftstørrelse og skriftvekt er en gratis leksjon i Tailwind CSS Academy på CoddyKit. Dette er leksjon 1 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.

Tailwinds skala for skriftstørrelser

Angi tekststørrelse med text-*-skalaen, fra text-xs til text-9xl. Velg blant disse trinnene i stedet for å skrive inn piksler, så forblir typografien konsekvent.

<p class="text-xs">Extra Small (12px)</p>
<p class="text-sm">Small (14px)</p>
<p class="text-base">Base (16px)</p>
<p class="text-lg">Large (18px)</p>
<p class="text-xl">Extra Large (20px)</p>
<p class="text-2xl">2XL (24px)</p>
<p class="text-4xl">4XL (36px)</p>
<p class="text-6xl">6XL (60px)</p>

Display- og hero-tekststørrelser

For stor display-tekst i hero-seksjoner kan De bruke text-7xl, text-8xl eller text-9xl. Kombiner dem med font-extrabold og tracking-tight for overskrifter som fanger oppmerksomheten.

<h1 class="text-7xl font-black tracking-tight text-gray-900">
  Make it big.
</h1>

Utility-klasser for skriftvekt

Kontroller tykkelsen med skriftvekt: font-normal for brødtekst, font-semibold for etiketter, font-bold for overskrifter og font-extrabold eller font-black for sterk utheving.

<p class="font-thin">Thin (100)</p>
<p class="font-light">Light (300)</p>
<p class="font-normal">Normal (400)</p>
<p class="font-medium">Medium (500)</p>
<p class="font-semibold">Semibold (600)</p>
<p class="font-bold">Bold (700)</p>
<p class="font-extrabold">Extrabold (800)</p>
<p class="font-black">Black (900)</p>

Kombinere størrelse og vekt

Størrelse og vekt er uavhengige, så de utfyller hverandre: text-sm font-medium for en navigasjonsetikett og text-4xl font-bold for en overskrift. Sammen skaper de hierarki.

<!-- Article typographic hierarchy -->
<h1 class="text-4xl font-bold text-gray-900 mb-2">Main Headline</h1>
<h2 class="text-2xl font-semibold text-gray-700 mb-4">Section Title</h2>
<p class="text-base font-normal text-gray-600 mb-2">Body paragraph text...</p>
<span class="text-xs font-medium text-gray-400">Caption or metadata</span>

Responsive skriftstørrelser

Teksten kan skalere med skjermen. Legg til et bruddprefiks som md: foran en hvilken som helst størrelse – text-3xl md:text-5xl er liten på telefoner og stor på datamaskiner.

<h1 class="text-2xl md:text-4xl lg:text-6xl font-extrabold text-gray-900">
  Scales with the screen
</h1>

Skriftstil: Kursiv

Legg til kursiv for å skråstille tekst, og not-italic for å tilbakestille den. Det passer godt til sitater og kildehenvisninger – italic font-light text-gray-500 gir den klassiske følelsen fra en anbefaling.

<blockquote class="italic font-light text-gray-500 text-lg border-l-4 border-indigo-400 pl-4">
  'Tailwind makes styling enjoyable again.'
</blockquote>
<cite class="text-sm font-medium text-gray-700">— A happy developer</cite>

Numerisk skriftvariant

For tall gjør tabular-nums hvert siffer like bredt, slik at priser og statistikk stiller pent på linje i tabeller og kolonner. En liten detalj som ser svært ryddig ut.

<!-- Tabular numbers align in columns -->
<table>
  <tr>
    <td class="tabular-nums text-right">1,234.56</td>
  </tr>
  <tr>
    <td class="tabular-nums text-right">98,765.00</td>
  </tr>
</table>

Praktisk: Typografi i navigasjonen

Navigasjonslenker passer godt med et lite, middels uttrykk: text-sm font-medium. Marker den aktive lenken ved å endre den til font-semibold text-indigo-600, slik at den skiller seg ut.

<nav class="flex gap-6">
  <a href="#" class="text-sm font-medium text-gray-600 hover:text-gray-900">Home</a>
  <a href="#" class="text-sm font-semibold text-indigo-600">Products</a>
  <a href="#" class="text-sm font-medium text-gray-600 hover:text-gray-900">About</a>
</nav>

Praktisk: Brødtekst i artikler

Behagelig brødtekst er text-base eller text-lg med luftig avstand og text-gray-700, ikke hardt svart. Legg til max-w-prose for å holde linjene på en behagelig lesebredde.

<article class="max-w-prose mx-auto">
  <p class="text-lg font-normal text-gray-700 leading-relaxed">
    This is body text set at a comfortable reading size.
    The max-w-prose constraint keeps lines short enough
    to read without losing your place.
  </p>
</article>

Praktisk: Typografi for datavisning

For dashbord bør tallene poppe: text-3xl font-bold text-gray-900 for en verdi, med en mindre text-sm uppercase tracking-wider-etikett over.

<div class="text-center">
  <p class="text-sm font-medium text-gray-500 uppercase tracking-wider">
    Total Users
  </p>
  <p class="text-3xl font-bold text-gray-900 tabular-nums">
    24,781
  </p>
</div>

Vanlig referanse for skriftstørrelser

Et raskt mentalt kart: text-xs for bildetekster, text-base for brødtekst, text-2xl til text-4xl for overskrifter, text-5xl og større for hero-tekst. Tilpass hver av dem med riktig skriftvekt.

Rask sjekk

Rask sjekk! Se hvordan størrelse og skriftvekt festet seg. 🔤

Besvar den i den interaktive leksjonen

Oppsummering av leksjonen

Flott! text-* styrer størrelsen, font-thin til font-black angir skriftvekten, og en kombinasjon av størrelse, skriftvekt og farge bygger hierarki. Neste tema: tekstfarge og opasitet.

Gratis å komme i gang

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

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Skriftstørrelse og skriftvekt» gratis?

Ja – hele teksten i «Skriftstørrelse og skriftvekt» 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 «Skriftstørrelse og skriftvekt»?

Bruk text-sm til text-9xl og font-thin til font-black for å kontrollere tekstens visuelle fremtredende karakter. 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 1 av 4.

Hvor lang tid tar leksjonen «Skriftstørrelse og skriftvekt»?

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

← Tilbake til Tailwind CSS Academy