Books UI Typography Elements

Links

Links are an essential part of web interfaces. They create internal and external navigation, help users get information and perform actions. In other UI, such as applications, the role of links is insignificant; clickable areas and buttons are used instead.

Color

The correct link design in web interfaces can determine how quickly users get what they need and whether they get it at all. Link color plays one of the most critical roles in this.

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.

The color of the links can be anything, but it is more familiar when it is blue.

It all depends on the context and design style, of course. Suppose the red color acts as various accents in the interface design. In that case, it creates appropriate connections for users; in this case, the text's red links will usually be perceived without ambiguity.

Red links in the context of red accents look natural.

When a link is used as a call to action, its contrast and difference from the text are crucial. So it's hardly worth compromising here, and you should always highlight the link with a color different from the text. Even an icon may not help to create a significant emphasis. Color will do its job better.

Even the icon doesn't help much to highlight the call-to-action link, but the color and underline work.

Purple can be a dangerous color for links, as long as it is still associated with the visited state, although this practice in web design has not been used for a long time. Most sites have the same link color for both visited and unvisited links.

The link doesn't have to be white on a dark background. A good way is to make the link colored, but not as bright as on a light background. The color in this case should be muted and add more white to the tint.

On a dark background links and can be tinted.

Underlining

Even an underlined link, but made in the same color as the text, gets lost in it. The link is hard to see in the text in the same color, it doesn't look like something clicked at all.

The link is the same color as the text, even with an underline not very readable.

A link with a different color from the text and with an underline is always perceived unambiguously. This is the simplest and most straightforward solution.

A link that is clearly different from the text in color is always the best solution.

Links without an underline, even those with a different color from the text, don't look like the right choice. The purpose of a link is to be clicked. And if it tries to look like plain text, what's the point of making links at all?

Links without an underline look weird.

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.

Link color and underline do not matter in navigation.

Call-to-action

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

Color, decorative underline, border help to highlight the link more clearly in modules.

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.

In the cards, the link may not have an underline or even an accent color.

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. Users should not have to deal with tasks that have nothing to do with them. An underlined link is always immediately perceived as a link in all cases and it requires no effort to understand.

The principle of one link

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.

Links scattered throughout the text make it hard to read.

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.

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.

Not enough explicit hover state.

In menu items, it is important to highlight the active state, telling users what section of the interface they are in. If the links are underlined, the task is simple - an active item without an underline and slightly muted gives a clear understanding of its state.

When links are underlined in the menu, it's easy to make the active item explicit.

If the links are not underlined in the menu, it is worth highlighting the active item significantly. Usually, only highlighting in color will not help, and it is worth adding a decorative element that will more accurately convey the item's state.

Not enough explicit active 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.

It is not immediately clear which link has the active state.

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.

Shape and color are good tools to make UI details clearer.

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.

Prev

Next

Check out my other books

PDF Ebook

Web Interface Handbook

PDF Ebook

Designing Design Systems

User Interface Colors

Coming soon

User Interface Colors