Overview
Overview
Our hyperlink style was developed after researching the needs and challenges facing users with varying levels of cognitive, literacy and visual ability. Our goal was to create an inclusive solution that improves the user experience for all users.
Our underline style
The underline is designed to always sit below the descender line, which is the lowest point of characters like j, y, and g. For text set at 1rem, this distance is approximately 5px from the baseline. To maintain consistent spacing across all font sizes, we converted this value to 0.3em, which scales appropriately with different text sizes.
On hover the underline increases in weight rather than just changing colour which enables colour blind users to see the transition and the colour for both the default underline style and the hover style, it has been designed to meet required contrast ratios.
To reduce distracting impact that underlines in hyperlinks the line thickness for the rest state reduced and colour is lightened. This ensures the visual strength of the underline isn't the same as the rest of the text.
<!-- H1 heading hyperlink -->
<h1>
<a href="javascript:void(0)">H1 heading hyperlink</a>
</h1>
<!-- H2 heading hyperlink -->
<h2>
<a href="javascript:void(0)">H2 heading hyperlink</a>
</h2>
<!-- H3 heading hyperlink -->
<h3>
<a href="javascript:void(0)">H3 heading hyperlink</a>
</h3>
<!-- H4 heading hyperlink -->
<h4>
<a href="javascript:void(0)">H4 heading hyperlink</a>
</h4>
<!-- H5 heading hyperlink -->
<h5>
<a href="javascript:void(0)">H5 heading hyperlink</a>
</h5>
<!-- H6 heading hyperlink -->
<h6>
<a href="javascript:void(0)">H6 heading hyperlink</a>
</h6>
<!-- Body text hyperlink -->
<p>Here is some <a href="javascript:void(0)">body text with a hyperlink</a> included.</p>
Guidelines for use
As a general rule underlines are required for all links and interactive text unless it's clear that it's a hyperlink (ie buttons, nav etc).”
When to use
- Traditionally, underlined text is associated with hyperlinks on the web. Users often expect links to be underlined, so not using underlines may make links less noticeable
Since there’s no hover state on mobile, underlines can be especially important for making links visible
When not to use
- In navigation menus or buttons: These elements are usually understood to be interactive, so underlines are often unnecessary on the rest state for these items
To avoid visual clutter: If there are many links close together, not using underlines can make the text less cluttered