Underlined Links

Article published on November 16, 2005 under CSS

Illustration explaining font descenders When HTML was created underline style was used to characterize links inside a web page in order to make them recognizable by users. In those days typography and design appeal was not so important as nowadays and some "visual imperfections" were simply ignored or traded off in favor of page contents. Now, with the spread of usability and accessibility approaches, this problem is taken more in consideration so default link style cannot more be used as before. Classic underline style, infact, makes ambiguous characters with descenders, specially q and g letters.

Comparison between classic link underline and css one Taking advantage of CSS border property underline style for link can be enhanced so usability problems due to visualization can be avoided. The firs step consist in disable default underline style and after setting border-bottom to solid or whatever border style you prefer: 

a
{
   text-decoration: none;
   border-bottom: 1px solid #f2f2f2;
}

This simple instructions makes links more usable and readable.


Learn more