: 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:

@Samaraweera207

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.

Vote Up Vote Down

@Hamm6457569

The description of text-decoration: underline in CSS 2.1 spec defines its effect just as underlining, without details, but browsers implement it as appearing just a little below the baseline. Thus, it often cuts descenders (and diacritic marks placed below a letter).

In the CSS3 Text draft, there is the text-underline-position position, but it does not seem to be supported by any browser. (According to css666.com info, it is supported by IE, but at least on IE 9, the support appears to be limited to recognizing the property and accepting the value auto, the initial value – so it’s really not support.) Update: Actually, IE (from version 6) has a little more support, but it really lets you just place the underline above the text (!) and not below it.

As described in the Scott’s answer and Joonas’s comment, you can use a bottom border to simulate an underline, and then you have fairly good control over the “underline” style. This might be suitable e.g. for underlined links that stand on their own, not inline. For inline text, where you might wish to underline e.g. because you are HTML-izing printed matter that contains underlining, the normal CSS underlining is probably better – because such underlining more or less corresponds to traditions of print.

Vote Up Vote Down

@Turnbaugh909

It's my belief that any underlined text is generally so minor that the difference is non-existent to the reader. This is one of those things that the designer can care a great deal about, but readers never do. It's all more a stylistic choice in my opinion.

I much prefer the baseline positioning with a break at the descenders: i.e. text-decoration-skip: ink; However, that is not really supported currently. I have gone so far as to have two classes and to add a span to descenders to remove the underline from them. (text replace via php so it's not a lot of code to create).

I will never use the border-bottom trick (or bottom attribute) because of the offset. I find, with my readers, the offset of the underline is far, far, far more distracting to them than anything.

I try and switch to bold, italics, bold italics, or color variations, rather than underlines whenever possible.

Vote Up Vote Down