I agree with almost all of the content of Practical Typography. But “stop underlining links on the web” is the point I disagree the most violently with. Removing link underlines is user-hostile. There’s a large body of research to that effect: underlined blue text means a link, not-underlined text in a colour different from the surrounding text… might be a link? But many will miss it. “Are underlined links dead? Maybe not quite. Dying? For sure.” Nope. Not dying in the slightest. If anything they’ve been making a comeback as people come to their senses and realise that æsthetics aren’t the only thing to worry about. (You know what has really beautiful æsthetics? A pure white screen.)
Now in this particular case, I don’t feel the chapter headings should be underlined—because I don’t feel they should be links. As it stands they don’t even look like links, just like underlined headings. If you want to provide a link to this heading, do it otherwise: probably as a character outside the left margin of the heading or after the text of the heading, commonly using # or ¶ or U+1F517 LINK SYMBOL, potentially only visible on hover (not many people want to interact with those things, after all, so it’s fairly OK to conceal them).
But here’s what I think is a good compromise in this space: a semi-transparent underline, made opaque on hover. I’ve taken to doing this for sites I make in the last couple of years as I find it makes links more pleasant to look at, and it gives a convenient way of indicating when you’re hovering over a link, which I think is also desirable. For example https://chrismorgan.info unvisited links are #03d with text-decoration-color #03d4. (It was #03d6 when I released the site, I reduced it to #03d4 after a while.)
Sadly this currently requires adding a text-decoration-color property beside every link colour declaration, so if you vary your link colours in different contexts it requires a little more work, and if you want to make it themeable by variable you’ll have to use a preprocessor that can modify colours (e.g. scale-color($link-color, $alpha: -75%) in Sass), or use multiple CSS custom properties (--link-color: #03d; --link-underline-color: #03d4). I look forward to being able to just say `:link:not(:hover), :visited:not(:hover) { text-decoration-color: color-mod(currentColor alpha(25%)) }`.
Now in this particular case, I don’t feel the chapter headings should be underlined—because I don’t feel they should be links. As it stands they don’t even look like links, just like underlined headings. If you want to provide a link to this heading, do it otherwise: probably as a character outside the left margin of the heading or after the text of the heading, commonly using # or ¶ or U+1F517 LINK SYMBOL, potentially only visible on hover (not many people want to interact with those things, after all, so it’s fairly OK to conceal them).