Helvetica Neue font renders element sizes differently than Helvetica

by

Having two simple elements and CSS like here in JSFiddle:

<span class="text">f</span><span class="text">fl</span>

.text {
  font-family: "Helvetica Neue"
}

When running the code in Chrome, the first span width covers all of the text while the second span width is 0. When I change the font to Helvetica, both spans have correct and expected width appropriate to the text within them.

My understanding is that it is somehow related to ffl | Latin small ligature and my guess is that the former font contains the ffl ligature while the latter does not.

Is there a way how to work-around it and selectively disable transformation of certain Unicode characters while using “Helvetica Neue”? Or do I simply need to use a different font?

Just found that font-variant-ligature might be a solution. Its not obvious to me what all ligatures does it affects, though. I need to work-around the issue just for small Latin ligatures. Namely, these Unicode characters:

  • U+FB00 (ff): ff
  • U+FB01 (fi): fi
  • U+FB02 (fl): fl
  • U+FB03 (ffi): ffi
  • U+FB04 (ffl): ffl

..but not affect any complex language like Japanese, Arabic etc.

  • there’s something that confused me in this question.. I prepared a whole demo to show the point but I think it’s too far fetched if I didn’t first clarified this fact. I first crafted an html snippet including a fontface declaration bound to the Helvetica Neue font family. After that I tried to render the ligatures you showed in your question but the zero width you were talking about never occurs. I didn’t share the code because the way you described the issue is looking for answer around the ligatures. The demo just showed that they correctly render with no added settings

    – 




  • 1

    but yet I could also speculate you are not seeing the Helvetica Neue rendered.. unless you have such font installed in your system.. are you using a mac maybe? In my case I see it rendered as Times New Roman for example. Unless I explicitely include a fontface.

    – 

  • 1

    since the size of inlineelements (such is the span by default) is given by their content.. I may assume that in your system the text gets aggregated in one phrasal unit to accomodate for the ligature… and in that case it may make sense to have the second span as zero width. I just can’t verify myself with the woff I used because it behaves differently. Anyway maybe the suggestion given in the answer did the job?

    – 

  • 1

    Thanks a lot for your answers and participation man! Yeah, the answer bellow is correct and working on the simple sample but I won’t be able to use it (again, it’s too general and it’d negatively influence other parts of the system). I was ideally looking for solution where I could somehow list above 5 ligatures and exclude them from being processed by the font.

    – 

  • 2

    @MartinJaníček Another option is to edit the font and remove those ligatures, and of course host that font. Or use JavaScript to dynamically add the style I posted below

    – 




Make the span display:inline-block

.text {
  display: inline-block;
}

.text, 
.text_old {
  background: radial-gradient(white, red);
  font-family: "Helvetica Neue";
  font-size: 40px;
}
<p>With "inline-block"</p>
<span class="text">f</span><span class="text">fl</span>
 

<p>Without "inline-block"</p>
<span class="text_old">f</span><span class="text_old">fl</span>

Leave a Comment