Tekst og Typografi

CSS gir deg full kontroll over hvordan tekst ser ut på nettsiden din.

font-family

Bestemmer hvilken skrifttype som brukes.

p {
    font-family: Arial;
}

Flere valg (fallback)

Nettleseren bruker første tilgjengelige font:

p {
    font-family: "Helvetica Neue", Arial, sans-serif;
}

Prøver "Helvetica Neue"
Hvis ikke tilgjengelig, prøver Arial
Hvis ikke tilgjengelig, bruker standard sans-serif

Anførselstegn

Bruk anførselstegn rundt fontnavn med mellomrom: "Times New Roman"

Generiske skriftfamilier

Familie	Beskrivelse	Eksempler
`serif`	Med "føtter"	Times New Roman, Georgia
`sans-serif`	Uten "føtter"	Arial, Helvetica
`monospace`	Like brede tegn	Courier New, Consolas
`cursive`	Håndskrift	Comic Sans, Brush Script
`fantasy`	Dekorative	Impact, Papyrus

serif:       Times New Roman
             ↓
             T  (med føtter/serifs)
            ─┴─

sans-serif:  Arial
             ↓
             T  (uten føtter)

Trygge web-fonter

Disse fontene finnes på de fleste datamaskiner:

/* Sans-serif */
font-family: Arial, sans-serif;
font-family: Verdana, sans-serif;
font-family: Tahoma, sans-serif;

/* Serif */
font-family: "Times New Roman", serif;
font-family: Georgia, serif;

/* Monospace */
font-family: "Courier New", monospace;
font-family: Consolas, monospace;

Google Fonts

Bruk tusenvis av gratis fonter fra Google:

1. Legg til i HTML <head>:

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

2. Bruk i CSS:

body {
    font-family: 'Roboto', sans-serif;
}

font-size

Bestemmer tekststørrelsen.

p {
    font-size: 16px;
}

Enheter

Enhet	Type	Beskrivelse
`px`	Absolutt	Piksler
`em`	Relativ	Relativt til forelder
`rem`	Relativ	Relativt til rot (`<html>`)
`%`	Relativ	Prosent av forelder

px (piksler)rem (anbefalt)em

Fast størrelse, endres ikke.

h1 { font-size: 32px; }
p { font-size: 16px; }
small { font-size: 12px; }

Relativt til rot-elementet (vanligvis 16px).

html { font-size: 16px; }  /* Standard */

h1 { font-size: 2rem; }    /* 32px */
p { font-size: 1rem; }     /* 16px */
small { font-size: 0.75rem; } /* 12px */

Relativt til foreldreelementet.

.parent { font-size: 20px; }
.child { font-size: 1.5em; }  /* 30px (20 × 1.5) */

Bruk rem

rem er enklest å jobbe med fordi det alltid er relativt til samme verdi.

Typisk størrelseshierarki

h1 { font-size: 2.5rem; }    /* 40px */
h2 { font-size: 2rem; }      /* 32px */
h3 { font-size: 1.5rem; }    /* 24px */
h4 { font-size: 1.25rem; }   /* 20px */
p { font-size: 1rem; }       /* 16px */
small { font-size: 0.875rem; } /* 14px */

font-weight

Bestemmer hvor tykk/tynn teksten er.

p {
    font-weight: bold;
}

Verdier

Verdi	Tallverdi	Beskrivelse
`normal`	400	Vanlig
`bold`	700	Fet
`lighter`	–	Tynnere enn forelder
`bolder`	–	Tykkere enn forelder

.light { font-weight: 300; }
.normal { font-weight: 400; }
.medium { font-weight: 500; }
.semibold { font-weight: 600; }
.bold { font-weight: 700; }
.black { font-weight: 900; }

300: Thin text
400: Normal text
500: Medium text
600: Semibold text
700: Bold text
900: Black text

font-style

Kursiv eller normal tekst.

em {
    font-style: italic;
}

Verdi	Beskrivelse
`normal`	Vanlig
`italic`	Kursiv
`oblique`	Skrå (sjelden brukt)

line-height

Avstanden mellom tekstlinjer.

p {
    line-height: 1.6;
}

line-height: 1.0          line-height: 1.6
┌────────────────┐        ┌────────────────┐
│Lorem ipsum     │        │Lorem ipsum     │
│dolor sit amet  │        │                │
│consectetur     │        │dolor sit amet  │
│adipiscing elit │        │                │
└────────────────┘        │consectetur     │
                          │                │
                          │adipiscing elit │
                          └────────────────┘

God lesbarhet

For brødtekst er line-height: 1.5 til 1.8 vanligvis best.

Verdier

line-height: 1.6;      /* Multiplum (anbefalt) */
line-height: 24px;     /* Piksler */
line-height: 150%;     /* Prosent */
line-height: normal;   /* Ca. 1.2 */

text-align

Justerer teksten horisontalt.

p {
    text-align: center;
}

leftcenterrightjustify

Teksten starter
fra venstre side
slik som dette

   Teksten er
   sentrert
   slik som dette

       Teksten er
  høyrejustert
  slik som dette

Teksten strekkes
så  den  fyller
hele  linjebredden

text-decoration

Legg til eller fjern dekorasjoner.

a {
    text-decoration: none;  /* Fjern understreking */
}

.strike {
    text-decoration: line-through;  /* Gjennomstreking */
}

Verdi	Resultat
`none`	Ingen dekorasjon
`underline`	Understreking
`overline`	Linje over
`line-through`	~~Gjennomstreking~~

Kombinere og style

a {
    text-decoration: underline;
    text-decoration-color: red;
    text-decoration-style: wavy;
    text-decoration-thickness: 2px;
}

/* Shorthand */
a {
    text-decoration: underline wavy red 2px;
}

text-transform

Endre mellom store og små bokstaver.

h1 {
    text-transform: uppercase;
}

Verdi	Input	Output
`uppercase`	Hei verden	HEI VERDEN
`lowercase`	Hei Verden	hei verden
`capitalize`	hei verden	Hei Verden
`none`	Hei Verden	Hei Verden

letter-spacing

Avstanden mellom bokstaver.

h1 {
    letter-spacing: 2px;
}

Normal:   TEKST
2px:      T E K S T
-1px:     TEKST (tettere)

word-spacing

Avstanden mellom ord.

p {
    word-spacing: 5px;
}

text-indent

Innrykk på første linje.

p {
    text-indent: 2em;
}

    Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Sed
do eiusmod tempor incididunt.
↑
innrykk

text-shadow

Legg til skygge på tekst.

h1 {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

text-shadow: x y blur farge;

Verdi	Beskrivelse
`x`	Horisontal forskyvning
`y`	Vertikal forskyvning
`blur`	Uskarphet
`farge`	Skyggefarge

Eksempler

/* Enkel skygge */
text-shadow: 1px 1px 2px gray;

/* Glød-effekt */
text-shadow: 0 0 10px #00ff00;

/* Flere skygger */
text-shadow:
    1px 1px 0 black,
    2px 2px 0 gray;

white-space

Hvordan mellomrom og linjeskift håndteres.

pre {
    white-space: pre;
}

Verdi	Mellomrom	Linjeskift	Bryt linjer
`normal`	Kollapser	Ignoreres	Ja
`nowrap`	Kollapser	Ignoreres	Nei
`pre`	Beholdes	Beholdes	Nei
`pre-wrap`	Beholdes	Beholdes	Ja
`pre-line`	Kollapser	Beholdes	Ja

overflow-wrap / word-break

Bryt lange ord.

p {
    overflow-wrap: break-word;
}

Nyttig for å unngå at lange ord (som URL-er) ødelegger layouten.

Shorthand: font

Kombiner flere font-egenskaper:

p {
    font: italic bold 16px/1.6 Arial, sans-serif;
}

/* Samme som: */
p {
    font-style: italic;
    font-weight: bold;
    font-size: 16px;
    line-height: 1.6;
    font-family: Arial, sans-serif;
}

Praktiske eksempler

Brødtekst

body {
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}

Overskrifter

h1, h2, h3 {
    font-family: Georgia, serif;
    font-weight: 700;
    line-height: 1.2;
    color: #111;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }

Lenker

a {
    color: #0066cc;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

Knapper

.button {
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

Kode

code {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.9em;
    background: #f4f4f4;
    padding: 2px 6px;
    border-radius: 4px;
}

HTML-tekstelementer

CSS styler utseendet, mens HTML definerer strukturen. Se HTML Tekst for semantiske tekstelementer som <strong>, <em> og <mark>.

Oppsummering

Egenskap	Hva den gjør
`font-family`	Skrifttype
`font-size`	Tekststørrelse
`font-weight`	Tykkelse (bold)
`font-style`	Kursiv
`line-height`	Linjeavstand
`text-align`	Justering
`text-decoration`	Under-/gjennomstreking
`text-transform`	Store/små bokstaver
`letter-spacing`	Bokstavavstand
`text-shadow`	Tekstskygge
`white-space`	Mellomromshåndtering