<main class="canvas">
  <article class="article">
    <p class="eyebrow">Case study</p>
    <h1>En grim starter bliver til læsbar prose med tydeligt hierarki</h1>
    <p class="lead">Når typografi, spacing og toneværdi ikke hænger sammen, bliver selv godt indhold tungt at læse. Her bygger du et system i små trin.</p>

    <p>Start simpelt: lav en solid default-rytme mellem søskendeelementer. Derefter justerer du hierarki, farvetoner og detaljer for links, <code>inline code</code> og figcaption.</p>

    <h2>Hvad vi forbedrer</h2>
    <p>Du går fra én flad tekstmasse til et layout, hvor overskrifter, brødtekst og metadata får tydelige roller. Fokuser på læsbarhed frem for pynt.</p>
    <ul>
      <li>Flow-space som default-rytme.</li>
      <li>Typografisk skala til overskrift, brødtekst og lead.</li>
      <li>Toneværdi til visuelt hierarki i neutrals.</li>
    </ul>

    <h3>Små valg, stor forskel</h3>
    <p>Se efter overgange som <code>p + h2</code> og <code>h2 + h3</code>. De er ofte årsagen til, at et layout føles rodet. Brug få, bevidste regler.</p>
    <blockquote>God prose-CSS handler om færre special-cases og mere systemtænkning.</blockquote>
    <p class="text-small">Læs mere om emnet i <a href="#0">styling af tekstindhold</a> og test med længere tekst, før du finpudser.</p>
  </article>
</main>