スタイルシートによる文字装飾

Web標準に準拠したWebデザインは、 XHTMLで正しく構造化された文書を作成し、装飾(視覚表現)の部分をスタイルシートによって定義します。現在、文書型がXHTML1.0 Transitionalであれば許されている要素であったとしても、今後登場するHTML5の登場によって使用できない要素になるものも多いです。そのため、現状文書型をXHTML1.0 Transitionalで制作していたとしても、今のうちから非推奨要素である要素は極力利用しない方向にシフトしたほうがよいです(たとえば、くfont>やくbasefont>など)。

特に、文字まわりの装飾に関しては、スタイルシートを使った指定のほうが従来のfont要素より柔軟で表現力も増します。書体の指定(font-familyやfont-size)はもちろん、字間(letter-spacing)や行高(line-height)など、さまざまなテキスト関連のプロパティを組み合わせることで、デフォルトの状態と比べて格段に読みやすい文字組みが実現できるようになります。指定された標準フォントサイズの87.5%の大きさ(この場合は14px相当)を基準にして各要素が相対的なサイズで表示されます。 cssでの指定は単一の指示だけでなく、他の装飾指示もあわせて指定可能です。

次に、行と行の聞の間隔(行間、プロパティ名から考えると行高)を確認します。当然、何も指定しないデフォルトの状態ではブラウザのもつ初期値に依存しますので、line-heightプロパティを用いれば、この間隔を細かく調整することができます。文字量の多いコンテンツの読みやすさを考えた場合、フォントサイズにも依存するものの、line-heightプロパティには「140-150%(1.4-1.5または1.4em1.5em)前後」の値を指定するのが最適だと考えられます。テキストを読ませることが主体のコンテンツでは、ユーザー側で書体のサイズが拡大・縮小できる相対単位を用いてフォントサイズを指定し、行高も適度に調整するとよいです。