Marcin Wichary is a designer at Medium who took on the challenge of creating a considered, fine-tuned underline for the links on the site. In contrast to the normal “data-driven” design story, which is often a series of A/B tests that nudge things around by a pixel or two for weeks until they attain some counterintuitive optimum, this is a story about someone who had an intuitive, artistic, aesthetic goal and spent a bunch of time getting HTML to behave in a way that was consistent across different browsers, screen resolutions, and so forth.
I have to say that the actual underlines that Medium came up with don’t seem to me to be more or less appealing than the default (the GIF above is displaying a before-and-after and I still can’t tell which is which without referring to the article), but I really enjoy stories about people who know what aesthetic effect they want to achieve and are willing to move heaven and earth to achieve it.
I carried on, adding more and more complexity and magic numbers to my suggested change. And this is where the code reviewers started asking the truly hard and important questions: Is this too complicated? Will this make the CSS too heavy? How would we maintain it? What happens if this fails?And so, during the following weeks, I worked on:
*
coming up with formulas rather than arbitrary values — in the event of changing the fonts or font sizes in the future, adjusting the underline positions would be much easier and faster,*
limiting the browsers we use so that in the case of failure, the reader could see the default browser underlines (rather than not seeing them at all!),*
simplifying the code so that while we might not get the perfect underlines, we could save both the bytes and future maintenance costs.
Crafting link underlines on Medium [Marcin Wichary/Medium]
(via Waxy)