Windowsでもヘルベチカを使いたい

WindowsでもHelveticaを使う方法

よく見かけるあのフォント「Helvetica」。windows10にも似ているフォント「Arial」はあるけれど、ちょっと違う。もっと似ているフォントってないの?と思ったので、詳しく調べてみました。

実は、Helveticaに似ているフォントってあるんです。では、どれくらい似ているか?ヘルベチカを使用した有名企業ロゴ似の画像で比較しながら、解説します。アリだと思ったら参考にしてみてください。

Helvetiaの歴史

Helvetiaの歴史は古く、1957年にスイス人のデザイナーにより考案されました。もともとは「Neue Haas Grotesk」と呼ばれていたこの書体ですが、3年後の1960年にHelveticaとして発表されたのを機に広まりました。

今ではMACの標準フォントとして使われていることもあり、MACユーザーにはとてもなじみ深いものになっています。

Windowsで使うには

Windows10では、有料でフォントを購入する方法以外Helveticaを使用することはできません。それでも、できれば無料で使いたい!、という方にヘルベチカに似たフォントを探してみましたので紹介します。

一つは、ヘルベチカによく似ていると言われる「Arial」という書体、もう一つは「Neue Haas Grotesk」という書体です。

そこで実際にどれくらい似ているか、helveticaを使用した某有名企業ロゴと比較してみましたのでご覧ください。

HelveticaとArialの違い

Arialフォントを使用して、helveticaを使用したロゴに重ねてみた結果

実際にArialフォントを使用して、helveticaを使用したブランドロゴ似に重ねてみました。青がオリジナルロゴ、白い枠線の文字がArialです。

【結果】

「C」の端の切り口がArialは斜めにカットされていたり、「R」にいたっては明らかに形が違うなど、イラストレーターでベジェ曲線の修正をする必要があります。この他にも「G」や「t」などかなり違うものがあり、ちょっと惜しい結果になりました。

これだとヘルベチカというより普通にArialだね
もう少し似てるのないかな?

Neue Haas Groteskとの違い

Neue Haas Groteskを使用してhelveticaを使用した企業ロゴに重ねた画像
Neue Haas Groteskフォントを使用して、helveticaを使用したロゴに重ねてみました。「R」の右脚の内側のカーブが、ヘルベチカの方が少しだけ緩やかです。

先述したように、この「Neue Haas Grotesk」はヘルベチカの元となったフォントだけあって、かなり似ています。Arialで大きく違っていた「R」や「C」もほぼ同じ形をしています。

【結果】

いかがでしょうか?ほぼヘルベチカじゃないですか?。いやもうHelveticaでしょう。この聞きなれない書体の「ニューハースグロテスク」ですが、実はwindows10の標準フォントとして予め用意されているので、無料でインストールすることができるんです。

Neue Haas Groteskのインストール手順 画像解説

Windows設定画面

1.Windowsボタンをクリックし設定画面(歯車マーク)を開いたら、設定の検索に「おぷしょん」と入力し、オプション機能の追加をクリックします

機能追加画面
「機能の追加」が表示されている画面

2.Windowsの設定画面の「設定の検索」にオプションと入力し、オプション機能の追加を選択し、クリックします。

ヨーロッパ各言語追加フォント追加画像

3.「ヨーロッパ各国言語追加フォント」を選択し、インストールをクリックします。

  • 【インストールされたフォント種類】
    • Arial Nova
    • Georgia Pro
    • Gill Sans Nova
    • Neue Haas Grotesk
    • Rockwell Nova
    • Verdana Pro

インストールはこれで完了です。6種類のフォントがインストールされ、ウィンドウズでもほぼhelveticaフォントが使えるようになりました。

【おすすめの記事】
PC
特定ipアドレス除外を説明するページへのリンク画像

Googleアナリティクスで特定のIPアドレスを除外する方法

自分アクセスによる訪問カウントを取得しないための設定をしましょう

PC
画像遅延読み込みの実装方法を解説したページへのリンク画像

画像遅延読み込み-Intersection Observerの実装方法

PageSpeed Insightsスコア改善!Webサイト表示の高速化

PC
画像の最適化手順を説明したページへのリンク画像

画像を軽くする最適化はお済みですが?

画像にはいろいろな情報が入っています。ムダな部分を削除して容量を小さくしましょう。

PC(html/CSS)
ソースコードのハイライト表示のやり方を説明したページへのリンク画像

ソースコードのハイライト表示のやり方

負担が少ない軽量ライブラリを使用して、ハイライト表示する方法をお伝えします。

TOP