The web has an underlining problem. This Bushwick designer has a fix

Have you ever wondered why italics and bold are so widely favored online over underlining?

We have, but we’d never taken our thinking beyond wondering. We’d never really thought about it, actually. We just noticed it. In our minds we say “Why?” but on the web that became “Why?” or maybe “Why?”
One designer in Brooklyn, Wenting Zhang, has thought about this way more than us. She set out to figure out how to make underlining look really good on every website. Then she could turn it into a script that devs could use to fix their site’s underlining.
Zhang has documented all her work on GitHub. It’s called Underline.js. Zhang’s goal, however, is to get her rules for underlines adopted as standards by the W3C.
“The ultimate goal is to push the browser to do this perfect render by default, so that there would be no need to use my javascript library,” she told us, via email.
For now, you can use her code on your site and anywhere text calls for an underline, the line will be drawn at just the right distance from the bottom of your words, it will be just as thick as it should be and it will break for any bit of text that goes through it. It will be pixel perfect, with no annoying little half-tone shadows.

Additionally, Zhang’s script allows a dev to make the lines interactive: see this live demo, with lines as guitar strings.
She spoke about it recently. It was the hack of the month at the New York Tech Meetup:

Zhang works by day at Comedy Central doing UX and animation coding. She’s been in New York since 2012. She started the project this past November after reading a detailed post on Medium and said that this was her first time working on an open source project. Getting feedback and suggestions from people on GitHub drove her to want to see it through.
Here are Zhang’s proposed rules:

text-underline-color: #000000;
// auto means the same color as the text color, or hex value
text-underline-position: auto;
// could be ratio or px or auto
text-underline-skip: true;
// true to set holes around descenders, false to turn it off
text-underline-width: auto;
// could be auto or px or ratio
text-underline-animation: true
// true or false, this one is only for underline.js