CSS - Tekst og Fonter

Tekst er den viktigste måten vi formidler informasjon på en nettside. Med CSS har du full kontroll over hvordan teksten ser ut: hvilken skrifttype (font) som brukes, hvor stor og fet teksten er, linjeavstand, justering og farger.

1. Skrifttyper: `font-family`

Egenskapen font-family bestemmer hvilken skrifttype teksten skal vises med. Fordi ikke alle datamaskiner eller telefoner har de samme fontene installert, oppgir vi vanligvis en fallback-liste (prioritert liste) separert med komma.

p {
   font-family: 'Outfit', 'Segoe UI', Arial, sans-serif;
 }

Nettleseren leser listen fra venstre mot høyre: Hvis Outfit ikke er tilgjengelig, prøver den Segoe UI, deretter Arial, og til slutt en hvilken som helst sans-serif (skrift uten føtter).

De fem generiske font-familiene:

sans-serif: Rene fonter uten "føtter" (f.eks. Arial, Helvetica, Outfit). Svært populære og lettleste på digitale skjermer.
Eksempel på sans-serif tekst (ren og moderne).
serif: Klassiske fonter med små tverrstreker/"føtter" i endene av bokstavene (f.eks. Times New Roman, Georgia). Ofte brukt i bøker og aviser.
Eksempel på serif tekst med føtter.
monospace: Fonter der alle tegn har nøyaktig samme bredde (f.eks. Courier New, Fira Code). Perfekt for kode og tabeller.
Eksempel på monospace (kodefont).
cursive: Fonter som ligner håndskrift.
Eksempel på cursive håndskrift.
fantasy: Dekorative og kunstneriske fonter (f.eks. Impact, Papyrus).
Eksempel på dekorativ fantasy-font.

Google Fonts: For å bruke moderne nettfonter som ikke finnes på brukerens maskin, kan du importere dem fra f.eks. Google Fonts via <link> i HTML eller @import øverst i CSS-filen:

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap');

2. Størrelse og Linjeavstand: `font-size` & `line-height`

God lesbarhet krever en god balanse mellom tekststørrelse og avstanden mellom linjene.

font-size: Setter tekstens størrelse. Standardstørrelsen i de fleste nettlesere er 16px. Vi kan oppgi størrelsen i piksler (px) eller relative enheter (rem).
line-height: Bestemmer vertikal avstand mellom tekstlinjer. Hvis teksten står for tett sammen blir den vanskelig å lese. En verdi på 1.5 eller 1.6 (uten enhet) regnes som optimalt for vanlig brødtekst.

p {
   font-size: 1.125rem; /* Tilsvarer 18px */
   line-height: 1.6; /* 1.6 ganger skriftstørrelsen */
 }

3. Skriftvekt og Stil: `font-weight` & `font-style`

Vi bruker disse egenskapene til å utheve tekst eller gjøre den kursiv:

font-weight: Angir hvor "fet" eller kraftig skriften skal være.
- Nøkkelord: normal (tilsvarer 400) og bold (tilsvarer 700).
- Tallverdier: 100 (tynnest) opp til 900 (kraftigst).
font-style: Brukes primært til å gjøre tekst kursiv med italic, eller tilbakestille den med normal.

.viktig-tekst {
   font-weight: 700; /* Fet skrift */
   font-style: italic; /* Kursiv skrift */
 }

4. Tekstjustering og Effekter

Med disse egenskapene styrer du hvordan ord og linjer posisjoneres og pyntes:

text-align: Bestemmer horisontal justering av teksten inni blokken: left (venstre), center (midtstilt), right (høyre) eller justify (blokkjustert).
text-decoration: Legger til eller fjerner streker under, over eller gjennom teksten. Svært vanlig for å fjerne standard understrek på lenker: none, underline, line-through.
text-transform: Endrer store og små bokstaver automatisk: uppercase (STORE BOKSTAVER), lowercase (små bokstaver) eller capitalize (Stor Forbokstav I Hvert Ord).
letter-spacing: Justerer avstanden mellom bokstavene (f.eks. 1px eller 2px).

/* Fjerne understrek på lenker og gjøre dem til store bokstaver */
 a.knapp {
   text-decoration: none;
   text-transform: uppercase;
   letter-spacing: 1px;
 }

Interaktiv Tekstformatering-lekeplass 🎨

Eksperimenter med kontrollene nedenfor for å se hvordan de ulike CSS-egenskapene endrer tekstens utseende i sanntid:

font-family:

font-size:

font-weight:

font-style:

text-align:

text-decoration:

line-height:

text-transform:

letter-spacing:

Forhåndsvisning i nettleseren:

Webutvikling med CSS gir deg full kreativ frihet til å forme og style tekst. Riktig typografi skaper god struktur, høy lesbarhet og et profesjonelt visuelt uttrykk på alle skjermer!

.min-tekst {
   font-family: 'Outfit', sans-serif;
   font-size: 18px;
   font-weight: 400;
   font-style: normal;
   text-align: left;
   text-decoration: none;
   line-height: 1.6;
   text-transform: none;
   letter-spacing: 0px;
 }

🗝️ Sentrale Begreper innen Tekst og Fonter

font-family: Skrifttypen som brukes for teksten, inkludert fallbacks.
font-size: Størrelsen på teksten (f.eks. i px eller rem).
font-weight: Skriftens tykkelse/vekt (f.eks. normal, bold, 400, 700).
line-height: Linjehøyden/avstanden mellom linjene i et avsnitt.
text-align: Justering av teksten (venstre, høyre, midtstilt, blokkjustert).
text-decoration: Visuell dekorasjon på tekst (f.eks. understrek eller ingen strek på lenker).
Fallback-font: En reserve-skrifttype nettleseren bruker dersom primærfonten ikke er tilgjengelig.