Webデザインの勉強を始めたばかりの人や、制作現場に就いたばかりの人からは、大量にあるフォントの中から「何を選べば良いのかいまいちよくわからない」という声を聞きます。

しかし、文字の割合が多いWebサイトでは、可読性や視認性の高さがフォント選びでは大変重要です。そのため、使われるフォントは実は定番化されているのです。

この記事では、Webデザインの現場で実際によく使用されている、読みやすい定番フォントと、その入手方法や特徴を紹介します。

ゴシック体フォント

線の太さがほぼ均一で、遠くからでもよく見えて目立つため、紙媒体では印刷物のタイトルや看板によく使用されてます。長文となると、紙媒体では可読性が下がり不向きです。

一方、Webデザインでは、タイトルや見出しだけでなく、本文までゴシック体が多く使われます。理由は、画面（ディスプレイ）上で文字が潰れにくく鮮明に表示できるため、可読性や視認性が非常に高いからです。
ただし、ゴシック体は、親しみやすさやカジュアルな印象を与えるため、高級感やフォーマルな印象を出したい時には、不向きとなる場合があるので注意しましょう。

ヒラギノ角ゴ

游ゴシック

Mac	標準搭載
Windows	標準搭載

メイリオ

Mac	フォント販売サイトで購入 https://www.fonts.com/ja/font/microsoft-corporation/meiryo
Windows	標準搭載

源ノ角ゴシック（Noto Sans）

Mac	Google Fonts https://fonts.google.com/noto/specimen/Noto+Sans+JP
Windows	Google Fonts https://fonts.google.com/noto/specimen/Noto+Sans+JP

明朝体フォント

縦線よりも横線が細く、長い文章を疲れずに読むことができるため、新聞や小説などに適しています。この細さがあることで読みやすくなっているため、太さを出すと可読性が下がりますので気をつけましょう。

Webでは、解像度によって画面（ディスプレイ）上で細い横線がかすれてしまうため、視認性が下がってしまう場合があります。そのため、Webでは長文の場合でも、ゴシック体を使用する傾向が高いですね。
明朝体をWebで使用する時は、高級感や上品なデザインをする時に使用しています。

ヒラギノ明朝

Mac	標準搭載
Windows	MORISAWA PASSPORTを契約（年額 54,780円） https://www.morisawa.co.jp/products/fonts/passport/ Amazonで購入（OpenType ヒラギノ基本6書体セット36,850円～） https://www.amazon.co.jp/SCREEN-GP-OpenType-%E3%83%92%E3%83%A9%E3%82%AE%E3%83%8E%E5%9F%BA%E6%9C%AC6%E6%9B%B8%E4%BD%93%E3%82%BB%E3%83%83%E3%83%88-%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89/dp/B01BBTCQH8

游明朝

Mac	標準搭載
Windows	標準搭載

源ノ明朝（Noto Serif）

Mac	Google Fonts https://fonts.google.com/noto/specimen/Noto+Sans+JP
Windows	Google Fonts https://fonts.google.com/noto/specimen/Noto+Sans+JP

サンセリフ体

線の太さがほぼ均一で、画面（ディスプレイ）上で文字が潰れにくく鮮明に表示できるため、Webでの可読性が高くよく使用されています。日本語でいうゴシック体に値しますね。

ただゴシック体とは異なり、サンセリフ体の持つ力強さや真面目な雰囲気は、フォーマルな印象や高級感を出したい時にも、比較的使用することができます。

Helvetica（ヘルベチカ）

Mac	標準搭載
Windows	フォント販売サイトで購入 https://designpocket.jp/static/font/helvetica/default.aspx

Arial（アライアル、アリアル、エリアル等）

Mac	標準搭載
Windows	標準搭載

Verdana（ヴァーダナ）

Mac	標準搭載
Windows	標準搭載

セリフ体

縦線よりも横線が細く、長文が読みやすいため新聞や文献などで使用されてます。太字にすると可読性が落ちるため気を付けましょう。

明朝体と同じく、Webでは、解像度によって画面（ディスプレイ）上で細い横線がかすれて見えてしまうため、長文の場合でもサンセリフ体を使用する傾向が高めですね。
セリフ体は、よりクラシカルな印象や格調高いイメージを出したい時などに使います。

Times New Roman （タイムズ・ニュー・ローマン）

Mac	標準搭載
Windows	標準搭載

Georgia（ジョージア）

Mac	標準搭載
Windows	標準搭載

Cambria（カンブリア）

Mac	フォント販売サイトで購入 https://www.fonts.com/ja/font/microsoft-corporation/cambria
Windows	標準搭載

ユニバーサルデザイン(UD)フォントについて紹介

近年さまざまな分野で広がっている、ユニバーサルデザイン(UD)フォントについても少しご紹介します。

ユニバーサルデザインとは、年齢、性別、国籍、能力、身体の状況に関わらず全ての人が利用できることを考えてデザインをしようとする考え方です。
このユニバーサルデザインに基づき開発されているフォントを、ユニバーサルデザイン(UD)フォントと呼びます。

まだ無料で使えるものは少なく、ほぼ有料のWebフォントですが、誰にとっても読みやすいことはもちろん、遠くからも見えやすいことから、道路の標識や看板などに使われています。
また、小さい文字でも読みやすいため、教科書や辞典、役所のホームページなど、さまざまな媒体で使われています。

今後、文字量の多いページやより読みやすさを重視するページをデザインする時は、導入を検討する機会があるかもしれませんね。

まとめ

Webでは、どんな媒体から見ても読みやすいこと、デザインが崩れないことが重要です。
そのため、MacでもWindowsでも使える定番フォントは、最初にWebデザインを考える上では欠かせません。また、個性的なフォントを探したり、膨大な種類の中からどのフォントを使うか迷って探す必要はあまり無いのです。