Warning: Use of undefined constant singlepost - assumed 'singlepost' (this will throw an Error in a future version of PHP) in /home/xs376808/c-mdc.jp/public_html/wp-content/themes/cmdc/single.php on line 1
CSSによる文字設定 - ホームページ制作・WordPress制作・WordPress導入・ブログ制作 | contrast |

CSSによる文字設定

CSSによって文字設定をされていらっしゃる方は少なくはないかと思います。
そこで文字(フォント)を指定して文字する上で気をつけることを挙げてみます。

一般的に、印刷物の場合は、明朝系の書体のが読みやすいとされています。

その理由にハッキリしたものはありませんが、明朝系書体の「太さの強弱」などが、
視線をうまく導いてくれる、といった理由がよく挙げられます。

しかし、ウェブの場合は解像度の低いディスプレイ環境においては、
その読みやすい特長であるはずの「太さの強弱」が逆に視線流れを妨げる場合があります。

そのためにウェブの場合には繊細な明朝体の特長が、十分に活かしきれないといえます。

ディスプレイで文字を表示する場合には、
MacOSX 環境におけるヒラギノ明朝や 画像としての明朝体 及び Flash 上での表示など、
ディスプレイ上のフォントに綺麗なアンチエイリアスがかかる環境でない限りは、
現状においてはゴシック系の書体を選択しておくほうが無難です。

時々見かけることがあるのですが、CSS でフォント指定をされていらっしゃらなくても、
ブラウザによってはブラウザ毎のデフォルトの指定フォントで表示される場合があります。
IE ではゴシック体で表示されていても、Firefox では明朝体で表示されている場合などもありますよ。

読者様の読みやすさを考えますと、明朝系よりもゴシック系です。
ブラウザによる表示の違いをなくしたい方は、CSS でゴシックを指定して下さいね。

※参考までにこちらがヒラギノ明朝を指定した場合のディスプレイ上での明朝体です。
 明朝系はこれくらい綺麗に表示されないと見難いだけになってしまいます。
$+creative|アメブロスキンのカスタマイズ///CSS編集///オリジナルスキン

また、PC 環境においてのデフォルト設定でのフォントがゴシック体である場合が多いので、
ユーザが単純に「見慣れている」という点からも、ゴシック体が好まれます。

Windows の場合、3種類ほどゴシック系のフォントがインストールされていますが、
そのどれを選択するかは、各個人の好みなのでなんとも言い切れないところです。

ただ、ブログの場合においては記事内に英語が少しでも混ざる場合には、
等幅フォントである「MSゴシック」はオススメ出来ません。
(英字を全角で入力すると文字間の隙間が目立ち、半角の場合は逆に詰まり過ぎます。)

「MS UI ゴシック」は、13pt 程度の大きさにした時に読みにくいような印象を受けます。
Windows においては、ゴシック系では「MS P ゴシック」を選択するのが無難かと思います。

その他に、MacOSX のヒラギノ角ゴシックやヒラギノ丸ゴシック、
MacOS9 に入っていた「Osaka」フォントはとても読みやすいフォントとして、
現在でも好んで使う方もいらっしゃいます。

以前、制作しましたスキンは依頼者様から「Osaka」で表示したいとの指定もあったくらいです。

$+creative|アメブロスキンのカスタマイズ///CSS編集///オリジナルスキン