<main class="layout">
  <article class="article">
    <p class="eyebrow">Typografi / Part 2</p>
    <h1>Round din typografi, så den rammer de vandrette grid-linjer</h1>
    <p>Hvis tekst og spacing ikke følger samme rytme, virker layoutet hurtigt uroligt. Her skal du bruge <code>round()</code> til at gøre rytmen stabil.</p>
    <h2>Det vi sigter efter</h2>
    <p>Font-size må gerne være fluid, men line-height skal lande på faste intervaller, så afsnit og overskrifter falder i samme system.</p>
    <ul>
      <li>Body-tekst i en stabil læserytme.</li>
      <li>Overskrift med line-height på grid.</li>
      <li>Flow-spacing mellem søskende i faste trin.</li>
    </ul>
    <p>Når du er færdig, skal tekstlinjer og afstande opleves mere “låst” på tværs af viewport-bredder.</p>
  </article>
</main>

Preview

Typografi / Part 2

Round din typografi, så den rammer de vandrette grid-linjer

Hvis tekst og spacing ikke følger samme rytme, virker layoutet hurtigt uroligt. Her skal du bruge round() til at gøre rytmen stabil.

Det vi sigter efter

Font-size må gerne være fluid, men line-height skal lande på faste intervaller, så afsnit og overskrifter falder i samme system.

Body-tekst i en stabil læserytme.
Overskrift med line-height på grid.
Flow-spacing mellem søskende i faste trin.

Når du er færdig, skal tekstlinjer og afstande opleves mere “låst” på tværs af viewport-bredder.