情報の多くを「文字」で伝えるウェブページですが、「文字」読みやすいですか？「ページ」見やすいですか？
この記事はフォントとフォントに関する装飾で工夫できる点を中心にまとめました。
1.フォントはどんなのがいい？利点は？方法は？
フォントは「UDフォント」というものが読みやすく、読み間違えにくいと言われています。
逆に、明朝体や飾り文字は読みにくいと感じる人が多いです。
UDフォントとは
UDフォントは元々文字が読みにくいということが理由で開発されたフォントです。
そのため、「読みやすい」が追求された文字で、高齢者や弱視、読字障がいの人にも比較的読みやすいよう設計されています。
フォントを導入するのは金銭的に厳しい・・・
UDフォントを持っていればいいですが、持っていない場合だと、どこからか入手する必要がありますが・・・
フォントすべてに共通することですが、購入するとなるとやはり少々値が張ります。仕事としてならまだしも趣味でやっている場合はハードルは高いでしょう。
そこで、UDフォントには多少劣りますがゴシック体、特に字がつぶれない、線が細すぎないものを使うと読みやすさが上がります。
CSSでの指定方法の例
クライアントのパソコンに指定したフォントがない場合も考えて、 sans-serif などの一般フォント名でも指定しておいたほうが安心です。
body{
font-family:"ヒラギノ 角ゴ","メイリオ",sans-serif;
}
2.半角カナはなるべく使わない
半角カナは1バイトですらデータ量を削りたかった時代のもの、現在では使っても特によいことはありません。
(半角カナが好きな人ごめんなさい...)
(想像はつくと思いますが)半角カナは特別、設定していなければ文字を押し込んだようなとても見にくくなってしまいます。
何か理由があるならまだしも、「ウェブページのカタカナは全部半角カナ」とか、半角カナを多用するのはあまりよろしくないかな...と。
3.あくまで「分かりやすくするため」の装飾
HTMLやCSSはあくまで分かりやすく伝えるためのものです。
下の画像のようなことをすると、せっかくの文章がボケてしまいます。
また、背景と文字が同化する、背景のコントラストが大きいなども見にくい原因になります。
現在は非推奨の「blink」も見えにくかったり、てんかんを持つ人の発作原因になったりもします。
一番伝えたいところは多めに装飾、あとは少し控えめに・・・なんてやるよりも、スマートフォンなどであるような「リードモード」など、装飾を最低限にしたほうが意外と見やすかったりすると思います。
4.見やすい装飾
- 文字の大きさ => やや大きめ
- 文字の間隔 => フォントによっても変わるので注意
- 行間の高さ => 規定~2倍くらいまでがちょうどよさそう
この3つを意識すると読みやすいようになると思います。
また、人が文章を読むとき、一行当たり38文字が限界ということ(らしい)です。
※具体的なCSSソースは最後に掲載します。
5.個人的によく使うCSS設定
個人的には下のようなCSSをよく？使います。
body{
font-size:1.3em;
line-height:2em;
font-family:"ヒラギノ 角ゴ","メイリオ",sans-serif;
color:#000;
background:#fff5a8; /* クリーム色なかんじ */
}
【まとめ】美しい = 読みやすい
ここまでまとめめてみて思ったのですが、「美しい」、「すっきりしてる」と思えるようなフォント、装飾だと誰にでも見やすいデザインなのかなーなんて思いました。
このごろ、高齢者や障がいを持つ人にも使いやすい、すなわち「ユニバーサルデザイン」が広まりつつある社会。
インターネットでもそのようなクライアントが増えてきている今、「誰にでも」が広まっていけばなと思います。
この記事が開発の参考になれば幸いです。ここまで読んでいただきありがとうございました。