Even Links Can Look Good
60
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?
Enjoy this post? You should follow me on Twitter!
About the Author
Michael Martin
Michael Martin is the founder of Pro Blog Design. He works as a freelance web designer, loves WordPress, and has an unhealthy addiction to smilies.
Related Posts
-
30 Ways to Improve Readability
29th October 2007
-
Perfecting Your Printed Posts
14th August 2007
-
Design Review: Dillydesigns.com
8th September 2007
-
Format Your Posts For Readability
31st August 2007
Nice post. Maybe one addition to rollover effects is to change the background colour or image.
http://www.newfashionlife.org
yes the change to the background should be great
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 :)
Web apps are great because you can access them from anywhere, they keep all of your data safe, and for the most part, they’re straightforward to get up and running with (No installations or configuring needed!)
The catch of course is that there are thousands of them and it can be a challenge to find the ones that will really help you. In this post we’ve collected together 40 of our favorites. Read the notes on each to see if it would fit your workflow, and who knows, you might just end up a little more productive than before!
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.
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?
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.
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).
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…
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.
excellent suggestions and examples.. already used a couple :-)
I personally using Colored background but sometimes i add Bold too.
Excellent article.
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. ^_^
Great article for beginners, some really simple things that can make links and important information stand out.
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.
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.
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.
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.
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.
Hmm…. did the tests take into account variations in the website’s color scheme?
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.
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.
what about when you have <a… /a>
how do you remove the border from the image ?
we can also zoom links on mouse hovering
I agree with Jestep, changing the appearance of hyperlinks reduces usability. Online conventions are your user’s lifeline.
Hi…Regular…Coloured Text and underline…..Keep it simple..and traditional…
It works for me…Thanks..
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!!
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.
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.
Great and easy tips. Just make sure that you chose one that fits the design of your site.
may be youneed a new link style for youe website?….
nice one.
I just wonder if it is possible to change the color blue in links? I asked this because sometimes the color of the link is same with the background.
Good post, should think.
Wedding
Nice,
i was wondering if i could try these in a comment box. :P
The problem I find with being artsy with links is that your audience isn’t always clear on what’s a link and what is not. I think the standard blue text color with or without an underline is the best.
Underlined texxt sux, i think border bottom is great option…
The other thing that I liked was that it had been produced specifically as a CMO!
I usually do go through the spam filter, so even the simple fact you have a Gravatar will help any future comments of yours stand out for me
Recently changed the links in my webpage, changing it from the default blue color to something else definitely makes it look more modern.
I’m in the middle of a re-design for my page and links is one of things I was thinking about…. I have the dash right now but I really don’t like it. I’m a big fan of it being underlined when rolled-over…. I also think that blue is the most ‘recognizable’ link color but then they don’t look nice which is the whole point of the article!
Colored, underlined would still be the best. Aside from its obvious that its a link, it also looks formal but very casual.
ks. With that in mind, here are some of the best ways to style your links, to both lo
Colored background is the best for me. Aside from you can easily see the links, it would also be good if the reader has some vision issues.
Well, Colored background is the best for me. Aside from you can easily see the links, it would also be good if the reader has some vision issues.
our links. With that in mind, here are some of the best ways to style your links, to bot
I like colored and underlined. I am tempted by colored background but it seems a little to colorful.
I think the standard blue text color with or without an underline is the best.
!!
Thanks for the info,,, I love it
by giving priority to health as a result of long research in university and laboratory developed and manufactured with the permission of the Ministry of Health. Does not contain any non-natural raw materials.
I come to notice the difference of links I’ve seen. I didn’t know such little case has so much knowledge behind it. Thanks for your sharing.
Creating a link means you have to consider someone is going to need to know they can click on it to navigate them elsewhere. So there needs to be a clear distinction there’s a link there. There is a default blue / purple colour which we all know, but this shows no thought or effort has been put it when it comes to styling these links. If you have taken the time to design and build a website I think working out the small things like the style of links really finishes it off.
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). Aside from you can easily see the links, it would also be good if the reader has some vision issues.
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. I guess the answer is always to test it for yourself.
Aw, this was a very nice post. In thought I wish to write like this – taking time and precise effort to make an excellent article is very rare…
This is getting a bit more subjective, but I much prefer the Zune Marketplace. The interface is colorful, has more flair, and some cool features like ‘Mixview’ that let you quickly see related albums, songs, or other users related to what you’re listening to. Clicking on one of those will center on that item, and another set of “neighbors” will come into view, allowing you to navigate around exploring by similar artists, songs, or users. Speaking of users, the Zune “Social” is also great fun, letting you find others with shared tastes and becoming friends with them. You then can listen to a playlist created based on an amalgamation of what all your friends are listening to, which is also enjoyable. Those concerned with privacy will be relieved to know you can prevent the public from seeing your personal listening habits if you so choose.
wow, great tips! i will keep them in mind..it’s very nice of you to share them with us ;)
I like to use the color to make the links stand out. Hovering over a link makes it really definable. Does this work in wordpress?