How to Configure Strict CSS Initial-Letter Drop Caps in Google Chrome

Drop capitals—the elegant typographic tradition of sinking the opening letter of an article across several lines of body text—have historically been notoriously brittle to implement on the web. Web designers relied on awkward combinations of float: left, negative margins, and brittle line-height hacks that broke whenever user font sizes or responsive viewports shifted. The CSS Inline Layout Module standardises the native initial-letter property, enabling browsers to calculate cap-height alignment and baseline sinking natively. This tutorial covers configuring initial-letter and auditing typographic baselines in Google Chrome.

The Mechanics of CSS initial-letter

The initial-letter property takes one or two numerical arguments: initial-letter: <size> [<sink>]. The first argument specifies the size of the initial letter in terms of body text line-height units (e.g. 3 indicates the letter spans three lines in height). The optional second argument dictates how many lines the letter sinks into the paragraph (if omitted, it defaults to the same value as size). The browser rendering engine automatically pulls the initial glyph from the line-box, aligns its top with the cap-height of the first line, and aligns its baseline with the bottom baseline of the sunken line.

Authoring Editorial Drop Caps in Modern CSS

Implement the property across opening article paragraphs with graceful fallbacks:

article > p:first-of-type::first-letter {
  /* Native browser drop cap: 3 lines tall, sunken 3 lines */
  initial-letter: 3;
  
  /* Typographic styling */
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  color: #1e293b;
  margin-right: 0.75rem;
}

/* Sunk two lines, raised one line above the paragraph */
.raised-cap::first-letter {
  initial-letter: 3 2;
  color: #2563eb;
  margin-right: 0.5rem;
}

Inspecting Baseline Alignment in Chrome DevTools

1. Launch Google Chrome and navigate to your editorial publication.
2. Right-click the paragraph containing the drop cap and select Inspect.
3. In the Elements panel, expand the <p> element and click on the ::first-letter pseudo-element.
4. Open the Styles panel and verify that initial-letter: 3 is actively applied.
5. Switch to the Layout panel and enable the Show baseline grids checkbox.
6. Observe how Chrome aligns the base of the initial letter glyph with the third line of body text without introducing vertical whitespace distortion into downstream paragraphs.

Providing Graceful Float Fallbacks for Legacy Engines

While modern Chromium releases support initial-letter natively, provide an @supports fallback for legacy environments:

@supports not (initial-letter: 3) {
  article > p:first-of-type::first-letter {
    float: left;
    font-size: 3.5rem;
    line-height: 0.85;
    margin: 0.15rem 0.6rem 0 0;
  }
}

This progressive enhancement strategy ensures classic float styling on legacy browsers while leveraging automated, mathematically precise typography on modern Chrome installations.