こんにちは。にゃんこ師匠です。

最近は老眼が進んで、文字が見にくい、見にくい。ということで、今回はオジさん視点から見たフォントサイズの適正について検証してみました。

デフォルト14px 小さくはないんだけど読みにくい

まず、多くの銀行はアクセシビリティ用の文字のサイズ変更機能を導入しています。そのためか、デフォルトは62.5%。62.5%はほとんどのブラウザで10pxを意味します。

本文のサイズは引き上げられていて、87.5%あるいは1.4emなどと指定されています。これは14pxに相当します。
例えば幾つかの主要銀行の例はー

A銀行:14px
B銀行:14px
C銀行:16px
D銀行:指定なし(16px)

つまり14pxか16px。16pxの方が読みやすいと感じましたし、文字サイズを調整する必要性も感じませんでした。

ただ、14pxでもB銀行はとても読みやすく、違和感を感じなかったのです。これはなぜでしょう?

その謎を解き明かす前にまずは、基本のフォントサイズについて。

文字サイズの調節機能は気づかないと意味がない

上記の銀行は基本サイズを%(パーセント)表記しているので、「デフォルトのサイズ」×「%」が表示されています。

デフォルトのサイズは大半がbodyは10pxで、本文は14pxです。文字サイズ変更を前提としているため、小を1.4em 中を1.5em(15px) 大を1.6em(16px)としているようです。

しかし、そのために基本サイズが小さくて読みにくくなり、加えてフォントサイズを変更する「文字の大きさ」変更ボタンに気づかなかったため、読みにくいサイトという印象が残る銀行がありました。

そもそも「文字サイズを大きくして、読み続けたい」というニーズは第一印象で決まるので、サイト自体が、「読みにくい」「判りにくい」と感じてしまったら、そこで試合終了なのです。

「ボタンを押せば大きくできるよ」って言い訳は、滞在時間1秒未満を争うWebの世界ではあまり意味ないですよね。

という事で、文字のサイズ変更ボタンに依存せずに読みやすい16px(1.0em,100%,12pt)がオススメです。

文字サイズが同じ14pxでも差がつく理由

「14pxでもB銀行はとても読みやすく、違和感を感じなかったのです。これはなぜでしょう?」の答えです。

フォントの指定に決定的な違いがありました。言葉で説明するより以下のキャプチャを見ていただいた方が良いと思うのでー

● 14px font-family:”MS PGothic”,Verdana,Helvetica,sans-serif;

スクリーンショット 2015-08-20 10.19.24

● 14px font-family: “ヒラギノ角ゴ Pro W3”, “MS Pゴシック”, “メイリオ”, sans-serif;

スクリーンショット 2015-08-20 10.19.44

font-familyの指定の違いです。個人の印象は違うかもしれませんが、私は “ヒラギノ角ゴ Pro W3”, “MS Pゴシック”, “メイリオ”, sans-serif; が、どの端末で見てもすっきりして読みやすかったです。

ちなみに当サイトは試行錯誤をした結果、フォントファミリーは”Meiryo UI”,”ヒラギノ角ゴ Pro W3″,”Hiragino Kaku Gothic Pro”,”メイリオ”,Verdana,”MS Pゴシック”,sans-serif;としています。

フォントはデザインとコンバージョンに大きな影響を与えます。とことん「こだわって」いくべきだと思います。