Guiding principle: Design for everyone.
On this page
When to underline
Generally, do underline links when they are in:
- body text (including bulleted lists)
- a hover state
Generally, do not underline links when they are in big navigation panels such as:
- dropdown menus
- side panels
- in-page table of contents
When to break underlining rules
Only break these rules if underlining or not underlining starts to impact readability. See the accessibility section for more on this.
- Links should always be
- Link hover state should always be
- Link visited state should always be
- Links should have a focus state
Links that open in a new window
If the user is in the middle of a transaction or form, links should open in a new window.
If a link is opening in a new window or tab, include this standard icon at the end of the link:
Links paired with icons
Only pair icons when the link is in a list, never within a paragraph.
Icons you can pair with links include:
- Social media
Underlining is generally a good accessibility practice.
Underline links as much as possible until it starts impacting readability – use your judgement. For example, if you have a long bulleted list of links, it may look a little overwhelming or distracting if they are all underlined – this would be a time when not underlining links will help readability.
If you are not sure how underlining links will impact readability, you can test with some users.