Quick UX tip: fill the multi-line link gaps

When styling links (or any text which could eventually become a link) that could break into multiple lines, double-check your line-height. Not only for the sake of legibility, but to make sure a gap between two lines does not occur. Take a look at the following example I found on the web:

Bad line height example
An example of a gap between two lines. I added the border and background color in the inspector.

If your mouse hits the white gap between those two lines and you click, nothing happens. The user expectation is of course different: the user expects to land on a new page. This can be very frustrating and confusing for your users, but thankfully, a fix is very easy: adjust your line height (or even padding) and the problem is gone.

Next Post:
Previous Post: