ChromeのHelveticaフォントがズレる問題と対策

2015年以降にリリースされたChromeではHelveticaフォントの表示が大幅にズレます。

最新のChromeでは既に解決済みの問題です。（Chrome Version 44.0.2403.125 (64-bit) ）

ChromeとSafariでHelveticaフォントのズレを比較

サンプル

Chromeのキャプチャー画像

Chrome上でHelveticaとHelvetica Neueのレンダリング比較した結果

Chrome Version 40.0.2214.111 (64-bit Mac)

HTMLレンダリング・サンプル

Helvetica

Helvetica Neue

Chrome特有の問題

Chrome + Helvetica特有の問題のようです。他のWebKit系ブラウザでは問題ありません。 サイトロゴやナビゲーションのテキストが大幅にズレるので、今後色々なところで問題になるかもしれませんね。LineHeightやBaseLine調整ではどうにもならないバグなので、現状ではフォントを変えるしか手がありません。

Helveticaフォントのズレでロゴタイトルがズレて見える

対策方法

一番手っ取り早い対策として、以下のコードを自身のサイトのCSSの先頭に記述してください。 CSS内に記述されているHelveticaフォントが全てHelvetica Neueに置き換わります※。

@font-face { font-family: 'Helvetica'; src: local('Helvetica Neue'); }
@font-face { font-family: 'Helvetica'; font-weight:bold; src: local('Helvetica Neue'); }

Arialを使うという手もある

今後はArialフォントを使うという手もあります。MacにもWindowsにも標準インストールされているHelvetica風のフォントなので統一感も出ます。

個人的にはHelvetica Neueがオススメ

けれども、やっぱりHelvetica人気は根強いものです。いままで前任のデザイナがHelveticaを意図的に指定していたのなら、迷わずHelvetica Neueで代替しましょう。良い機会だったので、私のサイトではHelveticaを廃止し、今後はHelvetica Neueを使うことにしました。

ちなみにiOSとMacではHelvetica Neueがシステムフォントとして使われています。ウェイト間のバランスが良く、ウェイトのバリエーションも豊富なフォントですので、今後Webの世界でも主流のフォントになるのではないでしょうか。
広告
広告