Typography

<!-- 1) Font size (default scale) -->
<p class="text-xs">extra small — 12px</p>
<p class="text-sm">small — 14px</p>
<p class="text-base">base — 16px</p>
<p class="text-lg">large — 18px</p>
<p class="text-xl">xl — 20px</p>
<p class="text-2xl">2xl — 24px</p>
<p class="text-4xl">4xl — 36px</p>
<p class="text-6xl">6xl — 60px</p>
<p class="text-9xl">9xl — 128px</p>

<!-- 2) Weight -->
<p class="font-thin">100</p>
<p class="font-light">300</p>
<p class="font-normal">400</p>
<p class="font-medium">500</p>
<p class="font-semibold">600</p>
<p class="font-bold">700</p>
<p class="font-extrabold">800</p>
<p class="font-black">900</p>

<!-- 3) Family -->
<p class="font-sans">UI default — Inter / system</p>
<p class="font-serif">Georgia / Cambria — long-form reading</p>
<p class="font-mono">JetBrains Mono — code</p>

<!-- 4) Line height (leading) -->
<p class="leading-none">tight headings — 1</p>
<p class="leading-tight">1.25</p>
<p class="leading-snug">1.375</p>
<p class="leading-normal">1.5</p>
<p class="leading-relaxed">1.625 — paragraphs</p>
<p class="leading-loose">2 — emphasised body</p>

<!-- 5) Letter spacing (tracking) -->
<p class="tracking-tighter">-0.05em</p>
<p class="tracking-tight">-0.025em</p>
<p class="tracking-normal">0</p>
<p class="tracking-wide">0.025em — small caps</p>
<p class="tracking-wider">0.05em</p>
<p class="tracking-widest">0.1em</p>

<!-- 6) Style + decoration -->
<p class="italic">italic</p>
<p class="underline decoration-emerald-500 decoration-2 underline-offset-4">styled underline</p>
<p class="line-through">strikethrough</p>
<p class="no-underline">no decoration</p>

<!-- 7) Alignment + transform -->
<p class="text-left">left</p>
<p class="text-center">center</p>
<p class="text-right">right</p>
<p class="text-justify">justify</p>
<p class="uppercase">to upper</p>
<p class="lowercase">TO lower</p>
<p class="capitalize">title case</p>
<p class="normal-case">force normal</p>

<!-- 8) Overflow / truncation -->
<p class="truncate">single-line clip with ellipsis</p>
<p class="line-clamp-3">multi-line clamp, ends with ellipsis…</p>
<p class="break-words">soft-wrap long-words</p>
<p class="whitespace-nowrap">no wrap</p>
<p class="whitespace-pre-wrap">preserve whitespace</p>

<!-- 9) Fluid scale via arbitrary -->
<h1 class="text-[clamp(2rem,5vw,4rem)] leading-tight font-bold">Hero title</h1>

<!-- 10) Real headings system -->
<article class="max-w-3xl mx-auto px-4 py-12 space-y-6">
    <h1 class="text-4xl md:text-5xl font-bold leading-tight tracking-tight">Hero title</h1>
    <p class="text-lg text-slate-600 leading-relaxed">Lead paragraph with comfortable line height.</p>
    <h2 class="text-2xl font-semibold mt-12">Section heading</h2>
    <p class="leading-relaxed">Body…</p>
    <h3 class="text-lg font-semibold mt-8">Sub-section</h3>
    <p class="leading-relaxed">Body…</p>
</article>

<!-- 11) @tailwindcss/typography — prose for long-form content (Markdown, CMS) -->
<!-- npm i -D @tailwindcss/typography -->
<!-- module.exports = { plugins: [require('@tailwindcss/typography')] } -->
<article class="prose prose-slate max-w-none dark:prose-invert lg:prose-lg">
    <h1>An article title</h1>
    <p>Auto-styled paragraphs, headings, lists, blockquotes, code blocks.</p>
    <h2>Sub-heading</h2>
    <ul>
        <li>List items get sensible spacing</li>
        <li>Links get a styled underline</li>
    </ul>
    <pre><code>// Code blocks get a fenced look</code></pre>
</article>

<!-- Customise: prose-headings:text-emerald-600 prose-a:text-emerald-600 prose-img:rounded-xl -->

<!-- 12) Default scale in tailwind.config -->
<!--
module.exports = {
    theme: {
        extend: {
            fontSize: {
                'huge': ['8rem', { lineHeight: '1' }],
            },
            fontFamily: {
                display: ['Inter Display', 'sans-serif'],
            },
        },
    },
};
-->

<!-- 13) Accessibility -->
<!--   - Minimum body text ~16px (text-base)
     - Line height ~1.5 (leading-relaxed) for paragraphs
     - max-width 60-80 characters for readability (max-w-prose ≈ 65ch)
     - Sufficient contrast (test with axe DevTools) -->

<h1 class="text-3xl font-bold tracking-tight">Title</h1>