Web Interface Handbook / Typography


01 Color

The color of the links can be anything: red, green, or orange, but it's more familiar when it's blue. This is an established pattern, and it has long become natural for many users. The blue color in the text for people will mean a link, and they will not need to spend a long thought before clicking on it.

If the link is underlined and has the same color as the text, it dissolves and is difficult to see. Links need emphasis.

02 Underlining

If a link in the text is not underlined, it raises questions and makes people think even if the color of the link is different from the text.

In navigation and other elements that explicitly read as a set of menu items, the color of the links is irrelevant, as is the underline.

03 Call-to-action

When the links are call-to-action, the underline is less important than when the link is in the text.

In call-to-action blocks, the composition, spacing, and placement of the button matter more than the color and underline. Therefore, a link may have less of an indication that it is a link and tends to be a button in its design.

It's the same if the link is typed with all caps, its color and underline are less meaningful. The link remains visible and stands out from its surroundings.

But underlining is better. This way you don't make users think. Even if it takes a fraction of a second, it's still a waste of valuable time.

Links scattered throughout the text cause clutter, reduce focus, and make the text difficult to read. It is good if there is only one link in one paragraph.

If you need more than one link in the text, the best solution may be to put them in a separate block below the text, such as a list.

05 Feedback

Hover link color is important for pointing indication. It lets users know that the element can be interacted with. It's best to make the hover state a contrasting color and different from the normal link state.

When designers make links for toggle menus, it often breaks the logic of the active item, and no matter what they do, users can not understand which item is active and which is not.

So it is better to use additional tools and show the difference between the states, for example, by changing the shape of the active item.

Again, the underline plays a role and makes it easier for us to understand that the link is clickable even though the shape and color highlight the active item.