I noticed the New Yorker changed the way that they do underlined text links. Now, glyph descenders break the underline in a way that reflects the New Yorker’s refined typographic style.
How does this work? The best explanation may come from Medium, where Marcin Wichary worked it out for their own text-heavy site.
Essentially the descenders are cleared by putting a small, white (or whatever background color) shadow on either side of the glyphs. Here is a stand-alone version of the CSS in Codepen.
If there is any issue with this, it’s that in Firefox when the text is highlighted the multiple shadows do get picked-up.
That minor glitch aside, the overall results do look good. It’s an almost imperceptible way for sites with a focus on content to differentiate their reading experience, and I’m glad to see web typography pushed forward.