ユーザーにやさしい。 WEBサイトのフォント選び

フォントの役割

見た目の印象が変わるフォントは話す際の口調のようなもの。
ユーザーとどのようにコミュニケーションを取るのか、そのことを踏まえて方向性がぶれないよう、目指すべき方向性に沿うように選びましょう。

書体について

＜ゴシック体＞

線の横と縦の太さがほぼ均等で、ウロコもなく、シンプルに構成されているのがゴシック体と呼ばれる書体です。
ポスター・バナーなどの端的に要点をつまんで表現する、視認性高く見せる場合に向いています。
新聞などの長文では文字量が多く、ユーザーへの負荷が高いため向きませんが、WEBのようなスクリーンで表示する場合は解像度が下がるため、線の太さが均等でしっかりと表現できるゴシック体の方が向いているかもしれません。

＜明朝体＞

線の横と縦の太さに差があり、ウロコがある、複雑に構成されているのが明朝体と呼ばれる書体です。
長い文章を読む場合に線が細いので可読性が上り、負担が減るといわれています。そのため新聞などの紙面で使用されているのだと思います。
ただ、WEBのようなスクリーンで表現する場合は解像度が変わるので、しっかりと可読できる表現にならない場合があります。慎重に検討すると良いでしょう。

フォント選びのポイント

書体が決まったらフォント選び。
様々なフォントがあり選定に迷うかと思いますが、原則 一つに絞りましょう。
むやみに増やしてしまうとWEBサイト全体の統一感を損ねてしまい、バラバラとした印象を与えてしまいます。
基本的には同じフォントで太字や細字、サイズなどを上手に使い分け伝えてあげましょう。
また、どうしてもフォントを増やす場合、同じ提供元のフォントを使用すると、同じような形で違いを表現しているフォントも存在する場合があります。検討してみてはいかがでしょうか。

ユーザーにやさしいフォントとは

読み間違いの少ないフォント（判読性）
文字は書体やフォントにより読み間違いが発生しやすくなります。誤認しづらい、判読しやすいデザインのフォントを選ぶと良いでしょう。
例をあげると、ユニバーサルデザインを意識したUD系のフォントは判読性を考慮し作られています。参考に確認してみてはいかがでしょうか。

幅広く対応したフォント（視認性、可読性）
しっかりと文字を目立たせる、情報を分かりやすく分類するなどの表現を行う場合に、ファミリーの中で太字・細字・イタリックなどの調整ができると、見せ方の幅が広がり、わかりやすく表現できます。
とても有効な手段となるため、対応しているフォントを選びましょう。

美しいフォント（可読性、判読性）
デジタル化されたフォントに「美しい、美しくないがあるのか!? 」と疑問に思う方もいるかもしれませんが、フォントにより特徴が異なり、さまざまです。美しくない文字は読みづらく、読み間違いも発生しやすいです。デジタルで使用するフォントも美しいフォントを選びましょう。

最後に、

私自身も日々勉強の積み重ねです。
少しでも学んだことが参考になればと思います。
最後までお読みいただきありがとうございました。