It's a very nice idea — I always like smartening up the look of the Web — but the resulting links are ghastly. If your word starts or ends with a descending letter (e.g. "ghastly"), then the underline looks like it omits the first and last letters. It breaks the semantics of what the underline means — any bit that's underlined is supposed to be the link, and if it's not underlined it's not a link.
They also made the mistake of showing a link that includes the word "Typography", which has an underline so broken up and interrupted that it's distracting (which devindotcom also pointed out). It's linked, then it's not, then it's linked, then it's not!
So yeah, I have to give them credit for a good idea and a clever implementation, but it just doesn't work out in the end.
I appreciate your feedback. No doubt on some level this comes down to aesthetic preference. I’m curious though, on the before-and-after examples on the homepage [1] do you feel that all of the afters are worse?
You and devindotcom did indeed bring up some good points, particularly about descender-heavy links, something I plan to take a crack at [2]. But I’m curious if you feel the entire strategy is flawed or if there’s just more work to be done. On a related note: if you’ve used/seen it, how do you feel about links in iOS 8 Safari? How do you feel about this before-and-after [3] (screenshot of the first paragraph of the blog post)?
Well, I realised what was bugging me and why I prefer the iOS implementation for now -- the tighter underline, both a pixel closer to the baseline and a hair closer to each descender, helps ensure the underline feels continuous even when it's broken this way. I do prefer this approach for headlines or animated effects, but perhaps (as was suggested elsewhere) changing the underline colour and/or tightening the spacing would help. A neat implementation though. Seeing links here, it's true, the "g"s just seem to get demolished by the underline. I wonder, if I linked to qithub.com, would you see the difference? ;-)
Oh and if there's a way to apply this without requiring a background color, I suspect this might be a popular add-on or browser setting for some folks.
> They also made the mistake of showing a link that includes the word "Typography"
Including some aesthetics-stretching cases seems like a fairly honest/transparent thing to do for an open-source project that someone is blogging about.
> It breaks the semantics of what the underline means — any bit that's underlined is supposed to be the link, and if it's not underlined it's not a link.
That's a reasonable way to look at it, but humans like us can be pretty flexible with semantics, thanks to pragmatics. If I see a link that covers most of a set of letters stuck together without a space, I tend to assume that the whole thing is a click target. Even if my assumption is wrong, my clicking error rate probably won't be too high, since I think that people tend not to hit the edges of pointing task targets.
They also made the mistake of showing a link that includes the word "Typography", which has an underline so broken up and interrupted that it's distracting (which devindotcom also pointed out). It's linked, then it's not, then it's linked, then it's not!
So yeah, I have to give them credit for a good idea and a clever implementation, but it just doesn't work out in the end.