CODEWITHSUNDEEP
cssmacosfonts
Dominique
Dominique

Reputation: 85

CSS - Helvetica Neue Condensed not rendered properly on macOS

I noticed the font Helvetica Neue Condensed is not rendered properly on macOS. Indeed, as shown in the image below, macOS does not center the font in respect to the line-height. According to my tests, it does not depend on the browser at all but on the system.

The word test in Helvetica Neue Condensed on macOS and Windows
The "Test" rendered on macOS (left) and Windows (right)

I have been looking for good solutions for many days unsuccessfully. I thought about using CSS hacks in order to target macOS but it is impossible with Chrome. The only (utterly disgusting) solution I have found was to use JavaScript by selecting all Helvetica Neue Condensed texts, putting them in a span with the following CSS properties: display: inline-block; transform: translateY(16%);. Besides being disgusting, this solution is applied after the page has been loaded. Consequently, the user can see the font go down… The cure is worse than the disease.

If you have any idea, I would be delighted to read it :)

Thanks!

Upvotes: 1

Views: 731

Answers (1)

Yohann Daniel Carter
Yohann Daniel Carter

Reputation: 975

I had the same issue with some versions of Helvetica Neue Condensed some time ago. Using the version form Linotype should fix the baseline issue :

https://www.linotype.com/fr/1245395/neue-helvetica-famille.html

Therefore, the font should be rendered almost the same way on every system.

Upvotes: 1

Related Questions