Automatic type scales from document structure
Heading hierarchies often ship as hardcoded font-size ladders. This experimental pattern derives sizes from the document outline with :heading(), sibling-index(), and pow() so the scale adjusts itself.
2:heading {
3 font-weight: 600;
4 font-size:
5 calc(1rem * pow(1.2, 5 - sibling-index()));
6}
7/* Fallback: keep a simple manual ladder for all other browsers */
8h1 { font-size: 2.5rem; }
9h2 { font-size: 2rem; }
10h3 { font-size: 1.5rem; }
2h1 { font-size: 2.5rem; }
3h2 { font-size: 2rem; }
4h3 { font-size: 1.5rem; }
5h4 { font-size: 1.25rem; }
6h5 { font-size: 1.1rem; }
7h6 { font-size: 1rem; }
Browser Support
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Not ready for production without a fallback.
Note: The :heading() selector and sibling-index() function are experimental and do not have Baseline support yet. Treat this outline-driven type scale as progressive enhancement only and keep a simple font-size ladder as the primary path.
Your first month is free
Managed WordPress hosting for faster sites.
Outline-aware sizing
The math uses the document structure instead of a fixed h1–h6 ladder. You get a consistent ratio between levels without editing six font-size rules by hand.
One ratio, many headings
Adjust the base size or ratio once and the whole heading scale updates. No more hunting for every size token in your CSS or design system.
Experimental playground
This pattern is best suited to demos, prototypes, or design tooling today. Use the manual ladder as the production path until :heading() ships widely.
How it works
Early CSS type scales usually ship as a hardcoded ladder: h1 at 2.5rem, h2 at 2rem, h3 at 1.5rem, and so on. That works, but it is easy to drift out of sync when the design changes because every size is a one-off decision.
The combination of :heading, sibling-index(), and pow() lets you express the scale as a formula instead: take a base size, raise a ratio to a power, and adjust that power based on the element's position. In its simplest form the heading near the top of the document gets the biggest exponent and headings further down get smaller exponents.
Because :heading() and sibling-index() are still experimental and have no stable baseline support, this pattern should be treated as progressive enhancement only. Keep a simple manual ladder or token-based scale as your primary path and layer the formula on top in browsers that implement these features.