Image by elroySF
Changing the style of your links is probably the easiest change you can make in your design.
If you aren’t sure how to do it, there is a good explanation at Echo Echo. It will show you how.
It takes only seconds to try out a new look for your links. With that in mind, here are some of the best ways to style your links, to both look good and be usable at the same time.
- Colored, underlined – The most common style on the internet. The coloring highlights the words as being special, and combined with the underline, users know for sure that it’s a link.
CSS - color: #0000ff; text-decoration:underline;
- Colored, with no underline – The underline isn’t always necessary. Colored text in an article’s copy rarely indicates anything other than a link. The underline does help readability in articles, but can cause clutter in a list of sidebar links.
CSS – color:#0000ff; text-decoration:none;
- Bold, underlined – For minimalist designs that feature a lot of black on white, with very little color, you may not want to color your links. Putting them in bold with an underline is enough to indicate they are links, without the attention grabbing that coloring would cause.
CSS – font-weight:bold; text-decoration:underline;
- Small capitals, underlined – Small capitals are another great way of making a few words stand out. The capitals alone aren’t always noticeable enough in a paragraph of text. Use an underline to make them instantly identifiable as links.
CSS – font-variant:small-caps; text-decoration:underline;
- Dashed underline – The default underline style for a link is a solid line. If you set the link to have no underline, but give it a dashed bottom border, you make the common underline effect much more unique.
CSS – border-bottom: #000000 1px dashed; text-decoration:none;
- Colored background – Coloring the text in a link is one option, but coloring the background is a much less common one. Colored underlines can look great here.
CSS – background:#e0f6ff; border-bottom:#99c4d5 1px solid; text-decoration:none;
Rollover Effects
- Remove / Add an underline – Most of the links have an underline effect on them. The easiest way to show a rollover is to remove that underline. Or alternatively, if there is no underline, add one.
- Change the color – Changing the color only works if the change is big enough to make it instantly noticeable (Even with a mouse hovering over part of the word!). As such, I’d save color changes for the times when the text was black to begin with (e.g. If you used bold or small capitals).
- Do not use bold, italics or capitalizing – It’s tempting to add/remove bold or italics, because the change in formatting is very noticeable. However, this causes the length of the link to be increased or reduced. In a long paragraph of text, that can lead to words jumping up or down a line each time the mouse moves over a link. Very messy!
Which effect do you like most? Anything I’ve missed out?
Custom Search
suz (1 comments)16 July 08
Nice post. Maybe one addition to rollover effects is to change the background colour or image.
Mike Robinson (6 comments)16 July 08
I don’t like the use of dashed borders for links, they make me think it is an abbr when scanning. Background colours look really good, but can be more distracting if there are loads on a page. Good old colour + underline has to be my favourite
andymurd (2 comments)16 July 08
Another link styling tip is to add icons to indicate external links or links to non-HTML entities like PDFs or zip files.
I agree with Mike that underlines are the convention for abbreviations and definitions and shouldn’t be used for links. Make your links stand out, but don’t confuse readers.
Slevi (73 comments)16 July 08
Like the small-caps, although I don’t think they’d really fit within regular text when the links are placed on themselves somewhere I believe they might look really good.
The dashed I think look somewhat nice but I’ve seen browsers be buggy with them quite a bit, displaying them not all too smoothly, that kinda stopped me using dashed borders about 2 years ago.
Colored backgrounds look really cool, tend to associate them more with text which has been altered or marked for correction due to numerous office tools using it for that, but nonetheless it looks stylish.
Myself I tend to stick to just changing the default link color and the hover color.
Btw: for the CSS of a non-underlined link you gave ‘color:#0000ff;’, shouldn’t there be a text-decoration: none; to get rid of the original underlining effect?
Rob (34 comments)16 July 08
I use color to make the links stand out and then do the rollover thing – adding underlining – when the cursor is over the link. I like this especially when the link is part of text. It doesn’t distract from the flow of reading, yet it makes the links stand out. Then hovering over a link makes it really clear that it’s a link. I don’t really like the look of underlines within text flow, even though I know it’s a common practice.
redwall_hp (134 comments)16 July 08
I’d recommend avoiding using a dotted underline. Some of those Kontera-type ads that pop-up when you hover over them have dotted underlines (or double-underline on some cases).
Michael Martin (1286 comments)16 July 08
Suz,
True. Changing the background color is definitely a great rollover effect.
Mike,
That’s a very good point! I didn’t think of abbreviations. I rarely use them, but dashed underlines are definitely the standard way of showing them.
I think that if you don’t use abbreviations in your blog, you could get away with dashed underlines for links. But if the blog was more techy and did use some abbreviations, you’re totally right.
Andy,
Good idea. The right images can be a great way of warning users how a link will open.
Slevi,
You’re right about the CSS. I’ll fix that now, thanks.
Rob,
Sounds good to me. The underlines aren’t a necessity.
Redwall,
Anything but a double underline! It does seem that the dashed underline is an iffy one though. But I still like it. Perhaps combining it with bold would make it more link-like…
Brad (9 comments)16 July 08
Personally, I think that coloured text for a link is more than enough. If you have black text like this and then have “This Text” (Red, Blue, Green, Whatever), It’s more than enough to tell the reader, “Oh, this is a link”.
Then adding an underline effect when the visitor hovers over it is pretty cool.
I was looking at redwall_hp, andymurd, and Rob’s (on their blogs) links, and they follow the same linking effect practice I was just talking about.
DazzleCat (8 comments)16 July 08
excellent suggestions and examples.. already used a couple
Kifli (1 comments)17 July 08
I personally using Colored background but sometimes i add Bold too.
Excellent article.
Michael Martin (1286 comments)17 July 08
Brad,
Yeah, it usually is enough. So long as you choose a noticeable color for it. Adding the underline is a personal preference of mine. It just removes any doubt whatsoever that it’s a link.
Dazzlecat,
Cool. ^_^
Grant (13 comments)17 July 08
Great article for beginners, some really simple things that can make links and important information stand out.
Richard X. Thripp (2 comments)19 July 08
Rollover Effects #3 is so true. I’ve gone to sites that bolden the paragraph your cursor is over, and it’s so distracting for text to jump around and lines to shift when I move the mouse.
Good advice on the different link styles. I may try the colored backgrounds idea. I’d watch out for dotted underlines. They represent acronyms with pop-up titles to me.
CP (1 comments)21 July 08
This post is perfect timing for one of my blogs. I had just pondered changing my URL design treatments the other day. Thanks and keep up the great work.
Lance (2 comments)26 July 08
I once came across a nice rollover effect combined with AJAX that didn’t just simply change the color from one to another, but there was a transition. It looked awesome, but I kinda lost the trail where I could get hands on this script.
Jestep (3 comments)28 July 08
I still have to support blue, underlined links. Despite the fact that the internet has been here for a long time, I think it’s still important to use standard formatted links, especially ones that occur in the middle of a paragraph or other chunk of text. I think it’s fine to change their formatting, but sticking to the traditional color and underline, makes it easier for all visitors to discern between important text and linked text.
Tom | Electric Drum (1 comments)12 March 09
I have to agree with Jestep. I have seen tests done where regular blue links were tested against more creative links and the blue links were the clear winner. I guess once the population is trained to recognize the blue link as a hyperlink it may be a problem getting them to recognize other styles of links.
Michael Martin (1286 comments)13 March 09
Hmm…. did the tests take into account variations in the website’s color scheme?
Electric Drum (7 comments)19 March 09
Good question. I believe the test was done on several e-commerce sites, so I would expect they were somewhat similar and basic in design. With different color schemes and sites that have a more unique design it may differ. I guess the answer is always to test it for yourself.
Michael Martin (1286 comments)19 March 09
Thanks for getting back to me!
Your answer seems the most sensible option. Case studies and general tests are great, but testing specifically for your own site just can’t be beaten.
vlado (1 comments)16 June 09
what about when you have <a… /a>
how do you remove the border from the image ?
t4-trix (3 comments)14 September 09
we can also zoom links on mouse hovering
Aartjan (1 comments)22 September 09
I agree with Jestep, changing the appearance of hyperlinks reduces usability. Online conventions are your user’s lifeline.
lynnscott (20 comments)30 September 09
Hi…Regular…Coloured Text and underline…..Keep it simple..and traditional…
It works for me…Thanks..
Caity |ZA Cartridges (4 comments)2 October 09
I have to say that as a newbie coming here and getting fantastic tips and advice really helps me a lot I have to say that I like colored and underlined, thanks Michael!!
Lucrative Investing (5 comments)3 October 09
I also use a and to underline important links on my website, I find that this combination works best to separate things. For lesser links I just leave them be with anything special. However I do like the link background effect that is cool but I guess you have to pick the color carefully you wouldn’t want a dark color unless the font color of the words itself where light.
Cathy @ 3 at 1 Copying (9 comments)5 October 09
Keeping things simple is really the best way to go, and for this I would have to say colored and underlined, less is more in most things that we do.
BlindAcreMedia (7 comments)22 October 09
Great and easy tips. Just make sure that you chose one that fits the design of your site.
nubutbu (2 comments)23 November 09
may be youneed a new link style for youe website?….
mod converter (2 comments)23 November 09
nice one.