How does one use Helvetica Neue Pro with CSS @font-face as a readable screen font in Windows and Google Chrome? The kerning is really messed up, Arial looks beautiful in comparison:
Helvetica Neue Pro:
Arial:
I came across Installing Helvetica Neue Fonts with Google Chrome on Windows considered harmful which had a comment saying I should use Neue Haas Grotesk instead, as it's supposedly optimized for screen reading. I bought the font, but it made no difference.
This is a mix of Chrome's (horrible) font rendering and the type hinting of the font. Arial is TrueType, which in comparison to the (now exceedingly popular) OpenType is rendered differently (since the type hints are specified in different formats).
Disclaimer: I'm not a type designer, these suggestions are based on my experiences as a web designer.
You might want to try:
Increasing the font size. At larger font sizes there are more pixels available and the font will be rendered smoother.
Experiment with -webkit-font-smoothing. In particular you might want to try specififying antialised or subpixel-antialiased to see if it helps. Reference MDN. However, note that this is non-standard (not in the W3 spec) so consider this carefully.
Modify the font to suit your needs. If you feel comfortable around fonts, try modifying the hinting to be suit your needs. A simpler alternative might be to convert the fonts to TrueType if you prefer the TrueType rendering.
