How Medium designed its underlines

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)

Notable Replies

  1. Last time I moved heaven and earth all hell broke loose.

  2. in the event of changing the fonts or font sizes in the future

    !!!!!!! I would be the happiest boy on earth if I could dial that down.

  3. Red says:

    All that work to achieve uglier and less functional. Lord, do I miss the days when HTML formatted with <em> and <i> and <i> was deprecated because it presumed to tell you how something should look, rather than informing you browser of what something was, and letting you decide.

  4. This is a pet peeve of mine.

    There is a reason the browser is refered to as the user agent. Because it is meant to exercise agency regarding the display of HTML elements and other web content on behalf of the user. This is the reason <strong> is preferred over <b>, <em> over <i> - the former are indications of the writer's intent - express this part strongly, emphasize this part, in a medium-appropriate way consistent with the user's preference - the latter are indications of a typesetter's intent, ignoring the fact that not all of the readers will be using a typeset medium.

    You have your preference as to how links should be indicated on your screen. How nice for you. Colourblind people, and users of cellphones and text-only browsers and screen readers and braille readers have their own. Please stop trying to break people's custom stylesheets and user agent configurations.

  5. I thought dragonfrog made a good point. Sure, designers will want to create a specific aesthetic experience, but they're not as good a judge as the user is of the user's own needs.

Continue the discussion

9 more replies