A Non-Annoying a:visited Technique
As you may know, you can define a style for a:visited in your CSS, which will apply itself to links in visitors browsers that they have already visited. The usefulness of this is debatable, but no matter what, it’s best to not apply anything really bold or distinct to this style. At best, it could be a slight annoyance to your visitors. At worst, it might confuse them to the point they don’t return.
Web trends have generally moved away from underlining links as well. At least for links in the middle of content. It’s much more hip to apply a different color. Or perhaps, a different font-weight.
I propose this very non-annoying way of handling links inside post content:
p {
color: #666666;
}
a {
font-weight: bold;
text-decoration: none;
color: #2a2a2a;
}
a:visited {
font-weight: normal;
}
a:hover {
text-decoration: underline;
}
In this example, all links are a slightly darker shade of gray. Unvisited links are bolded, while visited links return to a normal font-weight and thus melt back into the content a little nicer.
This technique is definitely going to be used in the new version of CSS-Tricks (hint, hint).
Loading ...
1
nice tips.
Comment by Wallace — September 19, 2007 @ 1:42 am
2
No underlines?
Comment by Lim Chee Aun — September 19, 2007 @ 9:43 am
3
The rollover underlines.
Comment by Chris Coyier — September 19, 2007 @ 9:54 am
4
Oh, I mean, if the readers don’t hover their cursor over the link, they might think the bolded text are ‘emphasized’ text instead of hyperlinks?
Comment by Lim Chee Aun — September 19, 2007 @ 11:27 am
5
That’s true, but I think, in a way, a link is an emphasis. There is just something that bugs me a little about underlines muddying up the typography. Imagine a page in a paperback book. Clean, well spaced text. Now imagine if 10 of those words had a big long line underneath them. I realize you can’t hyperlink a book, but I’m talking about pure aesthetics.
Also, underlines create a weird cadence when reading that has always bugged me.
Comment by Chris Coyier — September 19, 2007 @ 12:27 pm
6
I propose that we underline links… text-decoration: underline works well… or text-decoration: none; border-bottom: 1px dotted black; for unvisited links and “gray” or “silver” for visited…
Usability and experience are key factors. After all, if you’re not going to cue your users that a word is a hyperlink (by staying within conventions), how can you expect them to mouseover them, let alone click them?
- http://www.JoeLevi.com
Comment by Joe Levi — September 19, 2007 @ 2:57 pm
7
Hey Joe,
I think you raise a good point that it might be of benefit to all users if there was a standard established. I think my opinion leans away from that, just because I think the design of a site should dictate the style of the links more than some standard.
I notice your own site doesn’t have underlined links =)
Comment by Chris Coyier — September 19, 2007 @ 6:52 pm
8
I tend to agree with the people who suggest using underlines with non-visited links (think visited is ok but would suggest keep underlines). Without using underlines it is harder to know what is a link or not, brings your accessibility down and means you cannot use bold/ strong for your text which can limit your SEO capabilities as well.
You can enlarge the length between lines of text as well which means underlined text does not appear to squashed.
Comment by Jermayn Parker — September 19, 2007 @ 10:52 pm
9
Underlining is a typographical abomination. IMHO.
Comment by Graham Bannister — September 20, 2007 @ 3:44 am
10
@Graham, but you need to remember this is not print, it is the web! They are different, very different!
The web like print has certain rules and ways things are positioned and done. Underlined is one of them.
Comment by Jermayn Parker — September 20, 2007 @ 11:50 pm
11
I like underlined links inline with content. What bugs me is different font weights.
Thanks for the tips!
Comment by michelle — August 22, 2008 @ 4:26 pm