Webデザインする時のフォントの選び方。おすすめのフォントは?

Webデザイン

Webデザインをする際、フォント選びにはかなり苦戦しますよね。

どういった基準で選ぶべきなのか、このフォントは本当に正解なのか、迷っている方も多いのではないでしょうか。

そこで今回は、Webデザインをする際のフォントの選び方についてまとめました。

HTMLテキストと画像テキストの違い、そして標準フォントのおすすめもご紹介します!

HTMLテキスト、画像テキストの違いとは

Webデザインをするうえで、フォント選びはかなり重要なポイント。

適当に決めてしまうとコーディング時に大きな負荷がかかったり、実装不可能となってしまうこともあるため、テキストの違いやどのように実装されるのかを先に把握しておく必要があります。

それではまず、HTMLテキストと画像テキストの違いについてお伝えします。

画像テキスト

画像テキストは、その名の通りテキストを画像にしたものです。

画像なので好きなフォントを使用できますが、CSSで色や文字間を微調整できません。修正にも時間がかかるところがネックです。

HTMLテキスト

HTMLテキストは、Webサイト上に表示される文字だけのデータを指します。

画像テキスト以外のテキストですね。こちらはCSSで装飾可能ですし、修正も容易です。

また、コンピュータに予めインストールされている「標準フォント(デバイスフォント)」は、閲覧者のデバイスにより異なる表示がされてしまうこともあります。

しかし、「Webフォント」を使用すればWebデザイナーが意図するフォントを表示可能です。

Webフォントに関する詳しい記事は、こちらがおすすめ。

標準フォントでおすすめのフォントは?

伝わるデザインによると、

可読性、視認性、判読性を意識しながらの「TPOに合わせたフォント選び」

が重要とのこと。

おすすめのフォントをご紹介する前に、「可読性」「視認性」「判読性」について詳しく見てみましょう。

可読性とは、正確に速く読み取れるかどうか、読み続けて疲れないか。

視認性とは、目で見た時に対象がどういうものであるかを正しく認識し理解できるかどうか、読みやすいか・見やすいかどうか。

判読性とは、文章などの分かりやすさ、正しく相手に伝わるかどうか。

伝わるWebデザインをするうえでは、この3点とTPOを意識してフォントを選ぶ必要があります。

それでは、コンピュータに予めインストールされている標準フォントの中から、おすすめをいくつかご紹介します。

游明朝体

2002年に発売された字游工房初の独自書体である、游明朝。「時代小説が組めるような明朝体」をキーワードに開発されました。

文字の大きさが揃った漢字が現代的で、読みやすいフォントです。

しかし、Android端末には明朝体フォントがインストールされておらず、ゴシック体で表示されてしまいます。それを避けたいのであれば、明朝体以外の標準フォントを使用しましょう。

游ゴシック体

字游工房から2008年に発売された、游ゴシック体。游明朝体と一緒に使うことを想定して開発されました。

メイリオと比べるとやや細く、上品で読みやすいフォントです。

メイリオ

Windows Vistaの標準フォント向けに開発された、メイリオ。名前の由来は、「明瞭」からきているそう。

その由来の通り画面上でも紙面上でも明瞭で読み取りやすく、視認性と判読性に優れています。

しかし、文字が若干横長で丸みを帯びているため、サイトのテイストによっては合わない場合も。

Arial

欧文用の標準フォント、Arial。

サンセリフ書体で、力強くもすっきりとした印象を与えます。Helveticaの代用書体として開発されたと考えられています。

Helveticaは垂直に設計されていますが、Arialは斜めに設計されているのだそう。

まとめ

フォントの種類によって、Webサイトやコンテンツの印象が変わってしまうこともありますよね。つまりWebデザインを決める上で、フォントの選択はかなり重要となるのです。

フォント選びに迷ったら、「可読性」「視認性」「判読性」「TPO」を意識してみましょう。フォントの起源や名前の由来を読むと選ぶべきフォントを絞れることもあるので、ぜひ調べてみてくださいね!

SHEのWebデザイン講座に興味がある方は、体験レッスンへ!↓

関連記事一覧

ライター育成します