drop-cap-typography

name	drop-cap-typography
description	Use when opening long-form articles or section content. Drop caps signal editorial gravitas.

Drop-Cap Typography

Drop caps are 3-4 line first-letter treatments. Inherited from book typography. Use sparingly — 1 per page maximum.

The drop-cap setup

1. Use the serif (Fraunces) for drop cap even if body is sans
2. Size: 3-4× body text leading (typically 60-90pt)
3. Color: brand accent or 100% body color
4. Position: float left, with 0.5em padding-right, baseline-aligned with line 3 or 4
5. Letter-spacing: slightly tight (-0.02em)

Drop-cap CSS pattern

p.lead::first-letter {
  font-family: 'Fraunces', serif;
  font-size: 4.5rem;
  line-height: 0.85;
  float: left;
  padding-right: 0.5rem;
  padding-top: 0.1rem;
  font-weight: 700;
  color: var(--accent);
}

When to use drop caps

1. Opening paragraph of long-form article
2. Section transitions (chapter beginning)
3. About page intro
4. Hero block of editorial content

Don't use on:

• Every paragraph
• Short-form content (<200 words)
• Forms or transactional UI
• Multi-language content (Unicode can break)

Where this fits in the X3 empire

Used on CardPrepAI articles and methodology pages. The serif drop cap is one of the silent signals of premium publication.