Search code examples
htmlcssfirefoxfont-face

How to fix mis-aligned characters in Linux/osx Firefox when using Helvetica

I have found a scenario whereby the 'a' character becomes mis-aligned vertically when using the Helvetica font-face.

This is only an issue in Firefox on Linux/Unix (Probably OSX too). All other browsers/os's that I could test in, display the text correctly.

In the following image, you can see the 'a' character lower than the other characters for Firefox.

Preview of mis-aligned characters

I have a fiddle demonstrating the problem: https://jsfiddle.net/ob382a1p/

HTML:

<h1>Mailing ia la</h1>

CSS:

h1 {
    font-family: 'Helvetica';
    font-size: 40px;
    font-weight: normal;
}

What is causing the issue and how do I fix it?

Solution

  • Never use Helvetica in CSS if you want to have Linux users.

    On Windows and OSX Helvetica maps to modern font files (under proprietary licensing, so they are banned from Linux systems unless you buy them separately and install them yourself. No one bothers.)

    On Linux Helvetica maps to very old font files which are only kept around because Helvetica is one of the original built-in Postscript font, so its presence is required to print some documents (print ie render on a 300dpi+ medium, rendering on a 96dpi screen is something else entirely those fonts were never designed for).

    Also the encoding coverage expected from Postscript fonts is quite small, if you force a Linux system to render modern non ASCII-only text using Helvetica it will have to take the missing glyphs from some over font, and those glyphs won't match perfectly the proportions and placement of the rest of the text.

    Linux systems have many nice modern fonts with large coverage, Helvetica is just not part of them.