【見やすいサイト】フォントの大きさは 18 px 以上

はじめに

サイトを見やすくするためには、どうしたら良いだろうか？

このサイトは開設から約５ヶ月がたち、少しずつカスタマイズしている。

サイトの印象は、フォントで大きく変わってくる。今回は、見やすいフォントについて考えてみた。

文字の大きさ

少し大きめの 18 px

文字の大きさは、スマホ や PC を含めて、全ての端末でデフォルトが 16 px に設定されている。

書き手の場合、デフォルトだとスマホで見ると文字が小さく感じたので、少し大きめの 18 px に設定した。

画面の大きい タブレット や PC では大きい方が読みやすいので、もう少し大きく表示するようにしている。

1rem を入れる

フォントのデフォルトの大きさは 16 px になっているが、ユーザーによっては読みやすくするために、フォントの大きさを変更している場合がある。

およそ 3% のユーザーが、デフォルトのフォントサイズを変更している。

Webサイトのフォントの大きさを 18px のように絶対値で指定すると、このユーザー設定を上書きしてしまうので、サイズを指定するときは 1rem（ユーザー指定のフォントサイズ） を入れるのが好ましい。

そこで、このサイトでは次のように設定している。

font-size: calc(1rem + 1px + 0.25vw);

これで 幅 400 px のスマホで 18 pxになり、さらに画面幅に応じて拡大される。

フォントの種類

このサイトで指定した font-family は、ページの最後に掲載 している。

ここからは、デバイスによって表示されるフォントの種類を紹介する。

iOS

iOS はデフォルトのフォントがきれいなので、あまり悩むことがない。

Apple 創業者の スティーブ・ジョブス が、退学した大学 の カリグラフィ の講義に潜り込んで、フォントのインスピエーションを得た のは有名なエピソードで、Mac は発売以来、最先端の美しいフォントを搭載している。

欧文：San Francisco

• 登場年：2014年
• 開発元：Apple Inc.
• 普及：2014年に Apple Watch 向けに登場、2015年 に macOS と iOS 向けに拡張

San Francisco はオーソドックスなフォントで、欧文フォントでは一番読みやすい。

macOS・iPhone・iPad など全ての Apple デバイスで使われていて、それぞれの端末に対して細かくカスタマイズされている。

和文：ヒラギノ角ゴシック

• 登場年：1993年
• 開発元：ダイナコムウェア（DynaComware）
• 普及：2010年 に Mac OS Ⅹ に搭載、その後も継続的に改良

ヒラギノ角ゴシックは、2010年 の Mac OS Ⅹ から採用されていて、現在は Apple デバイスの標準の日本語フォントになっている。

欧文フォントの San Francisco との調和も考慮されていて、文字の大きさなどが最適に調整されている。

Windows

Windiws は iOS と違ってフォント選びが難しい。欧文も和文も特徴の違うフォントがあり、それぞれに一長一短がある。

欧文フォント

欧文には、定番のフォントが２種類ある。

Sugoe UI

• 登場年：2004年
• 開発元：Microsoft
• 普及：2004年に Windows Vista に搭載

Sugoe UI は Microsoft が開発したフォントで、Windows Vista から標準搭載されている。次の Arial と比べると全体的に細く洗練されたデザインになっている。

大きな文字だと読みやすいけれども、デザイン性とトレードオフで、小さな文字だと視認性が悪くなる。

Arial

• 登場年：1982年
• 開発元：モノタイプ社
• 普及：1992年 に Windows 3.1 に標準搭載されたことで急速に普及

Arial は世界で最も広く使われている 欧文フォントで、iOS の San Francisco と同じ系統になる。

シンプルで読みやすく、アルファベットの個々の文字が判読しやすい。

このサイトでは 本文はデザイン性の高い Sugoe UI、アルファベットが続く <code> では Arial を指定した。

日本語フォント

Windows の日本語フォントはさらに難しい。まずは、代表的な３つのゴシックフォントを比較してみる、

書き手の印象は、

• BIZ UD ゴシック：大きい、くっきり
• 游ゴシック：細い、小さい
• メイリオ：大きい、独特

になる。

BIZ UD ゴシック

• 登場年：2015年
• 開発元：モリサワ
• 普及：2018年に Windows 10 のアップデート で配信

BIZ UD ゴシック は Windows10 に 2018年 の アップデートで配信されて、今はほとんどの Windows 端末で見ることができる。

BIZ は ビジネス用途、UD は ユニバーサルデザインの略で、視認性が良くて小さな文字でも読みやすい。

欠点は、視認性を優先しているので同じサイズの欧文フォントより大きく見える。また主張が強いので、長文になると読み疲れする。

游ゴシック

• 登場年：2008年
• 開発元：字游工房
• 普及：2013年に Windows 8.1 に標準搭載

游ゴシック は、2013年に Windows 8.1 に標準搭載されて、以降の Window 10、Windows 11 でも標準のシステムフォントになっている。

先の BIZ UD ゴシック と比べると、細く洗練されたデザインで、文字が明らかに小さい。

大きなモニターで見ると、整っていて読みやすい。その反面、デフォルトの 16 px だと文字が細くかすれて見える。また、ダークモードを利用するとさらに細く見えてしまう。

游ゴシックを使うときは、フォントを大きめに指定する必要がある。

メイリオ

• 登場年：2006年
• 開発元：株式会社イワタ
• 普及：2006年から Windows Vista に標準搭載

メイリオは 2007年 の Windows Vista のリリースに合わせて登場した。Windows Vista は過去の Windows と比べてデザイン面が一新されていて、その中でも、フォントの刷新が大きなウェイトを占めている。

メイリオは、縦と比べて横が細い特徴的なデザインをしている。フォントの上下幅を欧文フォントに合わせて抑えているので、欧文フォントと並んでも違和感が少ない。その分、存在感を出すため横幅が広く取られている。

独特なデザインにも関わらず、不思議と読みやすい。小さくても視認性が高く、大きくても疲れにくい不思議なフォントになっている。

欠点は、太字にすると美しくない。

このサイトの設定

このサイトでは、見出しと太字には視認性の良い BIZ UD ゴシック、本文は Windows ユーザーの端末のデフォルトのフォントを表示する設定にした。

デフォルトのフォントは通常は游ゴシック、一部の端末ではメイリオが表示される。

Android

Android はメーカーも機種も幅広い。Android端末に対しては、フォントの指定ができないので、端末のデフォルトのフォントが表示される。

Noto Sans

• 登場年：2012年、2014年に日本語が追加
• 開発元：Google
• 普及：Android 6.0 （Marshmallow）から標準搭載

Noto Sans は 2012年 に誕生したフォントで、多くの Android端末 に搭載されている。

Noto フォントは世界中の言語に対応したユニバーサルなフォントで、「No more tofu（これ以上豆腐はない）」という、特定の言語の文字が表示されないときに出る四角い「豆腐」マークを排除することをスローガンに掲げている。

次に紹介する Roboto と比べると、全体的に丸みのあるデザインになっていて、2021年 に デジタル庁 ができたときの ロゴ にも使われて話題になった、

Roboto

• 登場年：2011年
• 開発元：Google
• 普及：Android 4.0 （Ice Cream Sandwich）から標準搭載

Roboto は 2011年 に Android 4.0 の登場に合わせてリリースされ、Android 端末の標準フォントとして広く普及している。

小さい端末でも見やすいように、視認性を最優先に デザイン されている。ただしそのぶん主張が強く、長文になると読み疲れしやすいと感じる。

フォントの指定

このサイトの font-family は次にように指定している。

見出し と 太字

-apple-system, BlinkMacSystemFont,"Helvetica Neue", "Segoe UI", "Hiragino Sans", "BIZ UDGothic", system-ui, sans-serif

本文

-apple-system, BlinkMacSystemFont,"Helvetica Neue", "Segoe UI", "Hiragino Sans", system-ui, sans-serif

コード

-apple-system, BlinkMacSystemFont,"Helvetica Neue", "Arial", "Hiragino Sans", "BIZ UDGothic", system-ui, sans-serif

フォントは、左から優先でそのデバイスにインストールされているものが表示される。

おまけ：無料の Webフォント

記事の中で紹介したフォントのうち、BIZ UD ゴシック・Noto Sans JP・Roboto の３つは Google Fontsで公開されていて、無料で利用することができる。

試しにここで３種類のフォントを表示してみる。

一番上のBIZ UD ゴシックを見ると、やはり欧文フォントは日本語フォントとは別に指定したほうが読みやすいと思う。

まとめ

このサイトのフォントについて紹介した。

フォントの好みは人によって違うので最適解は無いけれども、今の設定にして前よりかなり見やすくなったと感じている。

次回は、見やすいグラフを考える。