Search code examples
htmlcssfontswebfonts

What can cause octal/hex "numbers" in html be displayed with the times symbol on the place of x? How to fix it?

Context: I'm adjusting styles for a blockchain explorer, so it has many hex numbers as text (like 0xa4a282). The problem is, they are not all represented the same: some of them are shown normally, with x symbol, while others are shown with something like × symbol:

enter image description here

The unexpected thing is – inspector shows that all of them are in fact written with x (I can also confirm this with copy-pasting the rendered text into a text editor). Narrowing down the problem, I've figured out that the behavior depends on the symbol going after x: if it's a letter, it is represented as "x", but if it's a number, it becomes "×" (visually). Well, in fact this is more complicated: if I remove all the html from body and set it to just

<body>
    <div>0xa 0xA 0x3 0x9 0x x1 x2 x3 x4 x5 x6 x7 x8 x9 x0 xa xA</div>
    <div>0x3 0x9 0x x1 x2 x3 x4 x5 x6 x7 x8 x9 x0 xa xA</div>
    <div>x1 x2 x3 x4 x5 x6 x7 x8 x9 x0 xa xA</div>
</body>

this is the result (note different results for x1, presumably depending on what is the previous symbol):

ouch, this is complicated

The source of the problem is the Inter font: removing it from css applied to the elements removes the effect. Here's an MCVE:

body {
  font-family: Inter, sans-serif;
}
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&amp;display=swap" rel="stylesheet" data-optimized-fonts="true">

<div>0xa 0xA 0x3 0x9 0x x1 x2 x3 x4 x5 x6 x7 x8 x9 x0 xa xA</div>
<div>0x3 0x9 0x x1 x2 x3 x4 x5 x6 x7 x8 x9 x0 xa xA</div>
<div>x1 x2 x3 x4 x5 x6 x7 x8 x9 x0 xa xA</div>

What is this effect (are these ligatures? monograms? something else)? How to get rid of it (can I do this while keeping the font family)? I'm not seeing the effect when testing the font on Google Fonts.

Solution

  • So yes, those are ligatures of the Inter font (more on that). I'm not sure why this is not always reproduced by the Googel Fonts' Type Tester (when I load the page and start typing 0x1, it is not dispayed as a ligature), but the "preview" input reproduces this.

    I'm not aware if a specific ligature can be switched off, but for me setting

    body {
    font-variant-ligatures: none;
}

    was good enough.