If we scoff at faux bold and italic, why can’t we consider a proper separate underline font, with the underline being part of each glyph?

One can dream?

This is a potentially promising, but in our case flawed approach:

Serving a separate font would incur a big latency penalty (and font files are already the heaviest part of an initial Medium load).

Since the line is “baked into” the font, we cannot really move it or change its width depending on the font size… and the colour changes are prohibited also.

Font licensing and serving issues can make it too complicated.

Kerning this might be tricky.

5. Drawing with <canvas>

Here at Medium, we’re using <canvas> in some unexpected — to me — places, for example our signature full-bleed, blurred images.

If we want to draw a line, why don’t we just draw a line? HTML <canvas> is, after all, designed for controlling individual pixels. This would allow us to have custom width, colour, even draw around descenders. However, the tricky part is lack of support for knowing when the links break — the tools to measure wrapped text precisely don’t exist or are very costly in JavaScript.

(A version of this idea is also a variant of the above, having a bespoke font with just the underline, and drawing it on top of the actual text… which we have to reject for the same reason.)

6. Background images and gradients

And thus, we arrived at our unintuitive saviour: the background image. On the surface, background images don’t seem to have much to do with underlines. However, they have an interesting property of supporting wrapped text (we use backgrounds already for highlighting notes — click on the speech bubble on your right), and they gained enough powers in the recent years to be extremely flexible.

With modern CSS, background images can be positioned and scaled exactly as needed, including support for retina pixels. And they don’t even need to be separate images requiring additional web fetches: we can provide them inline using data protocol, or — even better — synthesize via gradients (which themselves are incredibly powerful).

So that’s what our underline could conceivably be: a tiny gradient; 1 or 2 pixels tall; horizontally stretched as far as it can go; vertically carefully positioned.

7. Clearing the descenders

Unfortunately, the background image/gradient solution won’t allow us to clear the descenders. My colleague Dustin found a way, and it’s as ingenious as impractical — applying a white CSS text shadow or a text stroke to paint over the underline and simulate a gap between the underline and the text.