The  GOV.UK Design System  team is improving how links look to users. We’re doing this work to support  Mission 1 of GDS’s strategy : “GOV.UK as

Blog Design in government

submited by
Style Pass
2021-07-08 07:00:03

The GOV.UK Design System team is improving how links look to users. We’re doing this work to support Mission 1 of GDS’s strategy : “GOV.UK as the single and trusted online destination for government information and services”. As part of that we are always looking at ways to make GOV.UK easier to use.  

Link text is usually underlined, added with CSS styling using the `text-decoration: underline` property. The underline tells users that ‘this is a link’ and this is widely understood on the web.

But this underline can look quite different across different browsers. Most browsers make the line too thick and too close to the bottom of the text. This can distort the overall shape of the words, which can make them harder to read. This can become a problem on pages with lots of links, like search results or navigation pages.

We looked at different workarounds to the default styling. These were heavily inspired by this CSS tricks article about styling underlines on the web . After weighing up pros and cons we settled on an approach that would enhance the experience for lots of users without adding too much code or being too hacky (and over-complicated).

Leave a Comment