Web Design: Should Hyperlinks Have Underline?

By Xah Lee. Date:

Today, i decided to change the CSS on my site so that links are not underlined.

I'm in the old school of thought that interface should be simple, and not change much. The default rendering of hyperlink with underline is established tradition since the first web browser in the early 1990s. It gives user a consistent recognition of links, everywhere.

Though, the underline rendering got problems. When many words are hyperlinks in a sentence, underline makes them less readable and obtrusive. As i write more and more and create more and more links, i become more aware of this problem.

After surveying 20 other popular websites, i find that they all do not use underline. Examples are:

Magazines:

In fact, it would be hard to find a site that still use underline for links. (there are few exceptions. Typically, pages with simple layout or format still use underline. For example, Google search, and some amazon.com pages.)

In browsing websites in the past years, i don't remember ever got confused about where or which are links. I think no underline has been the accepted practice since perhaps 2005.

When the web started in about 1994, underline might be a good decision because there are not that much text, and no graphics, no CSS, no sites for news, shopping, stocks quotes, gaming, forums, social networks, youtube, etc. The only content is just about plain academic text and embedded simple images. But with today's web since about early 2000s, rendering underline to hyperlinks is not appropriate, since there are too much text in diverse and complex layouts (for example, newspaper multi-column; menus; tabs, login boxes, drop down menus, pop up snapshots …). Underline all active links make it unreadable.

Here's the CSS code to turn underline off. Underline will show only with mouse hover.

a:visited, a:link {text-decoration:none}
a:link:hover, a:visited:hover {text-decoration:underline}

Web Design

  1. Typography Sucks
  2. Font Size problem
  3. Serif or Sans-Serif?
  4. Grey Text on White Background
  5. Dark Theme Web Design
  6. Peepshow Windows
  7. GUI vs Command Line: a Unified Design
  8. Skeleton Screen
  9. Fixed-Layout vs Flowed-Layout
  10. How JavaScript Breaks UI, Evolution of UI
  11. Should Hyperlinks Have Underline?
  12. Survey of Tab Style 2006
  13. Problem of Header Linking to Table of Contents
  14. Understand Atomic CSS in 1 Minute
  15. CSS: What's a CSS Pixel? What's Reference Pixel?
  16. Web Design, Minimal Window Width
  17. User Interface Design: Internet Explorer 9's Dysfunctional Colorful Tabs
  18. Phone and Tablet Screen Density Comparison

If you have a question, put $5 at patreon and message me.