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

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

%指定を採用している理由の1つは、font-size、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は、主に、「ボディテキスト用:標準」「キャプション用:狭い」「リード用:広い」の3種類をベースにサイトごとに必要となるものを設計します。

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%;

sponsors

top of page

©2018 coliss