🆎

Webフォントおすすめ4選

2023/01/31に公開

Web開発をしていると、サイトやサービス全体の見た目を統一したくなります[1]。そういったときにWebフォントを使用される方は多いと思いますが、多々ある書体からどれを選べばいいかわからなくなった経験はありませんか?
この記事では、迷える子羊および未来の私のため、適用するだけでいい感じになるフォントを紹介していきます。

紹介基準

  1. 汎用性を重視し、ゴシック(サンセリフ)体のみを紹介します。
  2. ライセンス、導入コストといった理由から、Google Fontsに登録されているフォントのみを紹介します。
  3. ウェイトが多いフォントを優先して紹介する傾向にあります。
  4. 対応グリフ数が多いフォントも贔屓します。

Noto Sans JP

特徴

  • どんなデザインでもなじむ。一般に想像されるWebアプリであれば溶け込むと思われます。
  • あまりにも実績が豊富なため、既視感を抱くかも?
  • ウェイト数は6。

終身名誉迷ったらコレ。

M PLUS 1p

特徴

  • 柔らかい印象を与えます。
  • Noto系ほどメジャーではないため、独自性を高められます。
  • ウェイト数は7。

Noto系以外を選ぶ場合はこのフォントで良い気がします。実際の採用例は『ポケットモンスター スカーレット・バイオレット』公式サイトなど。

IBM Plex Sans JP

特徴

  • 堅実な印象を与えます。
  • IBM Plex Monoなどと合わせれば、テック系の特徴あるデザインにも対応可能!
  • ウェイト数は7。

上記二つには汎用性で劣るが、引き締まったクールなイメージという面において圧倒しています。

Zen Kaku Gothic

特徴

  • クリエイティブな印象を与えます。
  • ひと目見て気づく独特なデザイン。
  • ウェイト数は5。

もともとは商用フォント。採用例はFigmaなど。

まとめ

以上4つのうちどれかを使っていれば、環境ごとに印象が大きく変化するということは避けられるかと思います。
ここでは紹介しませんでしたが、LINE Seed JPといったフォントもあります。FONT PLUSTypeSquareAdobe Fontsなど有料サービスも組み合わせ、ぜひご自身のプロダクトに合うフォントを見つけてください。

著者Twitter

番外編

SANKOU! font

フォント検索サービスです。便利。

脚注
  1. したくなるという体で話を進めます。 ↩︎

Discussion