第15回　書体の形状を指定する効果的な奥の手

Webサイトの主役は文字である。インターフェースの使い勝手が重視されるEコマースサイトであろうと、動画の視聴サイトであろうと、サイトを開設した理由や商品の説明をする際は、必ず言葉が使われているではないか。だからサイトで文字がどう見えるか、もっと言えば言葉がどう伝わっているかは常に深く考えるに越したことはない。今回からはCSSでどこまで文字のレイアウトに工夫を凝らせるかに挑戦してみたい。

クラフトワークの手触り感をテーマに文字を表現する。問題は、リアルなノート用紙を模写できるかどうか。これは配色の妙にかかっている。ポイントは１つ。紙の上に書き込んだ（印刷した）要素は、必ず背景色の影響を受けるという物理現象を忠実に再現することである。

 

 

前回同様、HTMLは見出しと段落を区別した程度の内容になっている。単純な構造なので各ブロックレベル要素にidは付けず、HTMLタグを直接CSS側でセレクタとする方法を使う。

文字ブロックの背景は、青みがかったグラデーションを上付に配置してx方向にリピートさせている。1行の文字数がだいたい30文字程度に収まるような幅を目安とした。

このセレクタは、全体で使用するフォントの指定を含む。使用フォントはGeorgiaとserifの2種類。前述のGeorgiaはMicrosoftが作ったフォントで、Interet Explorer付属のフォントとしても知られる。英文サイトではよく目にするのではないだろうか。このフォントの特徴は数字（記号）がオールドスタイル表記となることである。オールドスタイルの数字は新聞など本文に数字の表記を含むメディアで使われている。モダンな表記の場合、数字などの記号は文字と同程度の一定の高さで表示される。これではメリハリがなく内容が頭に入りにくい。そこで数字とアルファベットをはっきり区別してメリハリ出し、理解しやすい本文を作るために用いられるテクニックが記号のオールドスタイル表記なのだ。

これに加えてserifを指定しておけば、IE以外のブラウザでは日本語でもヒゲ付き文字の明朝を表示してGeorgiaにスタイルを合わせることができる。

 

見出しは強調するため文字色を黒に指定し、行間をフォントサイズのほぼ2倍高に相当する170％に指定して十分な余白を作る。見出しが重たいぶん、少し風通しを良くしてすっきりさせる目的だ。

見出しは強調するため文字色を黒に指定し、行間をフォントサイズのほぼ2倍高に相当する170％に指定して十分な余白を作る。見出しが重たいぶん、少し風通しを良くしてすっきりさせる目的だ。

本文の段落は文字サイズが小さく成りすぎないように注意している。Serif（明朝）はSans-Serif（ゴシック系）に比べてウェイトが少なく見えてしまうので、12ポイントなどの小さいフォントサイズには不向きだ。また、明朝系にある留めの部分の装飾もサイズが小さいと生きてこない。また、ウェイトの細さを想定して、文字色も背景とコントラストの強い色を選んでおいた。サンプルは【図1】だ。余裕も感じさせながら、離れすぎない程度というわけで文字サイズ16ポイントのところ、行間は175％としている。明朝系は行間が狭いとゴシック系より遙かに読みにくくなるので、【図2】のように注意する。

 

 

ページを表示すると、和文フォントと英文フォントを混植した状態になった（firefoxの場合）。英文フォントは和文フォントより一回り小さくみえるので、本当は英文のみ110％程度拡大処理したいところだが、このままでも十分英文、和文、記号のメリハリが利いていて飲み込みやすい文書になっている。ちなみに英文がSerifで和文がゴシック系だと、統一感を欠く見栄えになるうえ、【図3】のように内容が頭に入りにくいテキストになってしまう。

Internet Explorer6では、環境設定に該当する「インターネットオプション」で指定できるWebページ表示用フォントは１つだけである（というわけで、今回紹介したテクニックはIE6にされない）。ここで指定したフォントは、Webページ側で使用フォントを指定していないときに適用される。一方Firefoxの場合、表示用のフォントは(1)未指定の場合(2)Serifの場合(3)Sans-Serifの場合(4)Monospceの場合　の4パターンが選べる。つまりfirefoxではCSSで具体的な書体名を選択せずに書体の種別のみを指定する手段が使えるのだ。書体のスタイルで内容を区別できると何かと便利。デザイナーとしてはぜひIEも他のブラウザと設定を統一していただきたいものである。