Skip to main content

Text underline thickness on Chrome

Posted in Development

I use big headings on my website. Some of those headings, like those on the blog listing are also links. Something that has bugged me for a while is that the thickness of the link underline on Chromium browsers (like Chrome, Opera, and Edge) is greater than that on Safari and Firefox.

People don’t generally jump from browser to browser, comparing a website to ensure it looks the same everywhere, but when ‘thicker’ is actually ‘too thick’, even in isolation, there’s a problem.

I wondered whether it might be something to do with a different default thickness; once I manually specified a value with text-decoration-thickness (which has great browser support) it would hopefully rectify itself.

Unfortunately it didn’t. It seems the way Chromium browsers calculate text-decoration-thickness is different, so it doesn’t matter whether you override the default value or set it manually. And the units don’t seem to make any difference either: I tried pixels, ems, you name it; those underlines always looked ungainly in Edge, Chrome and Opera.

I considered delving into how the calculation is done, and even exploring why it’s that way, but life is currently too hectic, and sometimes it’s enough to accept something for what it is and try to fix it.

It was only really second level headings with links in them that were too chunky. <h1>s on this site never have links, and the slightly thicker underline doesn’t look wrong on <h3>s and below, so I targeted links in <h2>s:

h2 a {
text-decoration-thickness: .06em;
}

The underline still looks different cross-browser but this value seems to hit the sweet spot. It’s neither:

  • too thick on Chromium browsers and right everywhere else
  • proportional in Chromium and too thin on other browsers

It’s a pain that we still have to think about these kinds of things, but I suppose non-standard browser behaviour is in much better shape than it was only a few short years ago. And the fact that we’ve got fine control over things like underlines makes me very happy indeed.

Subscribe

I send a newsletter on the last day of every month, containing:

  • A roundup of the articles I’ve posted
  • A hot pick from my archives
  • Some interesting posts from around the web

I don’t collect any data on when, where or if people open the emails I send them. Your email will only be used to send you newsletters and will never be passed on. You can unsubscribe at any time.

More posts

Here are a couple more posts for you to enjoy. If that’s not enough, have a look at the full list.

  1. It’s good to make mistakes

    As a designer and developer I’ve made countless mistakes, but that’s part of the reason I’m good at what I do.

  2. Focus appearance explained

    There’s some great stuff coming up in WCAG 2.2, but there’s one rule that’s particularly difficult to understand, so here it is in a bit more detail.