What is wrong with my numbers on YouTube?

Dear all,

Does someone else have this odd representation of numbers on YouTube in Google Chrome?

Wath is odd about the numbers ?

Well, to me they just look a little bit odd in comparison to the rest of the font.

IDK if you can format your youtube video name with bold tag but this could be a font problem . Maybe try changing font in chrome settings ?

Me too :v: Version 57.0.2987.133 (64-bit)

1 Like

Thank you for confirming it, @Wizard_Gekko!

Which could be the affected package? Chrome itself, X, or even a font package?

The problem is that they have chosen to use Noto Naskh Arabic UI in weight 500 for the video titles (h3 element). First of all Noto Naskh Arabic UI is a font that has numbers set that way (variable height, not conforming to the baseline). So yes, they do look weird in every browser. It also seems that the font doesn’t have weight 500 (“semi-bold”) naturally.

OPTION #1: The font problem could be fixed in fontconfig BUT this is a global setting, so it affects other software as well. It won’t make the text bold, but that’s not a bad look, IMHO.

If you have a local fontconfig override file (~/.config/fontconfig/fonts.conf), add the match definition from below to it. If not, create the file with the contents:

<?xml version='1.0'?>
<!DOCTYPE fontconfig SYSTEM 'fonts.dtd'>
<fontconfig>

  <match target="pattern">
    <test name="family" qual="any"><string>Noto Naskh Arabic UI</string></test>
    <edit name="family" mode="assign" binding="strong"><string>Noto Sans</string></edit>
  </match>

</fontconfig>

Test with:

$ fc-match "Noto Naskh Arabic UI"
NotoSans-Regular.ttf: "Noto Sans" "Regular"

OPTION #2: I know you said you are using Google Chrome, but I’m including this anyway. Maybe someone knows a similar method for Chrome/Chromium?

For Firefox users the fix is quite simple, and takes care of the bolding of the text as well. In ~/.mozilla/firefox/your-profile/chrome/userContent.css add:

@-moz-document domain(youtube.com) {
    body { font-family: "Noto Sans", Roboto, Arial, sans-serif !important; }
    h3 { font-weight: 600 !important; }
}

You may need to restart Firefox to see the change.

1 Like

Thank you very much, @samuvuo!

Chrome and Chromium users can easily apply your stylesheet using Stylish.

Question:

Long-term this is not going to be fixed by any package update or the YouTube website but requires the user to modify his font configuration?

Problem is at YouTube, so no package updates on the client side can fix that. If enough people complain to YouTube about the font, maybe they change it. After all, this change was made only recently. Until then, these client-side fixes is all we can do to make our viewing experience tolerable.

It’s the same with some websites that use a tiny, tiny font or have body text with poor contrast for “artistical reasons”. It’s a biological fact that your eyesight starts getting worse once you hit 40. I usually send an email to the webmaster pointing out that people over 40 might want to view their pages as well. If no change, I just bump the font size up a bit in my local userContent.css and be done with it.

3 Likes