WEBサイトのユーザービリティーを改善するフォント関連の基本Tips

ユーザビリティーの大家、Jakob Nielsen氏の最近の記事

Top Ten Web Design Mistakes of 2005 (Jakob Nielsen's Alertbox)　（日本語訳）

に対応する形で、こんなことに気をつければよいんじゃないの？というまとめ記事。記事のページ自体が、かなり見やすいデザインになっていますね。パート1〜3まである内のパート1から。以下抜粋は、かなりオーソドックスですが、以外と守られていないノウハウかも。
記事内で紹介されている、フォントスタイルをプレビューできるTypetesterも便利ですね。日本語版をつくったらよいかも。

WeBreakStuff - Pleasing Jakob Nielsen, Part 1

一行に、英単語で12語ぐらいが丁度よい。（※日本語にだと、何文字になるのか分かりませんが、広すぎず狭すぎずぐらいの幅を心がけましょう、ということかな？）

フォントサイズ、10pxを小さいと感じる人も多い。少なくともプロポーショナルなサイズ指定にして、ユーザーが自分で表示を調整できるように。以下はおすすめのCSS指定。（※英語でのおすすめだと思いますが）

.textblock {
 font-size: 1.2em;
 line-height: 1.5em;
 letter-spacing: 0;
 text-align: left;
 word-spacing: normal;
}

以下のサイトでは、フォントの種類、文字のサイズ、行の高さ、Word Spaceなどを自由に選択して、どのような見え方になるか確認することができる。

Typetester - Compare fonts for the screen

文字の色と背景色を選ぶ時は、ディスプレイによってコントラストが結構違う事を気をつけなければいけない。なるべく見やすい組み合わせを、何度か試しながら決めたほうがよい。

リンクは、リンクの文字と、そうでない文字が明確に区別できる事。 “text-decoration: underlined"を使うより、border-bottomを使う方が、見え方がいいような気がする。Nielsenによれば、「すでに訪れたリンクと、そうでないリンクを色分けすべき」だが、ブログの場合は、コメントへのリンクなど、何度かクリックしてもらいたいものもあるので、すべてをそうする必要は無いのではないだろうか。

a, a:visited {
 color: #637277;
 text-decoration: none;
 border-bottom: 1px dotted #aaa;
}