Re: Underline vs. bottom border

I think there is just one caveat to what has been said on this. Many
designers position  bottom border underlines way below the line of text -
often nearly an inch below it. You often see this in main menus
particularly. It has become something of a fashion.

I think this makes it difficult for users to associate the border line with
the link. In fact I sometimes realise that I have mentally been
disregarding such a line as irrelevant decoration until I see it move with
changing keyboard focus when I do keyboard testing.

So using a bottom border to move the underline a small distance below the
text is fine, but I always caution against making the gap too large.

Interesting, however, that this should be raised just now, because it has
suddenly become less necessary to make this change to border underlines.
And Amy, you might find events will make it unnecessary to do the change
you were planning!

The huge problem with using the standard underline, of course, has always
been that it goes right through all the descenders of letters like p, g, y
etc, making it difficult to read the text for people with poor eyesight.
But looking at caniuse.com I see that Chrome and Edge have just (in the
latest update, v87) implemented the CSS text-underline-offset property. It
applies to underlines created using the usual text-decoration: underline
property.

So all the mainstream browsers on desktop now implement it (Firefox has had
it a while). (I have also, by the way, just noticed that Edge now uses the
same version numbers as Chrome, now that it uses the same internal engine.)

Just having done a quick test with this property, it seems that any value
of text-underline-offset of 0.3em or more is enough to position the
standard link underline well clear of descenders, for most fonts. (Using em
units is recommended, not px units, so that it scales when users are using
larger font sizes.)

So this at last solves the main problem with link underlines, and it seems
to me that designers and developers would do well if they include this
property in their link CSS as standard from now on.

Support for it is still very patchy on mobile browsers. But, for any
browser that doesn't implement it, that just means link underlines will
appear in their normal position on those devices (and since screens are
usually more readable on them, underlines going through descenders is
probably less of a legibility problem anyway).
Regards,
Guy Hickling