フォントの色と大きさと背景色の微妙な関係
December 26, 2006 10:00 AM written by 8maki
12月1日からクリスマスまで、日替わりでウェブ制作のちょっとしたTipsを紹介する「24 ways」が今年も開設されているようです。
その24 waysから一つご紹介。
フォントの色と大きさと背景色についてのTipsです。
わかりやすく例を出していきましょう。
架空の会社のロゴを例にしてご説明します。まず、大きいフォントで「Double Dagger」という社名があり、その下に小さいテキストが入っています。よくあるデザインですよね。さて、このデザインについて見ていきましょう。
■ 薄い背景に明るいフォントの場合
さて、下に2つのロゴがあります。
左のロゴは色の統一感のルールに従って社名とテキストを同じ色にしています。しかし、テキストの色が薄すぎるように思えませんか？
そこで右のロゴをご覧ください。社名とテキストの色が同じように見えると思います。しかし、実際にはここでテキストの色は社名より濃いものを使っています。
↑ 左は両方「#6699CC」。右は社名に「#6699CC」とテキストに少し濃い「#4477BB」を使っています。
このように背景が薄い色でフォントが薄い色の場合は、小さいフォントは濃い色にする必要があります。
■ 薄い背景と濃いフォントの場合
次に濃いフォントの場合はどうでしょう。下記の左のロゴのテキストの色は社名と比べて濃すぎるように思いませんか？
そこで右のロゴのテキストは社名よりも薄い色を使ってみました。社名と同じ色のように見えないでしょうか。
↑ 左が「#330000」。右は社名に「#330000」とテキストにそれより薄い「#550000」を使っています。
このようにフォントが濃い場合は、上記の薄い場合と反対に小さいフォントに薄い色を使う必要があります。
■ 濃い背景の場合
さて、今まで薄い背景の場合を見ました。では濃い背景の場合はどうでしょう。
下記のフォントは「薄い背景に明るいフォントの場合」で使ったものと同じものの背景を濃くしたものです。
ご覧の通り、上記では右のロゴの方が統一感がありましたが、今回の右のロゴはテキストの色が濃すぎるようです。
↑ 左の方が社名とテキストの色が同じように見えます。
ここからわかるように濃い背景の場合は、社名とテキストの色を変えない方が良いことがわかりました。
このようにRGB値が同じでも背景やフォントの大きさ、組み合わせる色が異なればその色が持つ印象も変わってきます。ある要素が変わればまた違う色の組み合わせが必要となってくるのです。
» 24 ways: Cheating Color （24 waysでは他にも役立つTipsがたくさんあります。よろしければどうぞ！）
色を決める際はマニュアルを鵜呑みにせず、実際に自分の目と頭で確かめるほうが大切なのかも知れませんね。
Info: デザイン全般 |
固定リンク |
コメント (0) |
トラックバック (0) |
↑
