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. Using Pandoc to convert Markdown to Jira’s Textile in Sublime Text

    It’s a real pain that Jira’s plain text input isn’t Markdown. Here’s how to I write in Markdown and export to Jira’s version of Textile.

  2. Apple dials back the Safari 15 for macOS redesign

    The ultra-condensed tab bar in the up-coming Safari for macOS has been reverted in the betas; it’s now just an option in Safari’s Preferences.