style guide
Underlining Text
Text which is underlined on a web page almost always means one thing. Hyperlink. All browsers underline hyperlinks by default. When users see underlined text they can be almost 100% certain that they can click on it.
With that in mind we should establish the following rule:
Rule: Do not underline text which does not link anywhere.
The sentance you are reading now should explain better than any words why this is so important.
Readers with a non CSS aware browser will be unable to see the effect in the preceding line.
Okay, so we changed the color of the ‘linked’ words as well, but the point is made rather well we feel. There are many ways of making text stand out in you pages, you just have to accept that underlining is not one of them. Try using a bold font weight or even something as simple as italic text.
Turning Link Underlines Off
One of the most asked questions by CSS beginners is: “How do I turn off link underlines?”
One of the most asked questions by CSS experts is: “Why do you want to?”
Turning off link underlining is becoming a common feature of the modern web, but is it a good idea? As long as you have other ways to show your links to users, such as a change of color or change of font weight, than you will probably get away with it in most situations. But many web accessibility experts would not recommend it.
Keep thinking about the types of users that come to your site. Link underlining is such a standard feature of the web that beginner or infrequent users may be confused if it is not happening. I have even known people to think there is something wrong with their computer or mouse! If you web site is likely to be catering for inexperienced users then removing link underlines may not be a good idea. The other obvious and much quoted scenario is of course the color blind user, who cannot recognise your links if they are styled with certain colors.
Another issue to take into account is that Section 508 accessibility guidelines now state that “web pages shall be designed so that all information conveyed with color is also available without color…” Although Section 508 only applies in the united States of course, other governments, such as Canada, United Kingdom, and Australia, have their own laws: and they all carry warnings about relying on color in these type of scenarios.
This leads to the following suggestion:
Suggestion: Do not remove links from underlines unless you have another obvious feature with which to style them; and even then, think about it carefully.
Previous Posts
Latest Links
- Trumpet Quartet
- Bella Tromba this week recording at EMI with Kanye West.
- Are we designers or developers?
- I struggle with this one as well. My title at work is Software Engineer as well, which doesn't help matters.
- Dear W3C, Dear WaSP
- I'm not sure what I think about this. There seems to be a lot of general moaning about this stuff and not very much doing (with a few notable exceptions).
- The King of Web Standards
- Jeffrey Zeldman crowned by Business Week Magazine
- iPhone Javascript and spec benchmark
- Interesting JavaScript benchmarks on the new iPhone vs. Mac Book Pro
