ブラウザで読みやすいフォントとは

フォントには様々な種類が用意されていて、どれにするのか迷いますね。そこで、今回は、フォントの指定方法だけでなく、ブラウザで読みやすいフォントについても説明します。


フォントには様々な種類がありますが、画面上で一番読みやすいフォントは、「Verdana」フォントだと思います。

当ブログでも「Verdana」フォントを使用していますが、「Verdana」フォントは、MTの初期設定では第一指定されています。また、他のブログサービスやWebサイトでも非常によく使用されていますね。

では、なぜ、「Verdana」フォントがよく使用されているのでしょうか？
そこで、今回は、「Verdana」フォントについて調べてみましたので、是非、参考にしてください。

■ Verdana フォント

「Verdana」フォントは、 「画面上での見た目、読みやすさ」を基準として 1996 年にデザインされた比較的新しいフォントです。Windows に標準でインストールされていますので、ほとんどのユーザー環境に対応しています。

< 表示例 >

あいうえお ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

フォントの特徴として、文字の幅が広く、小さな文字でもつぶれにくい特徴があります。また、エックスハイトが高く設定されており，サイズの割に大きく見えるという特徴をもちます。

この「Verdana」フォントを生み出したのは、書体デザイナーとして世界的に有名な人物である Matthew Carter 氏であるようです。
Matthew Carter氏は、「Verdana」以外にも、「Tahoma」 や「Geogia」などもデザインしています。

■ Tahoma フォント

「Tahoma」フォントも、Windows に標準でインストールされていますので、ほとんどのユーザー環境に対応しています。

< 表示例 >

あいうえお ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

フォントの特徴として、「Verdana」フォントに似たデザインですが、文字間隔が狭く設定されています。


フォントを指定するには、font-family というプロパティを使用します。

＜スタイルシートの記述例＞

.content p { font-family: Verdana, Arial, sans-serif; }

上記のような場合、「Verdana, Arial, sans-serif」という記述を変更することで、フォントを変更することができます。


フォントの指定方法には、下記のような方法があります。

■ フォント名で指定

font-family: "MS ゴシック", "MS 明朝", Arial ;

｢ＭＳ ゴシック｣や｢ＭＳ 明朝｣のようにフォント名で指定します。フォント名にスペースが含まれている場合には、ダブルクォーテーション（ " ）、または、シングルクォーテーション（ ' ）で囲みます。

■ キーワードで指定

font-family: sans-serif;

フォントの種類を表すキーワードで指定します。

種類	意味（フォント例）
serif	明朝体 （例、MS P明朝）
sans-serif	ゴシック体 （例、MS Pゴシック）
monospase	等幅文字 （例、MS ゴシック）
cursive	手書き文字 （例、HG行書体）
fantasy	装飾的な文字 （例、HG創英角ﾎﾟｯﾌﾟ体）

■ 複数指定

font-family: Verdana, Arial, sans-serif;

フォントの指定は、カンマ（ , ）で区切って複数の候補を並べることができます。 複数の候補を記述しておくことで、記述した順にユーザー環境で利用可能なものが選択され、より多くのユーザーに対して自分のイメージに近いフォントで表示させることができます。

指定したフォントがユーザーの環境にインストールされていない場合は、ブラウザで設定されたデフォルトのフォントで表示されます。


では、フォントのカスタマイズ方法について、ブログ別に説明します。カスタマイズする場合は、利用しているブログを選択してくださいね。

[MovableType]	→ フォントの変更（MT3.2編） → フォントの変更（MT3.17編）
[livdoor Blog]	→ フォントの変更（livedoorBlog編）
[FC2 ブログ]	→ フォントの変更（FC2ブログ編）

以上、ブラウザで読みやすいフォント、フォントの指定方法について説明しました。機会があれば、他のフォントについても説明していきます＾＾

[次の講義へ] → 読みやすい文字色にするには

参考になりましたら、1クリックの応援お願いします。