見出しのデザイン
Posted on October 7th, 2008
サイトを構築する上で文字のデザインが気になります、欧文フォントだとデザインも豊富で、多くのエンドユーザーがインストールしているフォントを CSSのフォントファミリーで指定すれば文字データだけでも、そこそこのサイトデザインが出来上がります。
日本語だとそうも行かずに、サイトタイトルなどは画像として配置したり、CSSで置換させたりして、デザインされた文字をそのまま CSSのフォントファミリーに指定するのはリスクが多すぎます。
サイト名などは企業のロゴが使われる場合などもあるので、画像として配置するのに抵抗はありません。
ブログのサイドバーに並ぶ見出し要素などは奇抜なデザインの文字を画像にし CSSで置換させることでサイトのデザイン的特徴を出そうとしていました。
CSSで画像置換をしている場合に閲覧出来ないユーザーは CSSをオンにして画像表示をオフにしている人で、はたしてどれくらいの人が対象になるのか？、また音声ブラウザなどへの影響は？など詳細は不明ですが使用したい機能です。
WordPressのプラグインで記事内の文字情報を指定したフォントで書き出した画像に置換えてくれるものがあります、またテンプレートで上記の動作を指定する事ができるプラグインも存在します。こうなると記事タイトルなどは気に入った手書き風文字に変更する事も出来ます、と夢は広がるのですが見出しに画像を配置し画像の alt属性だけで見出しを定義するのも SEO的にリスクを感じます。
結局 Sans-Serifと serifを使い分ける事で多少見出しが目立つようにしました、そしてフォントファミリーの設定をあれこれ迷ってあげく最近は下記のようにシンプルなものになりました。
body {
font-family: Verdana,Arial,Sans-Serif;
}
h1 {
font-family: Georgia,"Times New Roman",Times,serif;
}
