CSS Templates

/* =============================================
   TYPOGRAPHY BASELINE
   Rules from Practical Typography (Butterick)
   ============================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: clamp(16px, 2.5vw, 20px);       /* 15–25px range, fluid */
  -webkit-text-size-adjust: 100%;              

body {
  font-size: clamp(16px, 2.5vw, 20px);
}
main {
  max-width: min(65ch, 90vw);
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2rem);
}
h1 { font-size: clamp(1.5rem, 4vw, 2.5rem); }
h2 { font-size: clamp(1.25rem, 3vw, 1.75rem); }

body { font-size: 16px; }
@media (min-width: 600px)  { body { font-size: 17px; } }
@media (min-width: 900px)  { body { font-size: 18px; } }
@media (min-width: 1200px) { body { font-size: 19px; } }

/* Body text */
.body {
  font-feature-settings:
    "kern" 1,       /* kerning pairs — always on */
    "liga" 1,       /* standard ligatures */
    "calt" 1;       /* contextual alternates */
}

/* Body text with oldstyle figures */
.prose {
  font-feature-settings:
    "kern" 1, "liga" 1, "calt" 1,
    "onum" 1;       /* oldstyle (lowercase-height) numbers */
}

/* Data tables */
.data-table td {
  font-feature-settings:
    "kern" 1,
    "tnum" 1,       /* tabular (fixed-width) numbers */
    "lnum" 1;       /* lining (capital-height) numbers */
}

/* Small caps */
.small-caps {
  font-feature-settings:
    "kern" 1,
    "smcp" 1;       /* real small caps */
  letter-spacing: 0.05em;
}

/* All caps with capital spacing */
.all-caps {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-feature-settings:
    "kern" 1,
    "cpsp" 1;       /* capital spacing (if font supports) */
}

@media (prefers-color-scheme: dark) {
  body {
    color: #e0e0e0;
    background: #1a1a1a;
    font-weight: 350;           /* slightly lighter — dark bg makes text appear heavier */
    -webkit-font-smoothing: auto; /* let system decide in dark mode */
  }
}

// WRONG
<h2>IMPORTANT NOTICE</h2>
<p>"Hello," she said. "It's a beautiful day..."</p>
<p>Price: $12 x 4 = $48</p>
<p>Pages 1-10</p>

// RIGHT
<h2 style={{ letterSpacing: '0.05em' }}>IMPORTANT NOTICE</h2>
<p>&ldquo;Hello,&rdquo; she said. &ldquo;It&rsquo;s a beautiful day&hellip;&rdquo;</p>
<p>Price: $12 &times; 4 = $48</p>
<p>Pages 1&ndash;10</p>