font has the digit "2" smaller than the rest of the digits

Question

So i am using this font called "Aileron" which i downloaded from here.

CSS:

@font-face {
    font-family: 'Aileron SemiBold';
    src: url('./fonts/Aileron-SemiBold.otf');
}

body {
    font-family: 'Aileron SemiBold';
    font-size: 12px;
}

Please refer the image: Digit "2" looks smaller than the rest of the digits

This is only for SemiBold variant of the font and when font-size is between 11.7px and 12px. For sizes lower than 11.7px and higher than 12px it works fine.

I tried the "font-variant-numeric" property but it doesn't work.

I found that font for live use [here](https://webfonts.ffonts.net/Aileron-SemiBold.font) and it shows that same behaviour (just less exagerated) even with larger font-size. There on that link the font-size is 50px and if you paste the string `1234567890` you can see the number `2` looks odd especially compared to `3` next to it. I'm afraid you'll need to control the line-height of the single element you'll fill with `2` indipendently from the rest of the string if you want it to look different. Maybe someone else will know css tricks to control font beyond that — Diego D, Aug 03 '22 at 13:00
From Font Squirrel you can download the SVG font, I think this can solve your problem. — Baro, Aug 03 '22 at 13:19

score 1 · Accepted Answer · answered Aug 04 '22 at 18:10

This issue is related to (cff based) opentype hinting.
Hinting will try to fit stems to the current pixel grid.
Unfortunately this can sometimes result in weird rendering.

As a workaround you could convert your otf to a woff2 with a tool like transfonter.
This will usually strip the original cff hinting or convert them to truetype hinting instructions (transfonter has several hinting options).

Example: unhinted woff2

@font-face {
    font-family: 'Aileron_not_hinted';
    src: url('data:font/woff2;charset=utf-8;base64,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') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}


p{
    font-size:11.8px
}
.nothinted{
    font-family:'Aileron_not_hinted'; 
    font-weight: 600;
}

    <p>not hinted: <span class="nothinted">0123456789</span></p>

Expected result

Another benefit of this conversion is a smaller filesize due to woff2 more advanced file compression.

Hey thanks for the reply! I converted my font to woff2 and size of '2' is fixed. But the woff2 version looks lighter when i zoomed in i can see it's edges are not as smooth as the otf version [image](https://imgur.com/a/oxyD6Kt). — Hemanth Vijaywargi, Aug 07 '22 at 08:04
@Hemanth Vijaywargi: Unfortunately there is no way to achieve a 100% predictable font rendering across all OS and browsers. The best you could do is to edit the hinting yourself using a font editor like fontLab, glyphs, fontforge etc. But that's not a trivial task. You could also try to just remove all hinting instructions and compile the font once again as otf. However this might introduce other undesired rendering quirks. The described method is certainly the easiest workaround. — herrstrietzel, Aug 07 '22 at 13:07

score 0 · Answer 2 · answered Aug 03 '22 at 19:38

I have had similar problem with font being smaller for English than other language. I wrote some javascript code to make font-size smaller for those letters. So based on my answer I have adapted (since in your case you only care where font-size is between 11.7px and 12px I also used this answer)

function do_elem(elem) {

  function getStyle(el, styleProp) {
    var camelize = function(str) {
      return str.replace(/\-(\w)/g, function(str, letter) {
        return letter.toUpperCase();
      });
    };

    if (el.currentStyle) {
      return el.currentStyle[camelize(styleProp)];
    } else if (document.defaultView && document.defaultView.getComputedStyle) {
      return document.defaultView.getComputedStyle(el, null)
        .getPropertyValue(styleProp);
    } else {
      return el.style[camelize(styleProp)];
    }
  }


  function getFontSize(elem) {
    return parseFloat(getStyle(elem, 'font-size'));
  }


  function textNodesUnder(node) {
    var all = [];
    var font_size = getFontSize(node)
    for (node = node.firstChild; node; node = node.nextSibling) {
      if (node.nodeType == 3) {
        if (font_size >= 11.7 && font_size <= 12.0) {
          all.push(node);
        }
      } else {
        all = all.concat(textNodesUnder(node));
      }
    }
    return all;
  }

  function replace_node(node, str) {
    var replacementNode = document.createElement('span');
    replacementNode.innerHTML = str
    node.parentNode.insertBefore(replacementNode, node);
    node.parentNode.removeChild(node);
  }

  function decorate_english(str, cls) {
    var a = []
    for (var i = 0; i < str.length; i++) {
      var c = str.charAt(i);
      if (c == 2) {
        a.push("<span class=\"" + cls + "\">" + c + "</span>")
      } else {
        a.push(c)
      }
    }
    return a.join("")
  }

  function process_text_nodes(nodes) {
    for (var index = 0; index < nodes.length; index++) {
      var node = nodes[index];
      var value = node.nodeValue
      var str = decorate_english(value, "eng2")
      if (str != value) {
        replace_node(node, str)
      }
    }
  }

  var nodes = textNodesUnder(elem);
  process_text_nodes(nodes)
}


// fix smaller letter "2"
do_elem(document.body);

body {
  font-size: 16px
}

.eng2 {
  font-size: 120%;
  color: red;
}

.inner {
  font-size: 11.9px
}

<body>
  0123456789
  <div style="font-size:11.8px">
    0123456789
  </div>
  <div style="font-size:12.8px">0123456789
    <div class="inner">0123456789</div>

  </div>
</body>

font has the digit "2" smaller than the rest of the digits

2 Answers2

Example: unhinted woff2