WEB業界で働く人や興味がある人に役立つ情報サイト“qam(カム)”

JQ

2024/08/19

【2024夏】使い勝手が良いオススメWebフォント5選

投稿者: JQ
カテゴリー: デザイン >フォント

最近は、閲覧者の端末にフォントがインストールされていなくても表示が可能な「Webフォント」を利用したサイトが非常に多くなってきました。

今回は、そんな凝った見出しにも使用でき、テキストなので文字変更も簡単な「オススメWebフォント」を5つご紹介したいと思います。

Dela Gothic One

Dela Gothic One
https://fonts.google.com/specimen/Dela+Gothic+One

こちらの「Dela Gothic One」は太めの力強いゴシック体で、高さが少し潰されて扁平な印象を受けるフォントです。

ゴシック体ではありますが、文字の形がカチッとしすぎていないため、サイトのメインビジュアルに大きめの文字でキャッチコピーを入れるなどにも最適です。

こちらのフォントは、ウェイトがこの1種類のみですが、もともと本文フォントとしては読みづらいと思うので、見出しなど使い所がはっきりしており、オススメのフォントの一つです。

Reggae One

Reggae One
https://fonts.google.com/specimen/Reggae+One

こちらの「Reggae One」は見ての通り、トゲトゲしい形が特徴のフォントです。

使い所としては、やはりこちらも本文フォントとして使用するには読みづらいと思うので、勢いのある内容の見出しなどに使用するのがオススメです。

少しWebフォントという意味では話が逸れますが、このフォントはよくYouTubeの動画のツッコミテロップや怒りテロップに度々登場します。
テロップのように一瞬しか表示されないような文字でも、このフォントであれば非常に印象が強く残るので、多用されているのもうなずけます。

Zen Maru Gothic

Zen Maru Gothic
https://fonts.google.com/specimen/Zen+Maru+Gothic

こちらの「Zen Maru Gothic」は先ほどまでの2書体とは異なり、丸ゴシック系のフォントになります。

ウェイトもLight 300からBlack 900まであり、細いウェイトを使用すればオシャレに見せることが出来ますし、下記のように太めのウェイトを使えば、丸っこくかわいらしい感じを表現することが出来ます。

Zen Maru Gothic

Shippori Antique B1

Shippori Antique B1
https://fonts.google.com/specimen/Shippori+Antique+B1

こちらの「Shippori Antique B1」というフォントは、他のフォントにはない、「ある特徴」があります。上のサンプル文字を見て気づきますでしょうか?

実はこのフォント、漢字はゴシック体、それ以外の文字種は明朝体というかなり珍しいフォントになります。

これを聞いてピンとくる方もいらっしゃるかもしれません。
そう。このルールは漫画の吹き出しの中のセリフ表記に見られるルールなんです。

そのため、漫画に関するWebページに使用したりすると相性が抜群だと思いますので、ぜひ試してみてください。

DotGothic16

DotGothic16
https://fonts.google.com/specimen/DotGothic16

最後の5つ目としてご紹介するのが「DotGothic16」という昔のゲーム画面に出てくる文字のようなフォントです。文字がすべて16×16のドットで表現されています。

ゲームを取り扱っているようなサイトではもちろん相性がいいと思いますし、ゲーム関係でなくても色味をちょっと操作してあげるだけで、サイバーチックなサイトの印象になります。

ただ難点としては、16×16のドットで表現されているため、文字サイズを小さくしてしまうと潰れてしまって文字が判別不可能になりやすいので、ある程度の文字サイズで使用して上げる必要があります。

まとめ

いかがだったでしょうか。今回ご紹介したWebフォントはすべてGoogleフォントの中に含まれていますので、簡単に使用することが出来ます。

気になったフォントがあれば、ぜひ一度試してみてください。

コーディング業務のご依頼、ご相談の詳細についてはこちらから

最後までお読みいただき、ありがとうございました。

よろしければシェアしていただければ幸いです。

  • このエントリーをはてなブックマークに追加

関連記事

よろしければこちらの記事もお読みください。

WEB業界ならqam!qam(カム)はWEB業界で働く人や興味がある人に役立つ情報サイトです。
マーケティングやデザイン、マークアップ(コーディング)、プログラム、トレンドなどの情報をqamライター陣が執筆。噛めば噛むほど(読めば読むほど)制作・開発や運営・運用、業界知識やノウハウを学ぶことができます。

トップへ