[CSS]日本語と英語で異なる最適なフォントサイズの指定方法

日本語・英語のサイト制作に使用しているCSSのフォントサイズの指定で、2007年用デフォルトとしているものです。

%指定を採用している理由の１つは、font-size、line-heightとともに組み合わせにより微妙に異なり、その組み合わせの最適な値を採用するためです。

• 日本語サイトのフォントサイズの指定
• 英語サイトのフォントサイズの指定
• line-heightの指定

日本語サイトのフォントサイズの指定

body{
  font-size:16px;
/**/
  font-size:100%;
/**/
}

上記を基準サイズとして、下記を指定。

標準：

font-size:82%;

大きめ：

font-size:94%;

小さめ：

font-size:69%;

英語サイトのフォントサイズの指定

body{
  font-size:13px;*font-size:small;*font:x-small;
}

上記を基準サイズとして、下記を指定。

標準

font-size:82%;

大きめ

font-size:94%;

小さめ

font-size:69%;

line-heightの指定

line-heightは、主に、「ボディテキスト用：標準」「キャプション用：狭い」「リード用：広い」の３種類をベースにサイトごとに必要となるものを設計します。

line-heightの指定（標準用）

ボディテキスト用：標準

line-height:137%;

キャプション用：狭い

line-height:126%;

リード用：広い

line-height:157%;

line-heightの指定（大きめ用）

ボディテキスト用：標準

line-height:146%;

キャプション用：狭い

line-height:137%;

リード用：広い

line-height:163%;

line-heightの指定（小さめ用）

ボディテキスト用：標準

line-height:138%;

キャプション用：狭い

line-height:126%;

リード用：広い

line-height:162%;