Following Jakob Nielsen's Alertbox Top Ten Web Design Mistakes of 2005, in which the top complaint was illegible text…
About two-thirds of the voters complained about small font sizes or frozen font sizes; about one-third complained about low contrast between text and background.while the first two recommendations for the second biggest complaint — non-standard links — were
I've updated an earlier post to reflect the user CSS that I'm currently using in Firefox.
- Make obvious what's clickable: for text links, use colored, underlined text (and don't underline non-link text).
- Differentiate visited and unvisited links.
Using this, along with the preference setting for a minimum font size, achieves the following things:
- All text is black on a white background, never smaller than 12px.
- All links are underlined (I had to disagree with using coloured links - I think it looks bad and underlining is otherwise used so rarely that it's reasonable to assume underlined text is a link).
- Links change colour to blue on mouseover.
- Visited links have a light grey background, which is enough to distinguish them without damaging the style of the page.
This can make pages with coloured backgrounds look a bit patchy, and anti-aliased images with transparent backgrounds that are used as links can also look bad, but I think this is a reasonable price to pay for the huge improvement in legibility.
One thing I'd like to see is a CSS attribute for setting the colour of the text-underline. Having a link underlined in grey, changing to black on hover, is a nice, unobtrusive way of highlighting links, but at the moment sites are forced to use a border-bottom hack to emulate this (which obviously conflicts with the forced underlining of links, so had to be disabled, and also makes Firefox gives image links an unwanted underline).
Comments
All fields are optional, email address will not be shown; no HTML, URLs are automatically hyperlinked.
While I think you are quite simply crazy to believe that coloured links are a problem (what is this, an IBM Selectric?), you are surely aware that text-decoration: none and border-bottom: [whatever] is the correct way to colour the "underline" of a link.
Yes, that's what I said in the last paragraph. Using border-bottom is still a hack though, and it does show up under linked images in Firefox, which isn't good.
Coloured links aren't a problem, if you don't mind them, but I prefer having all the text in black.
a:link img, a:visited img { border: none }
I gave that a try, but the linked images are still showing up with a border-bottom; it might be something to do with having to use !important for every rule.
The other problem with using border-bottom (being a hack) is that it's not taken into account when calculating the line-height, so the underline often gets hidden under the text of the line underneath.
You want that. You don't want underscores transecting descenders like a 1940s Underhill typewriter.
I want the underline to be invisible because the line of text underneath is obscuring it? I don't think I do.
your site is exactly the kind of sites which make the net surfing so fun. tremendous, astonishing, bad nothing comparative to universal: http://www.nbc.com/ , Boy can Double Grass right cosmos will double player without any questions , Black, Curious, Curious nothing comparative to Bad white pair is always beautiful grass