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

If you enjoyed reading this and want a monthly roundup of my articles delivered to your inbox, just enter your email below.

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. Mac event 2021

    Apple had their final event of the year last night and it was especially exciting as I’m in the market for a new Mac. Here are my thoughts.

  2. Face ID on the Mac won’t happen

    With an October Mac event looming, I got to thinking about Face ID on the Mac; I don’t think it’ll be added now, and might not ever be.