Skriftstørrelse, vægt og typografi
Styr tekststørrelsen med font-size, tykkelsen med font-weight og typografien med font-style.
Skriftstørrelse, vægt og typografi er en gratis CSS Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i CSS Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. CSS Academy-kurset indeholder 4 lektioner i alt.
font-size
font-size angiver højden på glyffer. Den accepterer alle længdeenheder. Det anbefales at bruge rem til skalerbar og tilgængelig typografi.
<h1>Heading (2.5rem)</h1>
<p>Body text (1rem)</p>
<small>Fine print (0.75rem)</small>
Nøglestørrelser for skrifttyper
CSS indeholder også absolutte nøglestørrelser (xx-small til xx-large) og relative nøglestørrelser (smaller, larger) i forhold til den overordnede skrifttypestørrelse.
<p class="note">Smaller note text</p>
<p class="big">Extra large text</p>
font-weight
font-weight angiver tekstens tykkelse. Brug numeriske værdier (100–900 i trin på 100) eller nøgleord:
<p class="thin">Thin weight (100)</p>
<p>Normal body weight (400) with <strong>bold strong text (700)</strong></p>
<p class="heavy">Heavy weight (900)</p>
font-weight og variable skrifttyper
Med variable skrifttyper er alle heltallige tykkelser gyldige (f.eks. font-weight: 550), og skrifttypen interpolerer mellem de definerede akser. Det giver finmasket kontrol over typografien.
font-style
font-style styrer visningen af kursiv og skrå tekst:
<p>This has <em>italic emphasis</em> inline.</p>
<p class="normal">Normal style text</p>
<p class="oblique">Oblique 20deg text</p>
font-variant
font-variant aktiverer typografiske funktioner som small-caps:
<p>The <abbr title="Cascading Style Sheets">CSS</abbr> abbreviation uses small-caps.</p>
Genvejsnotationen font
Genvejsnotationen font samler typografi, variant, tykkelse, størrelse, linjehøjde og skrifttypefamilie:
<p>Shorthand font: italic bold 1.1rem/1.6 Roboto.</p>
Responsiv skalering af skrifttypestørrelse
Brug clamp() til at oprette flydende typografi, der skaleres jævnt mellem en minimums- og maksimumsstørrelse:
<h1>Resize the window — this heading scales fluidly.</h1>
line-height for bedre læsbarhed
line-height angiver den lodrette afstand mellem linjer. Den enhedsløse værdi (f.eks. 1.5) anbefales, fordi den skaleres med efterkommerelementernes skrifttypestørrelse.
<h1>Tight Heading Line Height</h1>
<p>Body copy with relaxed 1.5 line-height wraps across multiple lines for comfortable reading, demonstrating the effect of the line-height property on paragraph text blocks.</p>
letter-spacing og word-spacing
letter-spacing tilføjer afstand mellem tegn, mens word-spacing tilføjer afstand mellem ord. Brug em-enheder, så de skaleres med skrifttypestørrelsen.
<h2 class="heading">Spaced Out Heading Text</h2>
Tilgængelig skrifttypestørrelse
Angiv aldrig font-size i px på elementet html eller body. Det tilsidesætter browserens brugerdefinerede præference for skrifttypestørrelse. Brug i stedet rem-enheder baseret på browserens standardstørrelse.
Hurtigt tjek
Hvilken numerisk værdi for font-weight svarer til nøgleordet bold?
Opsummering
Brug rem til font-size for at respektere brugerens præferencer. font-weight accepterer 100–900 eller nøgleord. Genvejsnotationen font samler flere egenskaber. Brug clamp() til flydende typografi og enhedsløs line-height for ensartet afstand.
Lær CSS med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 40
- Lektioner
- 159
Ofte stillede spørgsmål
Er lektionen “Skriftstørrelse, vægt og typografi” gratis?
Ja — hele teksten til “Skriftstørrelse, vægt og typografi” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af CSS Academy-kurset, skal du opgradere til CoddyKit PRO. CSS Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Skriftstørrelse, vægt og typografi”?
Styr tekststørrelsen med font-size, tykkelsen med font-weight og typografien med font-style. Du øver dig i CSS Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på CSS Academy?
Der kræves ingen tidligere erfaring. CSS Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.
Hvor lang tid tager lektionen “Skriftstørrelse, vægt og typografi”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne CSS Academy-lektion?
Ja. Alle CSS Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Skrifttypefamilier og web sikre skrifttyper
- Skriftstørrelse, vægt og typografi
- Tekstjustering, dekoration og afstand
- Google Fonts og @font-face