Link Text: Best Practices for Desktop and Mobile
Key Takeaways
- The ideal link presentation should differentiate linked text from unlinked text, visually distinguish between visited and unvisited links, work in context, be scannable and predictive of what users will find upon clicking, and keep important words at the start of the link text.
- Mobile usage has sparked new styles in identifying text links within an interface, offering new possibilities for link presentation.
- The best practices for designing links for both desktop and mobile require a balance between visibility, usability, and aesthetics. Links should be easily identifiable, large enough to be easily tapped on mobile, and the link text should be descriptive of where the link leads to.
- Link text, also known as anchor text, plays a crucial role in SEO as it helps search engines understand the content of the linked page, improving its ranking for relevant keywords. Thus, using descriptive and relevant link text can enhance SEO efforts and improve a website’s visibility in search engine results.
“I think the lack of underlining on links is a widespread problem already – designers not wishing to spoil their typography work at the cost of an easily navigable page – so a good shout out on that.”It made me wonder. What is the state of links today? Is there an optimal link length? Is there an ideal link presentation? Should all links be underlined? What about rollover, viewed, and unviewed states?
Old habits die hard…
Or do they? If you’re of the old school, you’ll recall the days when all links were blue and underlined and, whatever you did, you didn’t use an underline for anything else. Ah, how times have changed …
- the category link
- the article title link
- the author name link.
Free rein?
Most of the literature I could dig up on link presentation and length was old—like three years old. One key problem with that is that this information is pre-mobile. So if you have any mobile-first literature on link treatment and text that you can share with us in the comments, please do. That said, there are still some guidelines that seem to be as applicable today as they were all that time ago:- Differentiate linked text from unlinked text.
- Differentiate visually between visited and unvisited links.
- Make link text work in context.
- Make it scannable (that is, make it work if not out of context, then without the context of the sentence that includes it).
- Keep it short but predictive of what users will get when they click.
- Put the words related to that prediction at the start of the link text.

A few link text trends
I pointed out some potential link-related issues with the sitepoint.com homepage a moment ago, but I have to admit that those aren’t exactly “text links”—they’re clickable title zones, and many would argue that’s pretty obvious without an underline. Okay, so they don’t adhere to all the guidelines in the list above, and given the different link interactions within each box on the desktop homepage, things could get a bit confusing, but we could consider these kinds of title links separately from in-content text links. So let’s look at some of the world’s leading usability and content experts are doing with their links, of all varieties, shall we? The Interaction Design Association, or IxDA, website uses underlines as the rollover state for every link that’s not a button or part of an image. All links are coloured differently from unlinked text as a starting point. The Nielsen Norman Group does the same, except, weirdly, with the Popular Topics list in its site footer. The Hiser Group , an Australian-based usability consultancy, also does the same, though it doesn’t use underlines in any of its site’s menu states. What about in-text link treatments? We see some interesting examples on text-centric publishers’ sites. Wikipedia’s internal pages denote links with blue text, and underline them on rollover.



Frequently Asked Questions (FAQs) on Link Text Best Practices
What are the best practices for designing links for both desktop and mobile?
Designing links for both desktop and mobile requires a balance between visibility, usability, and aesthetics. Links should be easily identifiable, with a color that stands out from the rest of the text. They should also be underlined to distinguish them from regular text. For mobile, links should be large enough to be easily tapped with a finger. Additionally, the link text should be descriptive and give a clear indication of where the link leads to. Avoid using generic phrases like “click here” or “read more”.
How can I make my links more user-friendly?
To make your links more user-friendly, ensure they are easily identifiable and distinguishable from the rest of the text. Use a different color for your links and underline them. The link text should be descriptive and give a clear indication of where the link leads to. Avoid using generic phrases like “click here” or “read more”. Also, ensure that your links are large enough to be easily clicked or tapped, especially on mobile devices.
What is the importance of link text in SEO?
Link text, also known as anchor text, plays a crucial role in SEO. It helps search engines understand the content of the linked page, which can improve its ranking for relevant keywords. Using descriptive and relevant link text can enhance your SEO efforts and improve your website’s visibility in search engine results.
How can I design effective hyperlinks for better user experience?
Designing effective hyperlinks involves making them easily identifiable, using descriptive link text, and ensuring they are easily clickable or tappable. Links should stand out from the rest of the text, usually through a different color and underlining. The link text should clearly indicate where the link leads to, helping users decide whether to click on it or not. On mobile devices, links should be large enough to be easily tapped with a finger.
What are some common mistakes to avoid when designing links?
Some common mistakes to avoid when designing links include using generic link text like “click here” or “read more”, making links that are too small to click or tap on mobile devices, and not making links stand out from the rest of the text. These mistakes can lead to a poor user experience and lower engagement with your content.
How can I make my links more visually appealing?
To make your links more visually appealing, choose a color that stands out from the rest of the text but still complements your overall website design. You can also use different styles, such as bold or italic, to make your links stand out. However, ensure that your links are still easily identifiable and usable.
How can I create text links in Squarespace?
To create text links in Squarespace, highlight the text you want to link, click on the link icon in the text editor toolbar, and enter the URL of the page you want to link to. You can also set the link to open in a new tab and add nofollow attributes if necessary.
What are the guidelines for visualizing links?
The guidelines for visualizing links involve making them easily identifiable, using descriptive link text, and ensuring they are easily clickable or tappable. Links should stand out from the rest of the text, usually through a different color and underlining. The link text should clearly indicate where the link leads to, helping users decide whether to click on it or not.
How can I design better links for emails?
Designing better links for emails involves making them easily identifiable, using descriptive link text, and ensuring they are easily clickable. Links should stand out from the rest of the text, usually through a different color and underlining. The link text should clearly indicate where the link leads to, helping users decide whether to click on it or not.
How can I improve the accessibility of my links?
To improve the accessibility of your links, use descriptive link text that gives a clear indication of where the link leads to. Avoid using generic phrases like “click here” or “read more”. Also, ensure that your links are easily identifiable, usually through a different color and underlining. On mobile devices, links should be large enough to be easily tapped with a finger.
Georgina has more than fifteen years' experience writing and editing for web, print and voice. With a background in marketing and a passion for words, the time Georgina spent with companies like Sausage Software and sitepoint.com cemented her lasting interest in the media, persuasion, and communications culture.
Published in
·Bootstrap·Cloud·Miscellaneous·Open Source·Patterns & Practices·PHP·Programming·Web·June 20, 2014