文字サイズ
先日の記事のつづきです。
前回は、白い背景色のホームページやブログには
真っ黒から少しだけ薄くした
濃い色の文字色が映えて読みやすいですよ、というお話でした。
背景色と文字色の関係は
コントラストの細かい調整なので慣れが必要ですが、
もっと重要な読みやすさの要素に
「文字サイズ」と「行間設定」があります。
近頃はホームページやブログを見る側のパソコンが
多種多様になっていて、
画面サイズや解像度もまちまちです。
また、MacやWin7のノートPCのパッド部分には
指でアクションすると拡大したり縮小したりする機能も付いています。
それ以外でも、
今のバージョンのブラウザは
拡大縮小が簡単にできるようになっていますので
小さな文字のホームページがどうしても見づらい場合は
拡大してもらえば良いのですが、
見る側に極力アクションをさせないのも
読みやすさ･見やすさの要素になりますので、
できれば始めから読みやすい大きさで
表示されているに越したことはない。
ちなみに
IntenetExplorerやFireFox、Chromeといったブラウザでは、
「ctrl」キーを押しながら「＋」や「－」キーを押すと
表示サイズが拡大縮小します。
文字のサイズについて
のらんば長崎やその他のレンタルブログサービスでは、
多数のテンプレート(あらかじめ用意されたレイアウトデザイン)の
文字サイズ設定が
12px(１２ピクセル) になっています。
12pxというと、このくらいの大きさになります。
のらんば長崎で作ったブログによく見かける文字サイズだと思います。
改行を頻繁に入れて、
１行ごとの折り返しを短めにしてあげると、
多少読みやすくなりますが、
あまり改行をせずに、１行を長くしてしまうと、行が詰まっていて読みづらい印象を与えます。パソコンの画面上の文字を横に追うのは実は人間にとって疲れる行為であることに加え、１行に入っている文字の数が多いため、全体の量を多く感じてしまうためでしょう。これで文字色がより濃い真っ黒だとよりいっそう詰まって感じることになります。
このように12pxという文字サイズは
微妙な大きさであるにもかかわらず
デザイン上のバランスに因るところが大きいため
大多数のテンプレートで利用されています。
この欄内は文字サイズ16pxです。
私自身、よりわかりやすく書きたいサイトでは、
16pxにしているところもありますが、
このブログは間を取って
文字サイズを14pxに設定しています。
行送り幅、行間について
文字サイズと連動して大切なのが
行間の隙間、行送りの間隔の設定です。
印刷物では、行送り間隔が125%程度が読みやすいといわれますが
Webページ上のテキストの場合、
170%前後(許容値140～190%)の行送りが
読みやすいといわれています。
つまり、文字サイズの７割の行間を空けるとよいということです。
さきほど、文字サイズ14pxくらいが
読みやすいと書きましたので、
7割というと、行間は10px程度ということになるでしょうか。
このブログの行送りは、
145%とっていますので、
行間は、おおよそ6pxくらいあいていることになります。
文字サイズは、ピクセル(px)で固定値にする他にも
em単位やsmall･medium･largeといった
相対値にする設定方法もあります。
実は、文字サイズを12pxから14pxにするという
このほんのわずかな修正だけで
ぐんと読みやすくなるのですが、いかがでしょうか。
さて、次回はいよいよ
具体的にテンプレートの該当箇所を修正して
文字色や文字サイズ、行送り幅の設定をしてみましょう。
＞＞次の記事 「スタイルシートのお話」
関連記事