demo · v136

H1 special UA rules

The user-agent stylesheet used to shrink an <h1> inside <section> / <article> / <aside> / <nav>. Chrome 136 removes that. Click "measure" to read live computed font sizes from the demo below.

Measure the computed font-size of each h1 below.

plain h1

Plain <h1> — once 2em

h1 nested in <section>

Section <h1> — used to be 1.5em

h1 nested twice in <section> > <section>

Deep <h1> — used to be 1.17em

h1 inside <aside>

the code

/* Pre-136 user-agent stylesheet (simplified) */
:where(article, aside, nav, section) h1 { font-size: 1.5em; }
:where(article, aside, nav, section) :is(article, aside, nav, section) h1 { font-size: 1.17em; }

/* 136+: gone. h1 is always the same size unless authors restyle. */
h1 { font-size: 2em; margin: 0.67em 0; }

/* Replacement when you do want a smaller heading in a section: */
section h1 { font-size: 1.5em; }