Typography

System governing text presentation.

html

<div class="ty-wrap" style="font-family:system-ui, sans-serif;">
  <h3 class="ty-h" style="font-size:24px;font-weight:800;">A coordinated system</h3>
  <p class="ty-p" style="font-size:14px;">Heading and body share one typeface and scale together, so the page reads as one voice rather than a pile of unrelated sizes.</p>
  <p class="ty-caption">heading 24px/800 &middot; body 14px</p>
</div>
<style>
.ty-wrap { color: #241430; width: 300px; }
.ty-h { margin: 0 0 8px; }
.ty-p { margin: 0 0 12px; line-height: 1.6; }
.ty-caption { margin: 0; font: 12px/1.4 system-ui, sans-serif; color: #241430cc; }
</style>

tailwind

<div class="text-[#241430] w-[300px]" style="font-family:system-ui, sans-serif;">
  <h3 class="m-0 mb-2" style="font-size:24px;font-weight:800;">A coordinated system</h3>
  <p class="m-0 mb-3 leading-relaxed" style="font-size:14px;">Heading and body share one typeface and scale together, so the page reads as one voice rather than a pile of unrelated sizes.</p>
  <p class="m-0 font-sans text-xs text-[#241430]/80">heading 24px/800 &middot; body 14px</p>
</div>

react

export function Typography({
  headingSize = 24,
  bodySize = 14,
  family = "system-ui, sans-serif",
  headingWeight = "800",
}) {
  return (
    <div style={{ color: "#241430", width: 300, fontFamily: family }}>
      <h3 style={{ margin: "0 0 8px", fontSize: headingSize, fontWeight: Number(headingWeight) }}>A coordinated system</h3>
      <p style={{ margin: "0 0 12px", lineHeight: 1.6, fontSize: bodySize }}>
        Heading and body share one typeface and scale together, so the page reads as one voice rather than a pile of unrelated sizes.
      </p>
      <p style={{ margin: 0, font: "12px/1.4 system-ui, sans-serif", color: "#241430cc" }}>
        heading {headingSize}px/{headingWeight} &middot; body {bodySize}px
      </p>
    </div>
  );
}