CSS Text and Fonts

<style>
  .sans { font-family: system-ui, "Segoe UI", Roboto, sans-serif; }
  .serif { font-family: Georgia, "Times New Roman", serif; }
  .mono { font-family: ui-monospace, Consolas, monospace; }
  .big { font-size: 1.5rem; font-weight: 800; }
  .light { font-weight: 300; font-style: italic; }
</style>
<p class="sans big">System UI, 1.5rem, weight 800</p>
<p class="serif">Georgia serif for long-form reading.</p>
<p class="mono">Monospace for code: const x = 42;</p>
<p class="sans light">Light italic text</p>

<style>
  body { font-family: system-ui, sans-serif; }
  .center { text-align: center; }
  .upper { text-transform: uppercase; letter-spacing: 0.15em; font-size: 12px; color: #64748b; }
  .underline { text-decoration: underline wavy #e11d48; }
  .truncate { width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid #cbd5e1; }
</style>
<p class="center">Centered text</p>
<p class="upper">Section label</p>
<p class="underline">Wavy underline</p>
<p class="truncate">This long sentence will be cut off with an ellipsis at the end.</p>