Post #408320

2026-02-17 10:13 UTC

🎉 New Blogpost 🎉 Building Typographic Scales in CSS with :heading(), sibling-index(), and pow() https://www.alwaystwisted.com/articles/building-typographic-scales-with-headings-sibling-index-and-pow What if we could create a typographic scale for headings with one line of CSS? One rule to scale them all. #CSS #FrontEnd #WebDev

Replies (4)

@sturobson@front-end.social 2026-02-17 11:19

just noticed a bit of a (big) issue with this - sibling-index() only works if there's H1 - H6 If there's h1,h2, two h3s, the second h3 would be styled like h4 dagnabbit :(

Open ##2814068
@Richr@mastodon.social 2026-02-17 11:10

@sturobson@front-end.social Wow. i'd just got to writing the bit of my Web Day Out talk where I was going to skip over fluid type and point to previous talks, but now I'm not so sure...

Open ##2814069
@paddyduke@mastodon.social 2026-02-17 12:40

@sturobson@front-end.social This is so cool. Adjusting the scale for different viewports with a single custom property is great. I wonder if there’s a way to combine this with something like the Utopia fluid scale, with the values calculated in place, negating the fixed breakpoints almost entirely.

Open ##2814073
@burkybang@mastodon.social 2026-02-17 14:14

@sturobson@front-end.social I can’t think of a layout structure where all headings would be next to each other to allow `sibling-index()` to work in this way. It would be cool if we had something like `heading-level()`.

Open ##2814077