3. semester / Tema 13C: Frontend Design

Styling af tekstindhold

Byg en robust prose-wrapper med hierarki, toneværdi, flow-space og få bevidste undtagelser.

Se undervisningsslides

Relevante links

Tænk i en prose-wrapper, ikke i løse elementer

Når du styler artikelindhold, FAQ-svar eller case-tekster, er det mere robust at lade en wrapper styre helheden end at style h2, p og li hver for sig.

En god prose-wrapper har typisk ansvar for:

læsebredde
flow-space
basis-toneværdi
typografisk hierarki

En praktisk starter-opskrift

article {
  --measure: 68ch;
  --flow-space: 1em;
  --text-strong: var(--gray-900);
  --text: var(--gray-700);
  --text-muted: var(--gray-500);

  max-inline-size: var(--measure);
  margin-inline: auto;
  padding: var(--space-l, 2rem) var(--space-m, 1rem);
  color: var(--text);
}

article > * + * {
  margin-block-start: var(--flow-space);
}

article :is(h1, h2, h3, h4) {
  color: var(--text-strong);
}

Det giver dig en stabil base, før du finjusterer de enkelte teksttyper.

Toneværdi er en del af hierarkiet

Hierarki skabes ikke kun med størrelse og vægt. Det skabes også med toneværdi:

overskrifter: mørkest
brødtekst: lidt lysere
meta, small og figcaption: endnu lysere

Det gør indholdet lettere at scanne og mindre tungt end hvis alt er samme mørke tone.

Nabo-regler

Nabo-regler er ofte forskellen på “fint” og “færdigt”.

Én flow-regel er et godt udgangspunkt, men prose kræver ofte nogle få ekstra regler for særlige naboskaber.

article p + :is(h2, h3) {
  margin-block-start: 2em;
}

article :is(h2, h3) + :is(h3, h4) {
  margin-block-start: .35em;
}

Det er her meget prose-styling bliver overbevisende: ikke i mange regler, men i få, velvalgte undtagelser.

Links, `code`, figurer og småtekst skal høre til samme system

Hvis du kun styler overskrifter og paragraphs, vil resten ofte stadig se “default” ud.

Vær især opmærksom på:

links og underline-offset
inline code i brødtekst
figcaption som sekundær, men læsbar tekst
små hjælpe- eller metadata-tekster

Demo: fra grim starter til læsbar prose

Denne øvelse samler bevidst hele forløbet i ét sted: flow-space, line-height, toneværdi, text-wrap, nabo-regler og de små detaljer, der gør forskellen.