typography - Should underline clash with text descenders?

CSS3’s text-decoration module includes a text-underline-position property, which specifies whether the underline should be positioned below the whole text:

          

or just below baseline, letting it clash with text descenders:

          

Okay, we all know how underline should only be used as a last resort, but… if you are going to use it, what is the most common way of doing it? What are the pros and cons of each underline style?

Answer

What is most common?

Well, some typographers will say that underlining should probably be avoided all together, and that underlining is only appropriate for use on typewriters or on hyperlinks on the web. However, I would add that creativity is about seeing opportunities to break rules in creative ways so how much you let this guide you is up to you.

On the web, having it just below the baseline, overlapping descenders, is most common. But this is only because this has always been the default rendering for major browsers up to this point.

On typewriters, underlining overlaps descenders, but slightly differently: it falls part way between your two examples (example). If you look at the baseline of the descender, such as the bottom loop of g or the bottom serif of p (in a serif font), that is where the underline lies. So it "joins up with" the bottom of the descenders.

Pros and cons

The benefit to having the underline overlap with your descenders is that it doesn't affect your line spacing (or "leading") at all - you do not have to increase the gap between lines to accommodate the underline.

The benefit to having it completely clear of your descenders is readability, if that is important. But you would have the drawback of needing to increase spacing between lines. If your situation allows for lots of line spacing anyway, then by all means go for it.

If you're using the web, then underlining is heavily associated with hyperlinks. So, any use of underlining at all should be avoided for text that is not part of a link. Signify what you want to signify in other ways - using bold, italics or ALL CAPS instead.